> For the complete documentation index, see [llms.txt](https://newpanel.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://newpanel.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) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://newpanel.docs.emaillabs.io/poradniki/wyglad-i-zawartosc-e-maili/jak-tworzyc-e-maile-w-formacie-html.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.