Jak stworzyć e-mail HTML: 7 zasad, żeby się nie rozsypał

E-mail HTML to e-mail, którego układ, kolory, czcionka, obrazki i przyciski są zapisane w kodzie HTML. Żeby nie rozsypał się w Outlooku ani w Gmailu, trzeba go pisać inaczej niż stronę internetową: układ na tabelach o szerokości około 600 pikseli, style bezpośrednio przy elementach, obrazki z tekstem alt, bezpieczne czcionki, kod do 102 kB, przyciski w kodzie i zawsze e-mail testowy. W Quandzie własny HTML wklejasz przyciskiem Utwórz e-mail za pomocą HTML, a po prawej od razu widzisz podgląd. Kto nie chce pisać kodu, opisze e-mail asystentowi AI połączonemu z Quandą przez Quanda MCP server i po kilku minutach ma gotowy szkic kampanii. Znajdziesz tu 7 zasad, przykład kodu i oba sposoby.

W skrócie

1. Klasyczny Outlook dla Windows renderuje e-maile silnikiem Worda, a Microsoft wspiera go co najmniej do 2029 roku, dlatego w e-mailu nie używa się flexboxa ani grida.
2. Układ buduj na tabelach o szerokości około 600 pikseli, a style zapisuj bezpośrednio przy elementach.
3. Licz się z zablokowanymi obrazkami: tekst alt, wymiary i przyciski w kodzie, nie jako obrazek.
4. Gmail przytnie e-mail z kodem powyżej 102 kB, razem ze stopką i linkiem do wypisania się.
5. E-mail od AI albo z innego narzędzia zawsze przetestuj w kilku skrzynkach.
6. Bez doświadczenia z kodem stworzysz e-mail HTML w ciągu kilku minut z asystentem AI przez Quanda MCP server. Opisujesz treść, dodajesz obrazki, a asystent robi resztę.

Krótko: czym jest e-mail HTML, kiedy się przydaje, na co uważać i jak go przenieść do Quandy

• Co to jest: e-mail, którego treść i wygląd są zapisane w języku HTML.
• Kiedy się przydaje: gdy kod piszesz sam, przenosisz gotowy szablon z innego narzędzia albo pisze go dla Ciebie AI.
• Na co uważać: Outlook, Gmail i inne skrzynki modyfikują kod, dlatego obowiązują zasady starsze niż nowoczesny web.
• Jak go przenieść do Quandy: przy zakładaniu kampanii wybierz Utwórz e-mail za pomocą HTML i wklej kod. Dla części e-maila użyj w edytorze komponentu Treść w HTML.

Czym jest e-mail HTML

E-mail HTML to e-mail, którego treść i wygląd są zapisane w języku HTML, tym samym, w którym pisze się strony internetowe. Dzięki temu może mieć logo, kolory, obrazki, kilka kolumn i przyciski. Przeciwieństwem jest e-mail czysto tekstowy, który zawiera tylko litery bez formatowania.

Większość newsletterów i e-maili marketingowych to HTML. Różnica polega tylko na tym, kto napisze kod. W edytorze e-maili Quandy tworzy go za Ciebie edytor, gdy składasz e-mail z bloków. Jeśli jednak piszesz kod sam albo masz go skądinąd, wklejasz go do Quandy bezpośrednio.

Kiedy przydaje się własny kod HTML

Własny kod HTML przydaje się głównie w trzech przypadkach:

• Potrafisz sam pisać e-maile HTML i chcesz mieć każdy szczegół pod kontrolą.
• Masz gotowy szablon z innego narzędzia, na przykład z Canvy albo z wcześniejszej usługi do e-mailingu, i chcesz go tylko przenieść do Quandy.
• Kod tworzysz za pomocą AI, na przykład w ChatGPT albo Claude. Najwygodniej przez Quanda MCP server, gdy asystent od razu zakłada e-mail w Quandzie.

