Jak zrobić poprawny szablon wiadomości e-mail w formacie HTML

Z uwagi na różnorodność programów do obsługi poczty elektronicznej e-maile w formacie HTML mogą różnie (czasem niestety nieprawidłowo) wyświetlać się w różnych aplikacjach. Zobacz, jak sporządzić szablon wiadomości HTML tak, by e-mail dobrze wyświetlał się w każdym kliencie.

Spis treści

Krok 1. Właściwe kodowanie Krok 2. Wygląd wiadomości Krok 3. Ostrożnie z grafikami Krok 4. Wiadomość w formacie tekstowym

Polecamy:

Zobacz także:

Do pobrania:

Klient poczty e-mail

Problemy w obsłudze HTML-owych listów elektronicznych przez różne aplikacje wynikają z faktu, że programy te (np. Microsoft Outlook, Outlook Express, The Bat!, Thunderbird czy aplikacje typu webmail, jak Google Gmail), w różny sposób interpretują kod HTML, XHTML czy CSS. Jak zapobiec tej niedogodności?

Krok 1. Właściwe kodowanie

Projektując szablon wiadomości pocztowej w HTML, należy używać standardu HTML 4.01 oraz kodowania ISO-8859-2 (tzw. Latin-2). Spośród innych standardów, w których mogą być kodowane polskie znaki diakrytyczne (tj. Windows-1250 i UTF-8) daje on najlepsze efekty.

Zobacz również:

Najlepsze programy pocztowe - zestawienie na 2022 rok

Jak tłumaczy Tomasz Pakulski z firmy Vercom, dostawcy platformy Redlink.pl do efektywnej komunikacji bezpośredniej, standard ISO-8859-2 jest bez problemów interpretowany przez najwięcej aplikacji pocztowych dostępnych na rynku: "Dla porównania - starsze aplikacje nie obsłużą nowego UTF-8, a Windows-1250 poprawnie wyświetli się wyłącznie w programach z rodziny Microsoft".

Krok 2. Wygląd wiadomości

Wg Pakulskiego do określenia wyglądu wiadomości najlepiej zamiast stylów czy warstw zastosować tabele, które - chociaż przestarzałe w porównaniu ze stylami - zapewnią poprawne wyświetlenie wielu aplikacjach. Warto przy tym pamiętać o kilku zasadach:

- tabele i komórki powinny mieć określoną stałą szerokość (optymalna wartość to 500-600 pikseli dla całej wiadomości; większa szerokość sprawi, że przy odczycie poczty w niektórych programach może pojawić się konieczność poziomego przewijania treści maila)

- aby wyśrodkować szablon w tabeli zastosuj atrybut align="center" w tabeli (marginesy można określić korzystając ze znaczników cellMargin)

- unikaj korzystania z atrybutów cellpadding i cellspacing, nie używaj funkcji position: absolute do pozycjonowania tekstu

- nie definiować stylów w sekcji HEAD (większość sieciowych usług pocztowych pomija bądź usuwa tę część kodu wraz ze znacznikiem BODY).

- aby zadbać o poprawne wyświetlenie tekstu używaj standardowych czcionek (np. Times New Roman, Arial, Verdana czy Tahoma) o określonej wielkości, np.:

<p>Tekst.</p>

- zrezygnować z obrazkowego tła wiadomości - wiele klientów nie obsługuje tej funkcji. Być może lepiej zastosować znacznik bgcolor dla tła w jednolitym kolorze.

Krok 3. Ostrożnie z grafikami

Decydując się na umieszczenie w liście obrazka nalezy pamiętać, że nie powinien być on elementem niezbędnym do przeczytania wiadomości, a co najwyżej składnikiem uatrakcyjniającym ją.

W korespondencji mogą być co najwyżej umieszczane pliki graficzne z rozszerzeniem JPG, GIF i PNG. Tomasz Pakulski przypomina, że powinny być one umieszczane w kodzie HTML przy użyciu znacznika img src i uzupełniane atrybutem alt, odpowiedzialnym za wstawienie tekstu zamiennego (wyświetlanego w momencie blokady obrazków).

Grafiki należy dołączać do maila, nie umieszczać ich na serwerze zewnętrznym.

Krok 4. Wiadomość w formacie tekstowym

Na wszelki wypadek do maila HTML powinna być dołączona jego wersja tekstową . Wielu użytkowników - świadomie czy nie - nie odbiera wiadomości HTML.