Dlaczego Outlook psuje mój mailing?!

Twój email nie wyświetla się prawidłowo w Outlooku? Nie jesteś sam. Wersje Outlooka od Outlook 2007 do teraz wykorzystują Microsoft Word do renderowania HTMLowych emaili, co może powodować, że twoja kampania mailingowa będzie wyglądać inaczej. Jak temu zapobiec?

1. Używaj <table>

Zapomnij o <div>. Korzystaj z tabel w swoich mailingach i za ich pomocą rozmieszczaj elementy mailingu.

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
     <tbody>
          <tr>
              <td>                                                                                                                                           _                 <img src="" alt="">
              </td>
           </tr>
       </tbody>
</table>

2. Pożegnaj się z margin i padding

Jeśli chcesz dodać odstępy pomiędzy elementami, spróbuj dodać dodatkowy rząd lub kolumnę tabeli i określ ich szerokość i wysokość <td style=”width: 180px;”></td>

3. Stosuj CSS inline

Niektóre z klientów pocztowych (w tym oczywiście Outlook) ominą wszystko co dodasz pomiędzy <style> i </style> w <head> swojego HTMLa. Dla pewności, że stylowanie zostanie zastosowane, należy skorzystać z CSS inline.

Jeśli chcemy zmienić wygląd mailingu na urządzeniu mobilnym, możemy śmiało opisywać style przy pomocy reguły @media i umieszczać je w tagu <style>.

4. Jakie tło?

Dodajesz tło w formie grafiki? Na pewno nie zobaczysz jej w swojej desktopowej aplikacji Outlooka. Tło w jednym kolorze działa bez problemu (tak nas rozpieszcza Outlook).

<td style="width: 180px; background-color: #95C11F; "></td>

5. Ustaw szerokość KAŻDEJ tabeli

Teoretycznie <table width=”600″> powinno utrzymać mailing w ryzach, a treść wyświetlać się w szerokości 600px. W praktyce lepiej sprawdzi się <table style=”width:600px;”>. Ważne, aby każda tabela, również zagnieżdżona w innej, miała określoną szerokość. W przeciwnym wypadku Outlook rozciągnie nasz mailing do pełnej szerokości.

Zwróć uwagę, aby szerokość twoich kolumn sumowała się do szerokości tabeli. Jeśli chcesz stworzyć wąską kolumnę, dodaj puste kolumny i zdefiniuj ich szerokość (patrz przykład poniżej) 

<table style="width:600px;">
  <tbody>
<tr>
     <td style="width: 180px;"></td>
          <td style="width:240px;">
             <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"     style="width:200px;">
                   <tbody>
                       <tr>
                         <td>
                                <!-- YOUR CONTENT -->
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td>
          <td style="width: 180px;"></td>
      </tr>
   </tbody>
</table>

6. Magiczny kod

Nie zaszkodzi wrzucić. 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

7. Czy na pewno musisz dostosować swój mailing pod Outlook?

Zadaj to kluczowe pytanie i trzymaj kciuki, żeby odpowiedź brzmiała nie. Według tego zestawienia tylko 4.3% użytkowników korzysta z aplikacji Outlooka.

ŹRÓDŁA