We wszystkich przypadkach wystarczy wkleić kod i od razu widzisz wynik. Gdy potrzebujesz własnego kodu tylko w części e-maila, na przykład dla tabeli, nie musisz pisać całego e-maila. Edytor e-maili Quandy ma komponent treści Treść w HTML, który wstawisz między pozostałe bloki.

Jak wkleić kod HTML do Quandy

Oprócz klasycznego edytora, w którym e-mail składasz z poszczególnych bloków, możesz go stworzyć także za pomocą kodu HTML:

1. Załóż nową kampanię e-mailową i przejdź do kroku z e-mailem.
2. Na stronie Wybierz szablon, który Ci się podoba wybierz przycisk Utwórz e-mail za pomocą HTML.
3. W lewej części ekranu wklej kod e-maila. Po prawej od razu widzisz podgląd, jak e-mail będzie wyglądał, jeszcze zanim go wyślesz.
4. Nad kodem uzupełnij temat e-maila.
5. Wstaw do stopki link do wypisania się ze znacznikiem {{ unsubscribe_link }}. Bez niego e-mail HTML w Quandzie nie jest kompletny.
6. W kroku Wysyłka wyślij sobie e-mail testowy do kilku skrzynek.

Wysyłkę testu opisuje pomoc Ustawienie wysyłki w prostej kampanii. Do kodu możesz wstawić też znaczniki personalizacji, na przykład zwrot grzecznościowy. Zapisuje się je w podwójnych nawiasach klamrowych ze spacjami w środku, a Quanda przy wysyłce podstawi w ich miejsce dane każdego odbiorcy.

Dlaczego e-mail HTML nie wygląda tak samo jak strona internetowa

Tu trzeba się na chwilę zatrzymać, bo właśnie to jest najczęstsze źródło rozczarowań. Kod, który na stronie lub w przeglądarce wygląda perfekcyjnie, w skrzynce pocztowej często się rozsypuje. Gmail, Outlook, WP, Onet i inne interpretują bowiem kod każdy trochę inaczej, a klasyczny Outlook dla Windows wyświetla e-maile nawet za pomocą technologii, której poza tym używa Word do pisania dokumentów. Dlatego w e-mailach wciąż stosuje się metody, których na zwykłych stronach internetowych już dawno się nie używa.

Źródła: Can I email (obsługa HTML i CSS w programach pocztowych); Microsoft, New Outlook for Windows: A Guide to Product Availability (2024); Litmus, Email Client Market Share: Trends & Statistics 2026 (dane za lipiec 2026); przewodnik Quandy po e-mailach HTML. Stan na październik 2026.

Według swojego ogłoszenia Microsoft wspiera klasycznego Outlooka w Microsoft 365 co najmniej do 2029 roku, a nowy Outlook renderuje już e-maile jak przeglądarka internetowa. Odbiorcy firmowi nadal jednak używają klasycznego Outlooka, więc e-mail musi działać w obu.

7 zasad, jak napisać e-mail HTML

1. Układ buduj na tabelach

Brzmi staromodnie, ale właśnie tabele (kod <table>) to jedyny sposób na układ, który niezawodnie wyświetlą absolutnie wszystkie skrzynki e-mail. Nowocześniejsze metody, powszechnie używane na stronach, w e-mailu często w ogóle sobie nie radzą, zwłaszcza w starszym Outlooku. Szerokość e-maila trzymaj w okolicach 600 pikseli, najwyżej 700 pikseli. To bezpieczny rozmiar, który mieści się w podglądzie we wszystkich skrzynkach.

Tabelom do układu dodaj atrybut role="presentation". Czytniki ekranu pominą wtedy tabelę i nie będą jej odczytywać jako danych.

2. Style zapisuj bezpośrednio przy elementach

Styl, czyli kolory, rozmiar czcionki i odstępy, zapisuj bezpośrednio przy danym tekście lub obrazku. Jeśli styl zapiszesz tylko raz na górze kodu i potem będziesz się do niego odwoływać w tekście, część skrzynek albo całkowicie to zignoruje, albo uwzględni tylko połowicznie. Bezpieczniej jest zapisać styl atrybutem style bezpośrednio tam, gdzie jest używany, przy konkretnym tekście lub przycisku. Nazywa się to stylami inline, czyli inline CSS. Do nagłówka należy tylko to, czego nie da się zapisać inaczej, na przykład reguły dla telefonów (wyświetlanie responsywne) i trybu ciemnego.

