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.
IDG.pl — 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.:
Tekst.
- 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.
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.
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.
@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.
"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.
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
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.
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.
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.
