> For the complete documentation index, see [llms.txt](https://docs.emaillabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/jak-tworzyc-e-maile-w-formacie-html.md). # 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 (``, ``, `
`). Zapewniają one największą kompatybilność, szczególnie w programie Outlook. ### Stosuj Style Inline Wielu klientów pocztowych ignoruje lub usuwa style z sekcji ``. 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. ``. * **Kodowanie Znaków:** Aby poprawnie wyświetlać znaki specjalne (w tym polskie), zawsze dodawaj w sekcji `` metatag: ``. ### 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 ``, 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` Zawsze dodawaj opisowy atrybut `alt` do tagów ``. 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](/poradniki/wyglad-i-zawartosc-e-maili/optymalizacja-obrazow-w-e-mailach.md) ### 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)](/poradniki/wyglad-i-zawartosc-e-maili/projektowanie-dla-trybu-ciemnego-dark-mode.md)