Podejście do układu oparte na tabelach

Klienci poczty e-mail — zwłaszcza Outlook w systemie Windows, który korzysta z silnika renderującego Microsoft Word — nie obsługują flexboxa, grida ani nawet niezawodnego układu blokowego. Tabele są jedynym podstawowym mechanizmem układu, który renderuje się spójnie we wszystkich najważniejszych klientach poczty.

Każda responsywna wiadomość e-mail zaczyna się od zewnętrznej tabeli <table> o szerokości 100%, która pełni funkcję treści wiadomości, a następnie zawiera wewnętrzną tabelę o stałej szerokości (zwykle 600px) przechowującą właściwą treść. Ten dwupoziomowy wzorzec jest podstawą niemal każdego produkcyjnego szablonu.

Do każdej tabeli należy zawsze dołączyć cellpadding="0" cellspacing="0" border="0". Bez tych atrybutów Outlook wstawia nieoczekiwane odstępy. Dodanie role="presentation" informuje czytniki ekranu, aby pominęły semantykę tabeli, co jest prawidłowe, ponieważ tabele układu nie służą do prezentowania danych.

Aby utworzyć wiele kolumn, należy zagnieździć tabelę z dwiema komórkami <td> w wierszu zawierającym treść. Każda komórka przechowuje jedną kolumnę. Należy unikać div+float — Outlook ignoruje float i mimo to układa kolumny pionowo, przez co projekt przestaje działać prawidłowo.

Domyślny panel podglądu na komputerach ma około 600px szerokości. Projektowanie z myślą o tej szerokości pozwala wygodnie wyświetlać wiadomość bez poziomego przewijania jednocześnie w Outlooku, Gmailu na komputerze, Apple Mail, Yahoo i Thunderbirdzie.

W przypadku małych ekranów należy za pomocą media query skierować regułę do komórek wewnętrznej tabeli i ustawić szerokość na 100% oraz display na block, co spowoduje ułożenie kolumn jedna pod drugą. iOS Mail i Gmail na Androidzie respektują media queries; Outlook 365 na komputerach je ignoruje, ale zachowuje układ 600px przeznaczony dla komputerów.

Kolory i obrazy tła należy stosować do komórek <td>, a nie do elementów div. Outlook niezawodnie obsługuje atrybut bgcolor elementu td, natomiast CSS background-color zastosowany do elementu div może zostać usunięty lub całkowicie zignorowany, zależnie od klienta.

Outlook potrzebuje Vector Markup Language (VML) do obsługi obrazów tła. Nowoczesny CSS background-image należy opakować w komentarze warunkowe <!--[if mso]>...<![endif]--> z wbudowanym mechanizmem zastępczym v:rect, aby Outlook wyrenderował obraz, podczas gdy wszystkie inne klienty użyją CSS.

Należy pomijać flexbox, grid, właściwości niestandardowe (o ograniczonej obsłudze) i większość pozycjonowania. Warto używać display: block/inline, stałych szerokości określanych za pomocą atrybutów oraz stylów inline. Wynik może wyglądać przestarzale według standardów internetowych, ale renderuje się identycznie w każdej skrzynce odbiorczej.

Należy używać atrybutu cellpadding i pojedynczej komórki <td> z dopełnieniem do tworzenia wewnętrznych odstępów. Marginesy komórek tabel są zawodne w Outlooku; padding elementu td działa wszędzie. Można połączyć bgcolor i padding w tej samej komórce td, aby tworzyć komponenty typu „card” bez elementów div.

Do każdej tabeli układu należy dodać role="presentation", aby czytniki ekranu nie ogłaszały „wiersz, kolumna 1 z 2”. Należy także dodać tekst alternatywny do każdego obrazu, używać rzeczywistego tekstu dla każdej treści (a nie obrazów zawierających tekst) oraz zachować przejrzystą hierarchiczną kolejność nagłówków.

Dlaczego do układania wiadomości e-mail używa się tabel, a nie elementów div z CSS flexbox?

Układ wiadomości e-mail w HTML wykorzystuje zagnieżdżone tabele z cellpadding/cellspacing/border ustawionymi na zero oraz role="presentation". Zewnętrzna tabela o szerokości 100% centruje wewnętrzną tabelę 600px; zagnieżdżone komórki td tworzą kolumny, które media queries mogą ułożyć jedna pod drugą na urządzeniach mobilnych. Należy unikać flexboxa i grida, używać bgcolor w elementach td oraz dodawać mechanizmy zastępcze VML dla teł w Outlooku.