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.
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.

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.
Tagi: Thunderbird, The Bat!, poczta elektroniczna, klienty poczty e-mail,
Oryginalny tekst został opublikowany na www.idg.pl
Ocena:
Twoja ocena:

Komentarze (18)

Anok

03-12-2011 19:39

Bardzo dobrze opisany. Lecz ja bym użył lepiej gotowego programu jakim jest AdMailer firmy Enterso. Link do strony producenta AdMailer.pl Polecam

Krzychu

17-11-2011 13:25

Weź pobierz sobie program AnoMail w którym jest dosyć fajny edytor HTML i nie musisz nic wiedzieć o HTMLu bo pracujesz w nim tak jak w Wordzie. A jak masz problem to dzwonisz do firmy AnoMail bo z programem masz u nich pomoc i z pewnością Ci pomogą. Mnie kilka razy uświadomili co robię zlę

nick...

26-08-2011 16:57

Do Włodka:) coś dla słabszych, proszę.

Włodek

15-06-2011 20:57

Do Lefta. Cały szablon kreacji razem z grafiką zapisujesz np. w pliku EML (Outlook Express lub Windows Live Mail) a potem importujesz do programu do mass mailingu takiego jak AnoMail 2007, Atomic Mail Sender lub Sendblaster. Jest tego pełno na rynku

Samouk

13-06-2011 20:01

Szkoda, ze wczesniej nie trafilem na ten artykul. Kiedys probowalem samodzielnie bawic sie w tworzenie listow... i stracilem tylko duzo czasu. Potem okazalo sie ze moj list wyslany z AnoMail 2007 do wielu odbiorcow nie byl poprawnie wyswietlany. Napracowalem sie gdyz robilem tla, cienie i te spawy. Na moim Outlooku oraz w Anomailu wygladal fajnie. A potem okazalo sie, ze super tla w tabelach nie wyswietlaja sie np. na WP. Teraz wole zaplacic komus kto ma pojecie jakie znaczniki moga byc uzywane niz tracic czas na dziobanie w HTMLu samodzielnie. Ja daje projekt a niech ktos inny zastanawia sie jak go zoptymalozowac do mailingow.

Left

18-05-2011 15:30

Zajebiście, tylko czym taką stronę później wysyłać? Jak to wrzucić do poczty? Gdzie umieścić pliki z grafiką tak, żeby nie wyświetlało się puste miejsce? Trochę to takie ogólnikowe. Niby poradnik, a nic nie wiadomo.

nick...

23-03-2011 13:49

Kliknij, żeby dodać komentarz

REDlink

08-09-2010 14:07

Niektórzy krytykują udzielane rady, uważając opisywane metody za przestarzałe. Pragnę jednak przypomnieć, że tekst dotyczy komunikacji via e-mail a nie tworzenia stron internetowych. Całym sercem wspieramy i jesteśmy za nowymi standardami i dobrymi praktykami, niestety ograniczenia obecnych klientów pocztowych i webmaili, w tym najpopularniejszych, powodują, że newslettery trzeba tworzyć w ten a nie inny sposób. Oczywiście możemy skorzystać z nowatorskich rozwiązań, jednak efekt tego będzie mizerny - większość odbiorców nie zobaczy naszej wiadomości.

~rla

05-09-2010 08:36

Dlaczego HTML a nie XHTML i dlaczego tagi typu <center> czy <font.. i tabelki? Przyczyna jest prosta Outlook, nawet w wersji 2010 wykorzystuje do renderowania maili silnik Worda, a ten nie koniecznie dobrze sobie radzi z tym zadaniem. Niestety w olbrzymiej części (jeśli nie w większości biur) używany jest Outlook zwłaszcza jeśli w firmie używany jest serwer Exchange.

~slepiec

04-09-2010 15:03

tworzylem skrypt notifiera dla repozytorium mercuriala - najwiecej problemw bylo zwiaznych z Outlookiem 2007/2010 - starsze wersje nie sa tak bardzo restrykcyjne .W zwyklym outlook express jest bardziej rozwiniety silnik renderingu html niz w pelnym outlooku z office''a 2007.

~Gość

04-09-2010 13:21

Chwała cenzurze IDG!

~Thor

04-09-2010 09:08

<p><font face=arial size=1>Tekst.</font></p> Zabrakło cudzysłowów!

~x

