Jak ugryźć HTML w programie pocztowym?

Wraz z dynamicznym rozwojem Internetu rośnie liczba programów i serwisów służących do obsługi poczty elektronicznej. O ile różnorodność sprzyja przy wyborze oferty, o tyle skomplikowane zasady rządzące wysyłką wiadomości HTML to nieraz ciężki orzech do zgryzienia dla użytkowników i przedsiębiorców zgłębiających tajniki tego języka.

Tomasz Pakulski z firmy Vercom, dostawcy platformy Redlink.pl do efektywnej komunikacji bezpośredniej podpowiada, jak przygotować szablon HTML dla wiadomości e-mail, aby zagwarantować jej prawidłowe wyświetlenie we wszystkich programach pocztowych.

W czym tkwi problem?

Producenci prześcigają się oferując całe mnóstwo aplikacji desktopowych. Mamy takie programy, jak: Windows Live, Microsoft Outlook, Outlook Express, The Bat, Thunderbird, Lotus Notes, a także aplikacje webowe (tzw. Webmaile), czyli: Gmail, Onet, WP, Interia, O2, AOL, YAHOO i wiele innych.

Dość często bywa, że ta sama wiadomość zostaje w różny sposób wyświetlona w zależności od używanej aplikacji do odbioru poczty. Fakt ten wynika z odmiennej interpretacji kodu HTML, XHTML oraz CSS. Co więcej, na tym polu zawodzą nawet najbardziej znane marki, jak: Gmail, Lotus czy rodzina programów Outlook (w tym najpopularniejsze wersje 2003 i 2007). Warto podkreślić, że dyskusja na temat standardów sieciowych jest jednym z najczęściej poruszanych tematów w świecie biznesu internetowego, jednak optymalnych rozwiązań wciąż nie widać.

Po pierwsze - kodowanie

Rozpoczynając projektowanie szablonu HTML dla wiadomości e-mail najlepiej zastosować standard HTML 4.01 zamiast, coraz popularniejszego, XHTML.

Generalnie polskie znaki diakrytyczne mogą być kodowane w jednym z trzech standardów - Windows-1250, ISO-8859-2 (tzw. Latin-2) lub UTF-8. Na obecną chwilę najlepsze możliwości daje kodowanie w standardzie ISO-8859-2. Dlaczego? Ponieważ bezproblemowo interpretuje go największa liczba klientów 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.

Po drugie - postaw na klasykę

Wspomniana na początku różnorodność aplikacji pocztowych nie sprzyja stosowaniu nowoczesnych rozwiązań przy projektowaniu szablonów e-mail. Dlatego do określenia wyglądu wiadomości najlepiej zamiast stylów czy warstw zastosować tabele, choć te pierwsze stają się coraz bardziej popularne przy projektowaniu stron internetowych. Choć przestarzałe, tabele pozwolą na poprawne wyświetlanie treści e-maila w wielu programach pocztowych - a o to właśnie chodzi.

Tabele oraz komórki powinny mieć stałą, określoną szerokość - optymalna to 500-600 pikseli dla całej wiadomości. Większa szerokość sprawi, że w niektórych programach desktopowych lub Webmailach e-maile będą niewidoczne w całości, co w przypadku przewijania poziomego negatywnie wpłynie na czytelność danego e-maila. Wysokość wiadomości nie musi być limitowana, ponieważ wększość Internautów i tak przyzwyczajona jest do paska przesuwania pionowego.

Do wyśrodkowania kreacji zaleca się stosowanie atrybutu align="center" w tabeli. Z kolei marginesy można określić przy zastosowaniu znaczników cellMargin. Należy wiedzieć, że niektóre programy do odbioru poczty nie obsługują atrybutów cellpadding i cellspacing, stąd bezpieczniej jest zrezygnować z ich stosowania. Absolutnie niedozwolone jest pozycjonowanie tekstu przy pomocy funkcji position: absolute. Odradza się również używanie atrybutu rowspan dla znacznika td służącego łączeniu wierszy w kolumnie. Wiele programów nie poradzi sobie z tak przygotowanym kodem, co spowoduje błędne wyświetlenie wiadomości e-mail - alternatywą będzie tworzenie tabel wewnętrznych.

