Jak kodować HTML w newsletterze

Podstawowe narzędzie marketingowe współczesnego internetu – newsletter, w niektórych krajach znane jako EDM. Kto chociaż raz próbował, wie że nie jest to specjalnie łatwe zadanie. Znajomość HTML’a i CSS nie wystarczy, trzeba znać odpowiednie sztuczki i posiadać doświadczenie. Na czym polega problem? Na tym, że w przeciwieństwie do zwykłych stron musimy zwrócić uwagę „jedynie” na 3 głównej przeglądarki i ich wariacje. Zakładając jednak że kodujemy poprawnie i nie szalejemy ze stylami strona będzie mniej więcej wyglądać poprawnie. W przypadku EDMów liczba klientów jest praktycznie nieograniczona, a większość z nich ma swoją własną interpretacje HTML CSS i świata 😉

Mamy więc zabawę z webmail’ami typu GMAIL, czy popularnymi rozwiązaniami OpenSource takimi jak AtMail, SquirellMail, roundcube czy setką innych – nie wspomnę już o dedykowanych. Do tego są desktopowe programy typu Outlook Express, FireBrid i oczywiście rozwiązania mobilne. Na każdym z nich nasz email będzie wyglądał inaczej, każdy wygeneruje inny zestaw problemów, które trzeba jakoś rozwiązać.

Jakiś czas temu wypuściłem tweeta z odnośnikiem do ciekawego artykułu, który prezentuje kilka podstawowych zasadach projektowania EDMów, a uzupełnieniem tego artykułu jest strona htmlemailboilerplate.com, gdzie możemy znaleźć podstawowy szablon dla tworzenia EDMów.

Esencja porad zawartch na wspomnianej wcześniej stronie to:

  1. Zapomnij o fikuśnych CSSach,
  2. Osadzaj CSS inline – w konkretnych tagach, style nie działają wszędzie,
  3. Nie używaj skrótów przy kolorach – #FFF
  4. Korzystaj z tabelek – nie z warstw (DIV),
  5. W tabelkach ustawiaj szerokość, pamiętaj o atrybutach valign i align
  6. Obrazek jako tło nie zadziała w niektórych klientach,
  7. Jeżeli obrazki w GMAILu się rozjeżdżaja, dodaj style="display:block",
  8. Korzystaj z rozwiązań typu spacer.gif (przeźroczysty GIF o wymiarach 1×1 do zapełniania pustych tabelek i miejsc)
  9. Korzystaj z <BR> zamiast <P> – ten drugi ma różne wartości marginesów w różnych klientach,
  10. Szerokość designu nie powinna być w granicach 550-600px,
  11. Zapomnij o JavaScript.
Jeszcze jeden przydatny odnośnik – wsparcie CSS w poszczególnych klientach poczty.
No i mała sztuczka – GMAIL lubi podmieniać odnośniki znalezione w tekście i psuć formatowanie. Jeżeli chcesz tego uniknąc możesz użyć znacznika &#173; w adresie, żeby oszukać gmail i inne klienty poczty. Przykładowo: Jeżeli mam zdanie: „Strona gex.pl to blog” klient poczty na 99% zamieni gex.pl na odnośnik do tej strony, jeżeli tego nie chcesz skorzystaj z formatu typu gex&#173;.pl