[HTML/CSS] Formatowanie wiadomości e-mail w HTML dla mailingu

Data dodania wpisu: 18-08-2010

Tabelki Hallelujah

Formatowanie treści (kodu HTML) w wiadomościach e-mail, np. przeznaczonych na mailingi, jest tematem dość restrykcyjnym, choćby ze względu na ograniczenia, jakie wprowadzają zarówno programy pocztowe (MS Outlook, Mozilla Thunderbird etc.) oraz aplikacje webowe (Hotmail, Gmail i tak dalej).

Niektóre aplikacje służące do wyświetlania zawartości skrzynki pocztowej, nie dość, że skutecznie uniemożliwiają używanie styli w klasach CSS, to do tego kasują niektóre tagi HTML.

Selektory CSS

Pierwszą sprawą, jakiej trzeba pilnować, jest stosowanie jak najbardziej kompatybilnych styli CSS dla wszystkich (lub co najmniej - większości) klientów pocztowych, z których potencjalni odbiorcy mogą korzystać. W tym miejscu mogę polecić dwie lektury anglojęzyczne dotyczące dostępnych reguł CSS stosowanych dla wiadomości e-mail w formacie HTML: Guide to CSS support in email clients oraz CSS support in HTML emails.

Znaczniki kodu HTML

HTML w wiadomościach e-mail nie jest stricte pełnym kodem markup. Niektóre aplikacje mailowe (np. Gmail) wyrzynają wszystko co znajduje się poza znacznikami <body>.

Swojego czasu, tworząc pierwszy mailing, kiedy Gmail jeszcze nie był do tego stopnia restrykcyjny, udało mi się swoim kodem w mailu rozwalić całego Gmaila - wszystkie elementy fruwały po stronie jak chciały:)

Układ elementów - powrót do korzeni, czyli "Witajcie Tabelki! :)"

Tak, powyższy nagłówek to nie żart! :) Dlaczego? A dlatego, że za pomocą tabelek i reguł "colspan" oraz "rowspan" możemy dokonać tego, czego dla klientów mailowych nie zrobimy za pomocą warstw (np. <div>) oraz selektorów typu "float" czy "clear". Dlatego z całą odpowiedzialnością mogę stwierdzić - ten kto uważa, że tabelki to samo zło - jest w wielkim błędzie. Tabelki mają niebotyczną przewagę w przypadku szablonów maili nad "divami":) Powrót do przeszłości zatem jak najbardziej wskazany:)

Doctype

Jego racja bytu w mailingu kończy się już na samym początku kodu. Jest wycinany przez każdego klienta pocztowego (zarówno aplikacje, jak i systemy webowe). Zatem nie ma sensu uwzględniać go w kodzie.

Znacznik <html>

Jest usuwany przez większość aplikacji (jedną z nielicznych, która go wykorzystuje, jest Yahoo! Mail. W czystej praktyce - nie ma sensu go umieszczać w kodzie HTML szablonu maila.

Znacznik <style>

W fazie projektowania możemy go umieścić w kodzie - przyda się na później. W kolejnych akapitach tego artykułu wyjaśnię również - dlaczego;)

Poza tym - nie jest używany przez większość klientów pocztowych, a co za tym idzie - nie jest w pełni kompatybilny.

Znacznik <head>

Jak wyżej - zbędne;) Wycinany przez klientów pocztowych, niekompatybilny.

Znacznik <body>

I to jest meritum całego maila i jego treści, ciało w ciele - dosłownie;) Natomiast należy przypomnieć zwrotkę z początku tego artykułu - wszystkie znaczniki wewnątrz tagu <body> powinny być ostylowane w CSS korzystając z reguł wpisywanych w selektorach "style" - czyli stylujemy znaczniki HTML metodą "in-line". Nie zmienia to faktu, że możemy w fazie developerskiej korzystać z normalnych klas CSS i ich własności dla znaczników HTML.

Poprawna konwersja kodu HTML/CSS do kodu HTML ze stylami "in-line"

I to jest drugie meritum tego artykułu i zarazem metoda skracająca niesamowicie pracę kodera: korzystając ze strony HTML email inline styler, możemy przerobić cały kod szablonu email ostylowanego za pomocą klas i atrybutów ID do gotowego kodu HTML stylowanego metodą "inline" ! :)

Wystarczy wkleić kod w formacie:

<html>
 <head>
  <style>
   *{padding:0;margin:0;color:#000;}
   p{border:1px solid black;margin:10px;}
   .klasa{background-color:#fafafa;}
   .klasa2{background-color:#000;color:#fff;}
  </style>
 </head>
 <body>
  <p class="klasa">Srutututu</p>
  <p class="klasa2">Pierdu pierdu</p>
 </body>
</html>

aby w wyniku przeróbki otrzymać:

<html>
  <head/>
  <body style="padding: 0;margin: 0;color: #000">
  <p class="klasa" style="padding: 0;margin: 10px;color: #000;border: 1px solid black;background-color: #fafafa">Srutututu</p>
  <p class="klasa2" style="padding: 0;margin: 10px;color: #fff;border: 1px solid black;background-color: #000">Pierdu pierdu</p>
 </body>
</html>

Oczywiście fakt, że w wynikowym kodzie znajdują się nasze klasy nic nie znaczy. Możemy je spokojnie usunąć z kodu, ponieważ w wyniku otrzymujemy gotowy kod HTML ze stylami "in-line".

Dodatkowo, strona zawiera spis reguł, który pozwala na określenie, jaki jest stopień zgodności przygotowanego szablonu email dla klientów pocztowych. Dla powyższego przykładu stopień zgodności wynosi 92%:

Poziom zgodności kodu HTML i CSS

Komentarze

Rewelacja
Faktycznie przydatne informacje.
Dziękować...
Dzięki, już sie przydało :-)
"I życie stało się prostsze"
Bardzo pomocny artykuł.
Dziękuję i serdecznie pozdrawiam.
Jakub
Należy Ci się browar!... idź do sklepu i go sobie kup ;)
Właśnie czegoś takiego szukałem :D You saved my day ;]
Comments closed...