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%:
Komentarze
fOOdini
19-11-2011 16:23
Aleksander Ciesiołkiewicz
16-11-2010 12:48
Dodaj komentarz