3. Licz się z tym, że obrazki mogą się nie wyświetlić

Wiele skrzynek pocztowych domyślnie blokuje obrazki. Do każdego obrazka zawsze dodaj więc opis (tekst alt) i z góry podaj jego wymiary, żeby przy ładowaniu nie rozjechał Ci się wygląd e-maila. Tekst powinien mieć sens, nawet gdyby żaden obrazek się nie wyświetlił. Jak zrobić z tekstu alt wyrazisty nagłówek, opisuje artykuł Brak obrazków w e-mailu? Stylizowany alt text pokaże nagłówek.

Do zdjęć używaj JPG, do logo i ikon PNG, a do prostych animacji GIF. Formatów WebP i SVG klasyczny Outlook nie wyświetli, różnice między formatami wyjaśnia artykuł JPG, PNG czy GIF? Jakiego typu pliku obrazów użyć w e-mailingu.

4. Używaj zwykłych, bezpiecznych czcionek

Ozdobne czcionki pobrane skądinąd w Outlooku i Gmailu w ogóle się nie wyświetlą. W kodzie zawsze podawaj także czcionki zastępcze, na przykład Arial lub Helvetica, żeby e-mail wyświetlił się ładnie, nawet jeśli główna czcionka się nie załaduje. Zapis wygląda wtedy tak: font-family: Arial, Helvetica, sans-serif.

5. Nie rób e-maila niepotrzebnie ciężkim

Jeśli kod e-maila jest zbyt długi (rozmiar powyżej 102 kB), Gmail go przytnie, a odbiorca zobaczy tylko link do wyświetlenia całej wiadomości. Może się więc zdarzyć, że Twojego głównego przekazu lub przycisku w ogóle nie zobaczy. Za przycięciem zostanie też stopka z linkiem do wypisania się. Kod powinien być zatem jak najprostszy i bez niepotrzebnie powtarzanych stylów. Do limitu liczy się tylko kod, obrazki nie, bo ładują się osobno. Google oficjalnie nie publikuje tej granicy, 102 kB podają na podstawie pomiarów narzędzia do testowania e-maili i usługi e-mailingowe. Tego samego limitu pilnuje też SPAM test w Quandzie.

6. Przyciski rób jako tekst z kolorem tła, nie jako obrazek

Przycisk stworzony jako obrazek może się w ogóle nie wyświetlić, kiedy obrazki są zablokowane. Bezpieczniej jest zrobić przycisk jako zwykły link z kolorowym tłem bezpośrednio w kodzie. Na telefonie powinien być wystarczająco duży dla palca, co najmniej 44 × 44 piksele. Taki rozmiar zalecają zasady dostępności WCAG 2.2 (kryterium 2.5.5) oraz przewodnik Quandy po e-mailach HTML.

7. Przed wysyłką zawsze wyślij sobie e-mail na próbę

Podgląd w edytorze to dobry pierwszy krok, ale nie zastąpi wysłania e-maila do samego siebie na Gmaila, Outlooka albo na przykład WP i sprawdzenia, jak wygląda. Zobacz też, jak wygląda na telefonie i w trybie ciemnym. Według Litmusa (Email Client Market Share: Trends & Statistics 2026, ponad 1 miliard otwarć w lipcu 2026) tryb ciemny stosuje ponad jedna czwarta użytkowników.

Wskazówka: E-mail testowy wyślij sobie co najmniej na trzy adresy: do Gmaila, do firmowego Outlooka i do WP. Otwórz go na komputerze i na telefonie, a raz przełącz telefon w tryb ciemny. Wychwycisz tak większość błędów, zanim zobaczą je odbiorcy.

Przykład szkieletu e-maila HTML