Stosowanie styli jest jednym z najbardziej zawodnych elementów przy przygotowywaniu szablonu HTML. Dzieje się to dlatego, że niemal każda aplikacja, czy to desktopowa, czy webowa, interpretuje je na swój własny sposób - zazwyczaj odmienny od zamierzonego. Warto wspomnieć tu chociażby o Webmailu Interia, który ich w ogóle nie obsługuje.

Należy też pamiętać o unikaniu definiowania stylów w sekcji HEAD, gdyż większość Webmaili pomija bądź usuwa tę część kodu wraz ze znacznikiem BODY.

W przygotowywanym projekcie e-maila najlepiej stosować standardowe czcionki, takie jak np.: Verdana, Tahoma, Arial lub Times New Roman z określeniem ich wielkości np.: <p><font face=verdana size=1>Przykładowy tekst.</font></p>. Takie rozwiązanie zapewni prawidłowe wyświetlanie tekstu w większości programów pocztowych.

«poprzednia 1 2 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

7 skomentuj »

Komentarze

#1 Peter Riley 2010-09-06 12:27:54 0
HTML nie jest językiem, a w mailach najlepiej w ogóle go nie używać.
IP: 212.87.25.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.53 Safari/534.3
#2 Pigmej_ 2010-09-06 12:40:21 0
HyperText Markup Language Jest językiem... Nie jest językiem programowania.
IP: 77.253.21.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/534.6 (KHTML, like Gecko) Chrome/7.0.503.1 Safari/534.6
#3 slav 2010-09-10 13:10:11 0
Autor tego postu może to i owo poczytał na temat czytników poczty, ale praktycznie to chyba nie robił żadnego newslettera pod gmaila i pod outlooka ;)

brakuje podstawowych informacji pt. jak poradzić sobie z dodatkowym marginesem dla obrazków w gmailu, albo z problemem centrowania np. tabeli...

zakładając, że naszymi odbiorcami będą głównie użytkownicy outlooków i webmaili trzeba się nastawić na IE w wersji 6.0 oraz gmaila po IE ;) jeżeli maile pod jednym i drugim wyglądają dobrze, jest duże prawdopodbieństwo że więcej problemów mieć nie będziemy....
IP: 27.32.7.[...] Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.6 (KHTML, like Gecko) Chrome/7.0.503.1 Safari/534.6
#4 slav 2010-09-10 13:11:09 0
Autor tego postu może to i owo poczytał na temat czytników poczty, ale praktycznie to chyba nie robił żadnego newslettera pod gmaila i pod outlooka ;)

brakuje podstawowych informacji pt. jak poradzić sobie z dodatkowym marginesem dla obrazków w gmailu, albo z problemem centrowania np. tabeli...

zakładając, że naszymi odbiorcami będą głównie użytkownicy outlooków i webmaili trzeba się nastawić na IE w wersji 6.0 oraz gmaila po IE ;) jeżeli maile pod jednym i drugim wyglądają dobrze, jest duże prawdopodbieństwo że więcej problemów mieć nie będziemy....
IP: 27.32.7.[...] Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.6 (KHTML, like Gecko) Chrome/7.0.503.1 Safari/534.6
#5 Mk1_ 2010-10-09 08:02:01 0
"sukcesywnie dostarczonych informacji" ?!

W języku polski "sukcesywnie" oznacza "stopniowo, w etapach" a nie "skutecznie, czytelnie".
IP: 87.205.238.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)
#6 masztan 2011-04-03 11:46:53 0
Chciałbym dodać, że obrazki typu aby dobrze sie też wyświetlały np. w gmailu wystarczy taki plik ustawic jako załącznik o jakiejs tam nazwie, np zal_rysunek a wtedy w dla src dajemy:

src="cid:zal_rysunek"

i z wyswietleniem nie ma klopotu. Do tego bardzo czesto ten obrazek juz nie wyswietla sie jako dodatkowy zalacznik.
IP: 109.243.224.[...] Mozilla/5.0 (Windows NT 5.1; rv:2.0) Gecko/20100101 Firefox/4.0
#7 masztan 2011-04-03 11:48:33 0
Glupia sprawa z dodawaniem postu. Dzialaja na zasadzie strip_tags zamiast przekodowac zeby bylo widoczne znacziki tagow (htmlspcialchars).

W poscie wyzej dalem w tagu img i zostal wyciety.
IP: 109.243.224.[...] Mozilla/5.0 (Windows NT 5.1; rv:2.0) Gecko/20100101 Firefox/4.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.