Koszmar generowania wiadomości e-mail w HTML
10 grudnia 2011
Niektórzy twierdzą, że e-maile w ogóle nie powinny występować w postaci HTML. E-mail to ma być prosta, tekstowa wiadomość, od wszystkiego innego są strony www. Trudno odmówić temu rozumowaniu logiki. Zwłaszcza, gdy dostajemy kolejną reklamę przeładowaną grafiką. Mnie osobiście podobają się jednak ładne, dobrze zorganizowane e-maile, bez bajerów i innych wodotrysków. To cieszy oko i ułatwia korzystanie. Chciałbym budować maile używając HTML’a i CSS’a. Ale…
Najważniejszych przeglądarek internetowych mamy kilka, każda w kilku wersjach. Potrafi to przyprawić o ból głowy. Na szczęście już całkiem nieźle radzą sobie z obsługą standardów. Natomiast klientów pocztowych są dziesiątki a może nawet setki! Po pierwsze, trzeba je podzielić na klienty desktopowe i webowe. Tych pierwszych jest mniej ale i tak wiele. Tych drugich jest zatrzęsienie i nie ma tu żadnych reguł, każdy dostawca poczty często robi wszystko po swojemu.
Efekt jest opłakany. Zbudować dzisiaj atrakcyjny e-mail w HTML/CSS, który byłby prawidłowo wyświetlany we wszystkich popularnych klientach jest co najmniej ogromnym wyzwaniem. Prym wśród najpopularniejszych wiedzie… Gmail! Rozumiem, że to w trosce o swoich użytkowników ale ich klient wycina ze źródła prawie wszystko.
No ale dość tych gorzkich żali 
Czas na jakieś wskazówki. Oto co należy robić a czego bezwzględnie unikać przy budowaniu kolejnego newslettera:
- Używaj UTF-8.
- Cofnij się o 8 lat w rozwoju i do zbudowania głównej struktury użyj tylko tabelek.
- Cofnij się o 10 lat w rozwoju i nie wstydź się tagów typu <center />.
- Możesz używać styli CSS tylko w postaci inline czyli przypisanych bezpośrednio do tagów w atrybucie style=”". Nic innego nie zadziała.
- Gdzie tylko możesz, używaj starych atrybutów zamiast CSS np. width=”". A najlepiej oba.
- Zapomnij o pozycjonowaniu absolutnym. Najlepiej zapomnij o jakimkolwiek pozycjonowaniu.
- Zapomnij o tłach obrazkowych. Gdziekolwiek i bez względu na użytą metodę. Tekstu nad obrazek po prostu nie wstawisz, koniec kropka. Zostaje Ci tło jako kolor.
- Lepiej zrobić wszystko na konkretne wymiary i podawać je gdzie się da. Procenty lub pomijanie podawania niektórych wymiarów może się skończyć rozjechaniem całego szablonu.
- Marginesy zewnętrzne i wewnętrzne? Niestety, nie możesz.
- Nawet width i height mogą nie zadziałać na innych elementach niż tabelki i ich komórki.
- W sekcję <head /> możesz wpisać tag odpowiedzialny za kodowanie znaków. I to też tylko dla świętego spokoju. Nic więcej nie umieszczaj bo i tak wytną.
- Nie dodawaj niczego bezpośrednio do tagu <body /> bo i tak zostanie to usunięte.
- Jeżeli chcesz dać np. kolor tła dla całej wiadomości to użyj jakiegoś kontenera (np. <div />) i daj mu szerokość 100%. Wysokość zawsze dostosuje się do zawartości, inaczej się nie da.
- Dla swojego dobra powielaj gdzie się da ustawienia dla czcionki itp. bo nigdy nie wiadomo dla którego elementu nasz klient pocztowy postanowi zresetować te wartości do tych domyślnych.
- JavaScript? Najprostsza droga do katalogu „Spam” (I moim zdaniem dobrze, obsługa JS to byłaby już jednak przesada).
To lista najtwardszych zasad, którymi musisz się kierować ale ograniczeń jest oczywiście dużo więcej. Każdy znający HTML/CSS łatwo odpowie sobie, które jeszcze rzeczy nie zadziałają skoro nawet tak podstawowe metody wymienione wyżej sprawiają ogromne problemy.
Na szczęście są strony, które kontrolują sytuację i sprawdzają za nas co wolno a czego trzeba się wystrzegać.
Pierwsza z polecanych przeze mnie witryn to www.campaignmonitor.com/css/. W ładny i przystępny sposób prezentuje ograniczenia klientów pocztowych. Na górze, w prawej ramce, mamy linki do obszerniejszego raportu, obejmującego 24 klienty (stan na grudzień 2011).
Druga strona to www.email-standards.org. Prezentuje dokładne recenzje wielu popularnych klientów. Niestety nie w tak przystępnej formie jak powyższa strona ale też przydatne.
Radzę wziąć sobie te zasady do serca i pilnować grafika jeżeli takowego masz w zespole bo i bez jego finezyjnych wygibasów w Photoshopie, możesz spędzić kilka godzin nad przygotowaniem jego wizji w formie wiadomości e-mail. Znam z doświadczenia
Ostatnia informacja ze świata przeglądarek Internetowych zaskoczyła wszystkich. Google, które mocno wspierało rozwój Firefox’a, wypuściło niespodziewanie własną przeglądarkę. Rozgorzały setki dyskusji co to teraz będzie, o co tak naprawdę chodzi Google itd.
Blog przede wszystkim o Internecie i mojej pasji jaką jest tworzenie stron www. Ale nie ograniczam się do jednej tematyki, piszę o wszystkim o czym mam ochotę :-)