04-09-2010 06:04

html5 bedzie dobre z jeszcze jednego poziomu bedzie wspierac osadzanie plikow wideo z kodekiem vp8 i calkowicie wyeliminuje koniecznosc gownianego flasha ktorego po prostu nie da sie uruchomic poprawnie na maszynie wolniejszej niz 1GHz czyli w zasadzie wszystkie smartfony

~Gość

04-09-2010 00:21

cenzura na IDG wiecznie żywa.

~Gość

03-09-2010 22:59

"Ja się szczerze zaskoczyłem gdy się okazało że nawet niektóre witryny oferujące usługi pocztowej używają kodowania ISO i nie potrafią sobie poradzić z wiadomościami w formacie UTF8." Nie moja wina, że korzystasz z przestarzałych rozwiązań. Nie można też cały czas spoglądać wstecz. Może nie używajmy obrazków, bo może ktoś będzie chciał korzystać z lynx (teoretycznie nie powinniśmy w ogóle używać HTML w wiadomościach email, tylko plain text)? Może lepiej w ogóle zaprzestać z korzystania z polskich znaków. Ba, każde zdanie zapisane w alfabecie nie-łacińskim będziemy transliterować do podstawowych liter alfabetu łacińskiego! Puknij się chłopcze. "HTML5 będzie łączy zarówno HTML jak i XML więc XHTML nie ma prawa bytu." Jak słusznie zauważyłeś - będzie. A obecnie zalecanym rozwiązaniem jest XHTML. Krótko mówiąc - zbłaźniłeś się. Nikt poważny nie proponowałby nawet stosowania nieukończonego formatu jakim jest HTML5.

~Gość

03-09-2010 21:30

@79.184, może najpierw przeczytaj tekst zamiast zachowywać się jak troll. To że nie potrafisz czytać ze zrozumieniem nie oznacza że masz prawo do pisania bezsensownych komentarzy. Ja się szczerze zaskoczyłem gdy się okazało że nawet niektóre witryny oferujące usługi pocztowej używają kodowania ISO i nie potrafią sobie poradzić z wiadomościami w formacie UTF8. Co do XHTML to się puknij chłopcze. XHTML o ile jest bardzo fajnym standardem (restrykcyjny i czysty) o tyle jest niewypałem z prostego względu. HTML5 będzie łączy zarówno HTML jak i XML więc XHTML nie ma prawa bytu. Dlatego zarzucono prace nad standardem 2.0. W skrócie. Zbłaźniłeś się swoim komentarzem.

~Gość

03-09-2010 20:27

HTML 4.01 zamiast XHTML 1.x, ISO-8859-2 zamiast UTF-8, tabele zamiast stylów CSS, podawanie szerokości w pikselach - porady prawdziwych profesjonalistów.

~KDT

03-09-2010 17:52

Tiaaa, HTML 4.01, tylko który? Sądząc po używaniu odrzuconych przez W3C, badziewnych znaczników typu <font...> na pewno chodzi o Transitional. Przy tylu pomocnych radach, dobrze by było być odpowiednio precyzyjnym.

Polecane

Kariera w IT 2012

Kariera w IT 2012
Uczelnie, rynek pracy, rekrutacja, pracodawcy, rozwój zawodowy - czyli wszystko, co chcielibyście wiedzieć o pracy specjalistów IT w Polsce. Piszemy jakie uczelnie wybrać, dlaczego warto studiować informatykę i kierunki techniczne, jak wygląda proces rekrutacji i jak dobrze wypaść przed pracodawcą, opisujemy pracodawców - firmy IT - i możliwe ścieżki kariery.

Pobierz bezpłatnego e-booka

20 lat polskiej sieci
Ebook 20 lat polskiej sieci to kompletna charakterystyka polskiego internetu (oraz polskiego internauty). Odpowiadamy na pytanie, jak wygląda nasz kraj na tle bliższych i dalszych europejskich sąsiadów pod względem popularyzacji szerokopasmowych łączy internetowych i rynku mobilnego. Wymieniamy również wady i zalety korzystania z bezpłatnych punktów dostępowych.
Jeśli chcesz otrzymać darmowego e-booka, wpisz swój adres e-mail. Wyślemy Ci go natychmiast!
Wyrażam zgodę na wykorzystywanie mojego adresu email do celów marketingowych. rozwiń »