Nagłówki emaili i newsletterów — projektowanie w realiach klientów pocztowych
Email rządzi się innymi prawami niż strona www. Sprawdź, co musisz wiedzieć o projektowaniu nagłówków na pocztę, żeby działały wszędzie.
Projektowanie na maila to powrót do lat 90. — i to nie jest żart. W erze nowoczesnych frameworków CSS i layoutów flexbox, email HTML żyje w świecie tabel i starych standardów renderowania. Każdy klient pocztowy — Gmail, Outlook, Apple Mail, Thunderbird — przetwarza HTML po swojemu. To, co wygląda świetnie w przeglądarce, może być kompletną katastrofą w Outlooku 2019 na Windowsie.
Specyfika nagłówka emaila — czym różni się od nagłówka strony
Nagłówek emaila (header) to pierwsza grafika, którą widzi odbiorca po otwarciu wiadomości. Pełni funkcję analogiczną do sekcji hero na stronie — buduje tożsamość marki, sygnalizuje temat kampanii i ustawia nastrój. Różnica polega na tym, że ma maksymalnie 600 px szerokości, musi działać bez web fontów i być czytelny zarówno w trybie jasnym, jak i ciemnym, których nie kontrolujesz.
Ograniczenia klientów pocztowych — co musisz wiedzieć przed projektem
- Outlook na Windowsie nie obsługuje wielu właściwości CSS — flexbox, grid i position: absolute są niedostępne
- Gmail blokuje zewnętrzne arkusze CSS — wszystkie style muszą być inline, bez wyjątków
- Apple Mail obsługuje media queries, większość innych klientów — słabo lub wcale
- Web fonty działają tylko w Apple Mail i Thunderbird — reszta fallbackuje do systemowych
- Dark mode w Gmailu automatycznie odwraca jasne tła — musisz to uwzględnić w projekcie i testować
- Obrazy są domyślnie blokowane przez wiele klientów — email musi być czytelny bez żadnej grafiki
Wymiary i parametry techniczne nagłówka email
Standardowy nagłówek emaila mieści się w szerokości 600 px. Wartości wyższe będą obcinane lub automatycznie skalowane w zależności od klienta pocztowego. Wysokość nagłówka grafikowego to najczęściej 150–250 px — więcej nie warto, bo treść kampanii powinna być widoczna bez scrollowania. Eksportuję nagłówki w JPEG (80% jakości) lub PNG dla elementów z przezroczystością. Format WebP nadal nie jest powszechnie obsługiwany przez klientów pocztowych.
Co działa w nagłówkach emaili?
- Prosty, czytelny layout: logo plus tagline lub logo plus obraz tematyczny kampanii
- Alt text dla każdego obrazu — email musi być czytelny i sensowny bez żadnej grafiki
- Kontrast tekstu na tle testowany w dark mode (narzędzia: Litmus, Email on Acid)
- Jeden mocny kolor dominujący — header emaila to 'okładka' kampanii, ma przyciągnąć wzrok
- Brak zbyt drobnego tekstu — minimum 14 px dla treści, 20 px lub więcej dla CTA
Dark Mode w emailu — nowa obowiązkowa zmienna projektowa
Dark mode to najczęstszy powód, dla którego nagłówek 'wyglądający świetnie' zamienia się w nieczytelny bałagan u połowy odbiorców. Gmail, Apple Mail i Outlook na iOS automatycznie odwracają kolory jasnych teł na ciemne. Jeśli Twoje logo jest czarne na białym tle, w dark mode zobaczysz białe logo na ciemnym tle — co jest akceptowalne — albo czarne logo na ciemnym tle, co jest kompletnie nieczytelne i wygląda jak błąd techniczny.
Rozwiązanie jest prostsze niż się wydaje: testuj w Litmusie lub Email on Acid przed każdą wysyłką, projektuj logo zawsze w wersji na ciemne tło, unikaj tła o kolorze #ffffff — kolor #fafafa lub grafika obejmująca całą szerokość radzi sobie z dark mode zdecydowanie lepiej. To brzmi jak długa lista zasad, ale po pierwszym wdrożeniu systemu projektowania emailowego staje się szybką rutyną, a nie żmudnym sprawdzaniem.
Kiedy grafika, a kiedy tekst HTML — zasada krytyczności treści
Zasada, której trzymam się w każdym projekcie emailowym: treść krytyczna nigdy nie może być osadzona wyłącznie w grafice. Temat kampanii, promocja, termin, wezwanie do działania — te elementy muszą istnieć jako HTML, nie jako obraz tekstowy. Grafika pełni rolę emocjonalną i brandingową, tekst HTML przenosi informację. Połączenie tych dwóch warstw — z zachowaną hierarchią wizualną i spójnością kolorystyczną — to przepis na email, który działa zarówno z grafikami, jak i całkowicie bez nich.
