Jak stworzyć responsywny email HTML — krok po kroku
Przewodnik po kodowaniu responsywnych emaili HTML — tabele, media queries i typowe pułapki Outlooka.
HTML email to wciąż osobna dyscyplina od webowego HTML. Klienty pocztowe — szczególnie Outlook — renderują CSS inaczej niż przeglądarki. Ten przewodnik przeprowadza Cię przez podstawy i najważniejsze pułapki.
1. Zapomnij o CSS grid i flexbox
Outlook (2016–2021 i Outlook.com) nie obsługuje CSS grid ani flexbox. Jedynym niezawodnym sposobem budowania wielokolumnowych układów emaili jest stara, dobra tabela HTML (<table>). To nie błąd — to standard.
2. Inline CSS zamiast arkuszy stylów
Większość klientów poczty usuwa tagi <style> z head lub ignoruje klasy CSS. Bezpieczny email to taki, w którym style są inline.
Wyjątek: media queries do responsywności — te muszą być w bloku <style>. Gmail (na Androidzie) ignoruje media queries, więc projektuj mobile-first: jedna kolumna domyślnie, dwie kolumny przy szerszym ekranie.
3. Szerokość kontenera: 600px
Standard dla emaili desktopowych to 600px. Na mobile używaj width="100%" z max-width: 600px w CSS. Tabela zewnętrzna powinna mieć width="100%", a tabela wewnętrzna (content) width="600".
4. Obrazki: zawsze alt text i wymiary
Wiele klientów poczty domyślnie blokuje obrazki. Tekst alternatywny (alt) jest wyświetlany zamiast obrazka — powinien być sensowny, nie tylko "banner". Zawsze deklaruj width i height na tagu img, żeby layout nie skakał przy ładowaniu.
- Używaj formatów JPG i PNG — GIF działa wszędzie, WebP nie
- Optymalizuj rozmiar pliku: max 200KB na obrazek
- Nie buduj emaila z samych obrazków — te mogą być zablokowane
5. Typowe pułapki Outlooka
Outlook używa silnika renderującego Word (MSHTML), a nie WebKit czy Gecko. Skutki: zaokrąglone rogi (border-radius) nie działają, marginesy pionowe na elementach <p> są ignorowane, background-image w CSS jest ignorowany.
Obejście dla zaokrąglonych rogów: VML (Vector Markup Language) — specjalny HTML obsługiwany przez Outlooka. Biblioteki jak MJML lub narzędzia Maesto generują ten kod automatycznie.
6. Testowanie przed wysyłką
Przed każdą wysyłką testuj na przynajmniej: Gmail (web), Outlook 2019, Apple Mail, Samsung Mail (mobile), Gmail Android. Usługi jak Litmus lub Email on Acid pozwalają testować na 100+ klientach jednocześnie.
