Jak zrobić poprawny szablon wiadomości e-mail w formacie HTML
Zobacz także:
- Microsoft aktualizuje usługę pocztową. Czy nowy Hotmail pokona Gmaila?
- Gmail: zaawansowane ustawienia
- Gmail stawia na efektywność. Nowa usługa wychwyci najważniejsze maile
Do pobrania:
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.
- ~KDT
- 2010-09-03 17:52:13
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.
- ~gość
- 2010-09-03 20:27:53
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.
- ~gość
- 2010-09-03 21:30:54
@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ść
- 2010-09-03 22:59:16
"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ść
- 2010-09-04 00:21:03
cenzura na IDG wiecznie żywa.
- ~x
- 2010-09-04 06:04:25
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
- ~Thor
- 2010-09-04 09:08:32
<p><font face=arial size=1>Tekst.</font></p> Zabrakło cudzysłowów!
- ~gość
- 2010-09-04 13:21:57
Chwała cenzurze IDG!
- ~slepiec
- 2010-09-04 15:03:59
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.
- ~rla
- 2010-09-05 08:36:58
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.
- REDlink
- 2010-09-08 14:07:20
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.
- nick...
- 2011-03-23 13:49:31
Kliknij, żeby dodać komentarz
- Left
- 2011-05-18 15:30:51
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.
- Samouk
- 2011-06-13 20:01:59
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.
- Włodek
- 2011-06-15 20:57:08
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
- nick...
- 2011-08-26 16:57:30
Do Włodka:) coś dla słabszych, proszę.
- Krzychu
- 2011-11-17 13:25:07
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ę
- Anok
- 2011-12-03 19:39:10
Bardzo dobrze opisany. Lecz ja bym użył lepiej gotowego programu jakim jest AdMailer firmy Enterso. Link do strony producenta AdMailer.pl Polecam
Popularne produkty
Pobierz bezpłatnego e-booka 
Kariera w IT 2012