Tak wygląda prosty szkielet, który trzyma się powyższych zasad: tabela do układu, szerokość 600 pikseli, style bezpośrednio przy elementach, bezpieczna czcionka, przycisk w kodzie i link do wypisania się.

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3">
  <tr>
    <td align="center" style="padding: 24px 0;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
        <tr>
          <td style="padding: 32px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 26px; color: #333333;">
            <h1 style="margin: 0 0 16px; font-size: 28px; line-height: 34px;">Nowości</h1>
            <p style="margin: 0 0 24px;">Krótki tekst, który powie, dlaczego warto otworzyć e-mail.</p>
            <a href="https://www.example.com" style="display: inline-block; padding: 14px 28px; background-color: #0b5cad; color: #ffffff; text-decoration: none; border-radius: 4px;">Dowiedz się więcej</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 16px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #777777;">
            Nie chcesz otrzymywać kolejnych e-maili? <a href="{{ unsubscribe_link }}" style="color: #777777;">Wypisz się</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Przykład jest uproszczony. Pełnowartościowy e-mail ma dodatkowo nagłówek z kodowaniem i ustawieniami dla Outlooka, reguły dla telefonów i trybu ciemnego oraz przyciski dopasowane tak, żeby w Outlooku zachowały odstępy.

Przenosisz HTML z innych narzędzi lub tworzysz za pomocą AI?

Nawet jeśli e-mail stworzy Ci AI albo przenosisz go z innego narzędzia, na przykład z Canvy, wynik często nie jest od razu stuprocentowy. Nawet przy staraniach o przestrzeganie powyższych zasad zdarza się, że w jakimś kliencie pocztowym coś się rozjedzie, bo upilnowanie wszystkich wyjątków ręcznie jest trudne nawet dla doświadczonych koderów.

Jeśli więc kod HTML tworzysz gdzie indziej, a potem wklejasz go do Quandy, zawsze wyślij testowe e-maile do kilku skrzynek i sprawdź, czy wyświetla się tak, jak powinien.

Gdy kod pisze AI, pomaga konkretne polecenie. Napisz w nim, że chodzi o e-mail HTML, a nie stronę internetową, i wymień zasady: układ na tabelach o szerokości 600 pikseli, style bezpośrednio przy elementach, żadnego flexboxa ani JavaScriptu, bezpieczne czcionki z zamiennikiem, obrazki JPG lub PNG z tekstem alt, przyciski w kodzie i link do wypisania się ze znacznikiem {{ unsubscribe_link }} w stopce.

Wszystkiego tego dopilnuje za Ciebie asystent AI połączony z Quandą, jak pokazuje kolejna część.

Jak stworzyć e-mail HTML z AI przez Quanda MCP server

Quanda MCP server to połączenie, przez które asystent AI, taki jak Claude, ChatGPT czy Copilot, pracuje bezpośrednio z Twoim kontem w Quandzie. W przypadku e-maili HTML oznacza to, że asystent kod nie tylko napisze, ale pisze go według przewodnika Quandy po e-mailach HTML, sam zakłada kampanię i wysyła Ci e-mail testowy. Bezpiecznie i niezawodnie przygotujesz więc własny e-mail HTML w ciągu kilku minut, bez żadnego doświadczenia z kodem.

1. Połącz swojego asystenta AI z Quandą przez Quanda MCP server. Konfiguracja zajmuje około 5 minut i robisz ją tylko raz.
2. W czacie opisz, co ma zawierać kampania: o czym jest e-mail, do kogo jest skierowany, jaki jest główny przekaz i dokąd ma prowadzić przycisk.
3. Dołącz linki do obrazków (na przykład z Twojej strony internetowej) albo dołącz obrazki bezpośrednio do polecenia. Gdy dodasz adres strony, asystent przejmie z niej także kolory i logo.
4. Asystent napisze HTML, założy kampanię jako szkic i wyśle Ci e-mail testowy.
5. Zmiany opisz zwykłym zdaniem, na przykład „skróć wstęp i powiększ przycisk”, a przyjdzie nowy test.
6. Odbiorców wybierasz i kampanię wysyłasz Ty, w Quandzie.

