Jak Tworzyć E-maile w Formacie HTML
Kodowanie e-maili HTML znacząco różni się od tworzenia stron internetowych ze względu na ograniczenia i specyficzną interpretację kodu przez klientów pocztowych (jak Gmail, Outlook, WP). Aby zapewnić spójny wygląd wiadomości, należy trzymać się poniższych zasad.
Używaj Tabel do Układu (Layout)
Choć na stronach WWW standardem są div i CSS Grid/Flexbox, w e-mailach najbezpieczniejszym sposobem na stworzenie przewidywalnego układu (zwłaszcza wielokolumnowego) jest nadal użycie zagnieżdżonych tabel (<table>, <tr>, <td>). Zapewniają one największą kompatybilność, szczególnie w programie Outlook.
Stosuj Style Inline
Wielu klientów pocztowych ignoruje lub usuwa style z sekcji <head>. Najpewniejszą metodą jest dodawanie stylów CSS bezpośrednio do tagów HTML za pomocą atrybutu style="...". Proces ten można zautomatyzować, używając narzędzi do "inliningu" CSS przed wysyłką.
Zadbaj o Poprawny Nagłówek HTML
Na początku dokumentu HTML umieść odpowiednie deklaracje, aby zapewnić spójne renderowanie:
DOCTYPE: Użyj deklaracji, która dobrze współpracuje z klientami poczty, np.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.Kodowanie Znaków: Aby poprawnie wyświetlać znaki specjalne (w tym polskie), zawsze dodawaj w sekcji
<head>metatag:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />.
Utrzymuj Prostą Strukturę Kodu
Trzymaj się podstawowych tagów HTML. Unikaj skomplikowanych elementów, JavaScriptu, osadzonych filmów czy formularzy – zazwyczaj nie będą działać lub zostaną zablokowane przez filtry bezpieczeństwa.
Projektuj Responsywnie (Mobile-First)
Większość e-maili jest otwierana na smartfonach. Projektuj z myślą o małych ekranach:
Zacznij od czytelnego, jednokolumnowego układu.
Używaj media queries (
@media) w sekcji<head>, aby dostosować wygląd dla większych ekranów, pamiętając, że nie wszyscy klienci poczty je wspierają.Stosuj czytelne rozmiary czcionek (min. 14-16px dla tekstu) i wystarczająco duże przyciski, łatwe do kliknięcia palcem.
Stosuj Komentarze Warunkowe dla Outlooka
Outlook jest najbardziej problematycznym klientem poczty. Aby rozwiązać specyficzne dla niego problemy z renderowaniem, używaj komentarzy warunkowych: ``. Pozwala to na dodanie kodu HTML lub stylów, które zostaną odczytane wyłącznie przez silnik Microsoft Office (MSO).
Optymalizuj Grafiki i Używaj Atrybutu alt
alt Zawsze dodawaj opisowy atrybut alt do tagów <img>. Jest on kluczowy, gdy grafiki są zablokowane lub dla użytkowników korzystających z czytników ekranu. Podawaj też wymiary (width, height) i styl display: block;, aby uniknąć problemów z renderowaniem. Pamiętaj też o optymalizacji wagi obrazów.
Zobacz przewodnik: Optymalizacja Obrazów w E-mailach
Zachowaj Standardową Szerokość E-maila
Projektuj e-maile o maksymalnej szerokości 600-640px. Zapewnia to dobrą czytelność i kompatybilność z większością klientów pocztowych, zapobiegając konieczności poziomego przewijania.
Zapewnij Wersję Tekstową (Plain Text)
Zawsze dołączaj dobrze sformatowaną wersję czysto tekstową wiadomości. Jest ona kluczowa dla dostarczalności (ocena przez filtry antyspamowe) i dostępności (czytniki ekranu, proste klienty poczty). Upewnij się, że zawiera ona wszystkie kluczowe informacje i linki (w tym link rezygnacji).
Testuj na Różnych Klientach Poczty
Przed wysłaniem kampanii przetestuj wygląd e-maila na najpopularniejszych klientach pocztowych (Gmail, Outlook, Apple Mail, WP, Onet) i urządzeniach. Narzędzia takie jak Litmus czy Email on Acid mogą w tym pomóc.
Zobacz przewodnik: Projektowanie dla Trybu Ciemnego (Dark Mode)
Last updated