Jak kodować HTML w newsletterze

slav
CSS, Programowanie
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 projektowani a 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.