Polecenie może wyglądać na przykład tak: „Przygotuj e-mail dla naszych klientów o wiosennym serwisie rowerów. Rabat 20 % do końca kwietnia, przycisk Zamów serwis poprowadzi na naszą stronę serwisu. Użyj kolorów i logo z naszej strony internetowej i tych dwóch zdjęć.” Więcej nie trzeba.

O obrazki nie musisz się martwić. Quanda hostuje je sama. Obrazki z linków przy zapisie kampanii pobiera ze strony i przechowuje u siebie, obrazki dołączone do polecenia asystent wgrywa do biblioteki obrazków. Jeśli Twój asystent tego nie potrafi, wgrasz je na stronie Obrazy w aplikacji Quanda MCP i wyślesz mu adres.

Niezawodne jest to dlatego, że asystent trzyma się tych samych zasad co w tym artykule: tabele, przyciski działające także w Outlooku, wyświetlanie na telefonie, tryb ciemny, obrazki z tekstem alt, znaczniki personalizacji i obowiązkowy link do wypisania się. Bezpieczne dlatego, że kampania powstaje tylko jako szkic, wysyłka pozostaje w Twoich rękach, a dostęp asystentowi możesz w każdej chwili odebrać.

Tworzenie pięknego i działającego e-maila HTML z AI to przyjemność i naprawdę poradzi sobie z tym każdy. Zamiast o kodzie myślisz tylko o tym, co chcesz powiedzieć klientom.

Wskazówka: Jak połączyć asystenta, których asystentów AI obsługuje Quanda MCP server i co jeszcze potrafi, na przykład analizy kampanii i raporty, znajdziesz na stronie Quanda MCP server.

Edytor e-maili, własny kod HTML czy asystent AI

Edytor e-maili i asystent przez Quanda MCP server kierują się zasadami Quandy, więc gotowy e-mail działa niezawodnie w Gmailu, Outlooku, WP i innych klientach. Przy kodzie z ogólnego czatu AI lub innego narzędzia polegasz natomiast na tym, że akurat trafi we wszystkie szczegóły. Pracę w edytorze opisuje pomoc Edytor e-maili w prostej kampanii e-mailowej.

Lista kontrolna przed wysyłką e-maila HTML

Zanim wyślesz kampanię z własnym kodem HTML, przejdź przez tę listę:

• Układ stoi na tabelach z atrybutem role="presentation", a nie na flexboxie czy gridzie.
• E-mail ma szerokość około 600 pikseli, najwyżej 700 pikseli.
• Style są zapisane bezpośrednio przy elementach.
• Każdy obrazek ma tekst alt i wymiary oraz jest w formacie JPG, PNG lub GIF.
• Czcionka ma zamiennik, na przykład Arial, Helvetica, sans-serif.
• Kod ma mniej niż 102 kB.
• Przyciski są w kodzie, a nie jako obrazek.
• Stopka zawiera link do wypisania się ze znacznikiem {{ unsubscribe_link }}, bez niego e-mail nie jest kompletny.
• E-mail testowy został sprawdzony w Gmailu, Outlooku i WP, na telefonie i w trybie ciemnym.

Podsumowanie

Własny kod HTML daje Ci swobodę, ale też odpowiedzialność za to, jak e-mail zobaczą odbiorcy w dziesiątkach różnych programów. Trzymaj się siedmiu zasad, utrzymuj kod w prostocie i testuj każdy e-mail. Kto nie chce pisać kodu, w kilka minut przygotuje e-mail HTML z asystentem AI przez Quanda MCP server. A kto chce sam złożyć każdy blok, sięgnie po edytor e-maili Quandy i własny kod wstawi tylko tam, gdzie jest naprawdę potrzebny.

Jeśli chcesz zgłębić design e-maili, przejdź bezpłatny kurs online Copywriting i design e-maili. A jeśli nie masz pewności, czy Twój e-mail HTML sprawdzi się we wszystkich skrzynkach, odezwij się do nas. Przejrzymy go razem z Tobą i powiemy, co poprawić.