http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/say-hello-to-the-html-email-boilerplate/

HTML Email Boilerplate jest szablonem który pomaga stworzyć dobrą wiadomość email, poprawnie renderowaną w najpopularniejszych klientach pocztowych: Gmail, Outlook, Yahoo itp. Dostarcza kilku przykładów i wskazówek jak powinna wyglądać poprawnie sformatowana wiadomość email. Oczywiście można skorzystać tylko z wybranych fragmentów szablonu.

Kilka podstawowych zasad przy tworzeniu wiadomości email to:

  • Jedyne zewnętrzne elementy emaila to obrazki. Nie używamy zewnętrznych arkuszy stylów, czcionek czy plików wideo
  • Klienty pocztowe w ograniczonym stopniu wspierają CSS.
  • Do tworzenia layoutu wiadomości email najlepiej używać tabel

Więcej opisanych jest w poście „Jak stworzyć dobrą wiadomość e-mail lub newsletter”

Ustawienie DOCTYPE

Mimo że wiele klientów wycina DOCTYPE lub w ogóle na niego nie pozwala, nie znaczy że nie mamy go ustawić. Użyjemy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wstawianie obrazków

Jest kilka kwestii, które należy wziąć pod uwagę podczas pracy z obrazkami w wiadomości email.

  • Linkowanie zdjęć do innej strony może być trudne. Klienty pocztowe ustawiają często niechciane i brzydkie obramowanie wokół klikalnego obrazu.
  • Niektóre klienty dodają dodatkową przestrzeń pod obrazkiem.
  • Ponieważ wiele klientów e-mail domyślnie wyłącza obrazki wiadomości może być zniekształcona.

Aby temu zaradzić szablon ustawia kilka wartości w nagłówku dokumentu. Resetuje obramowanie obrazków do zera, ustawia klasą image_fix, która usuwa odstęp pod obrazkiem. Podpowiada również aby zawsze ustawić szerokość, wysokość, alt i title obrazka. Pomoże to zachować odpowiedni format emaila.

img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
.image_fix {display:block;}

Tabele i jeszcze raz tabele

Tabele są najczęściej używanym elementem do formatowania wiadomości email. Zagnieżdżanie tabel jest świetnym sposobem na grupowanie i oddzielanie treści, aby osiągnąć zamierzony wygląd wiadomości. Boilerplate dostarcza kilku gotowych ustawień. Pierwsze to #backgroundTable która jest najbardziej zewnętrzną tabelą, kontenerem wiadomości, który wypełnia całą dostępną przestrzeń w programie pocztowym. Jest to konieczne ponieważ niektóre klienty ograniczają obszar renderowania wiadomości.

#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

 

</pre>
<table id="backgroundTable" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">...</td>
</tr>
</tbody>
</table>
<pre>

Druga, wewnętrzna tabela jest wyśrodkowana i ma ustawioną szerokość na 600px, aby nasza wiadomość nie była szersza niż okno klienta. Tak jak w przypadku obrazków, boilerplate ustawia kilka domyślnych właściwości, aby tabele były poprawnie i ładnie wyświetlane: border, cellpadding, cellspacing są ustawione na zero i treść jest pionowo wyrównana do góry komórki tabeli. Ze względu na ograniczone wsparcie dla div-ów w klientach pocztowych, tabele są najlepszym, a czasem jedynym sposobem na sformatowanie wiadomości email.

Poprawki specyficzne dla klientów pocztowych

Boilerplate stara się neutralizować niektóre niepożądane cechy klientów pocztowych. W szczególności, dla Yahoo, boilerplate ustawia margines akapitu na 1em w nagłówku dokumentu.

p {margin: 1em 0;}

Dla Hotmail zastępuje zielony styl nagłówka Hotmail, normalizuje line-height i ustawia domyślną szerokość.

.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
h1, h2, h3, h4, h5, h6 {color: black !important;} /* or whatever color you want it to be */

W przypadku programu Outlook, Boilerplate ustawia „border-collapse: collapse”, aby pozbyć się domyślnego paddingu.

Mobile

Boilerplate pomaga również w tworzeniu wiadomości email dla urządzeń mobilnych. Ułatwia zmianę wielkości czcionki lub ją powstrzymuje. Pomaga zoptymalizować email na telefonie komórkowym poprzez  ustawienie opcji skalowania. Dodaje również media queries dla iPhone 3 i 4, tablety, telefony Android czy Windows Mobile.

Podsumowanie

Boilerplate pokazuje i podkreśla niektóre z pułapek przy tworzeniu wiadomości email. Dostarcza kilka pomocnych rozwiązań i przykładów jak pomogą stworzyć dobry email. Powinien zaoszczędzić odrobinę czasu, który poświęciłbym na googlowanie.