Dlaczego szablon e-maila z ChatGPT psuje się w skrzynce

Twój szablon e-maila z ChatGPT wygląda świetnie w oknie czatu: równe kolumny, duży przycisk, kolory Twojej marki. Potem wysyłasz test, a Outlook rozciąga e-mail na cały ekran, Gmail gubi style, a w miejscu logo zostaje puste pole. Brzmi znajomo? To nie jest wina samego ChatGPT. Claude, Gemini, Copilot i inne narzędzia AI popełniają te same błędy, bo ich przyczyna jest wspólna.

W tym artykule sprawdzamy, dlaczego e-mail HTML wygenerowany przez AI często źle wyświetla się w klientach poczty, omawiamy typowe błędy na przykładach kodu i pokazujemy, jak zamienić taki HTML w e-mail, który dotrze do subskrybentów dokładnie taki, jak go zaprojektowano.

Skąd to się bierze: AI uczyła się kodować na stronach internetowych

Model AI pisze HTML tak, jak widział go najczęściej. A większość HTML w internecie to strony internetowe: miliony stron zbudowanych według reguł nowoczesnego webu, z blokami <div>, elastycznymi siatkami, stylami w osobnym pliku i obrazami SVG. Dla przeglądarki to poprawny kod. AI wiernie odtwarza go także w Twoim e-mailu.

Ale klient poczty to nie przeglądarka. E-mail żyje według własnych reguł, a te o lata odstają od webu. Klasyczny Outlook dla Windows wciąż wyświetla e-maile silnikiem Microsoft Word, a nie silnikiem przeglądarki, i Microsoft obiecał wspierać go co najmniej do 2029 roku. Gmail wycina część stylów. GMX i WEB.DE w Niemczech oraz La Poste i SFR we Francji ignorują style zapisane w osobnym bloku. W efekcie HTML5 i CSS3, na których opiera się nowoczesna strona, w kampaniach e-mailowych nie działają.

Jeden ważny szczegół: kampania trafia do wszystkich subskrybentów naraz. Nie wybierasz, kto otworzy ją w Gmailu, a kto w Outlooku. Dlatego jeśli jakaś technika psuje się choćby w jednym dużym kliencie poczty, w e-mailu się nie sprawdza. Właśnie tą miarą oceniamy błędy opisane niżej.

Błąd 1. Divy i flexbox, jak na stronie internetowej

Tak zwykle wygląda e-mail wygenerowany przez AI: dwie karty produktów obok siebie w bloku o szerokości 600 pikseli, wyśrodkowanym na stronie.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

Na stronie internetowej wszystko to jest w porządku. W e-mailu prawie każda linijka to problem. Klasyczny Outlook dla Windows nie rozumie display: flex, więc karty układają się jedna pod drugą zamiast w rzędzie. max-width respektuje tylko w tabelach, a wyśrodkowania przez margin: auto w ogóle nie obsługuje, więc e-mail rozciąga się na całą szerokość okna. Outlook nie zna też znaczników <main> i <section>, a Gmail podmienia część z nich na własne.

Zgodnie z projektem

Blocks Store

Tak dotarł do Outlooka dla Windows

Blocks Store

Co to oznacza dla Ciebie: w e-mailu układ buduje się z tabel, a nie z bloków. Wygląda to staroświecko, ale tabele każdy klient poczty rozumie tak samo, także Outlook ze swoim silnikiem Worda. Oto te same dwie karty w znacznikach e-mailowych:

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

AI potrafi napisać taki kod, jeśli o to poprosisz. Domyślnie wybiera jednak znaczniki stron internetowych, bo widziała je częściej. Jeśli ciekawi Cię, jak ręcznie koduje się e-maile w tabelach i jak pomagają w tym frameworki, zajrzyj do naszego porównania frameworków e-mailowych.

Błąd 2. Style w osobnym bloku, a nie w znacznikach

Strona internetowa trzyma wygląd oddzielnie od treści: style opisuje się raz w bloku <style> albo w osobnym pliku, a elementy odwołują się do nich przez klasy. AI robi tak samo:

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Wiele klientów poczty po prostu wyrzuca ten blok. Mobilna wersja Gmaila w przeglądarce, GMX, WEB.DE, La Poste i SFR w ogóle nie czytają <style>. Aplikacja Gmail ignoruje go, gdy skrzynka nie jest kontem Google, na przykład adresem służbowym. Gmail w przeglądarce przyjmuje style tylko w nagłówku e-maila, czyli w <head>, i tylko do 16 KB. Wystarczy, że blok trochę urośnie, a cały wygląd znika naraz. Gmail i Outlook.com w ogóle nie obsługują dołączania zewnętrznego arkusza stylów przez <link>.

Zgodnie z projektem

Blocks Store

Jesienna wyprzedaż

Rabaty do 50% na całą kolekcję do niedzieli.

Sprawdź wyprzedaż

Tak dotarł bez bloku stylów

Blocks Store

Jesienna wyprzedaż

Rabaty do 50% na całą kolekcję do niedzieli.

Sprawdź wyprzedaż

Co to oznacza dla Ciebie: w e-mailu każdą regułę wyglądu zapisuje się bezpośrednio w znaczniku, w atrybucie style. Nazywa się to stylami inline. Kodu jest więcej, ale style nie gubią się po drodze:

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

Ale nie ciesz się jeszcze tym przyciskiem: w Outlooku dla Windows i tak się zepsuje. Dlaczego, wyjaśniamy przy czwartym błędzie.

Błąd 3. Obrazy SVG i base64

AI nie może dołączyć pliku z obrazem do swojej odpowiedzi, więc szuka obejścia. Rysuje logo i ikony bezpośrednio w kodzie jako SVG. A jeśli przekażesz jej obrazek, osadza go w HTML jako base64, czyli długi ciąg znaków zamiast linku do pliku:

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

Jedno i drugie działa w przeglądarce. Ani jedno, ani drugie nie działa w e-mailu. Gmail, Outlook i Yahoo nie pokazują SVG narysowanego w kodzie. Plik SVG podlinkowany jak zwykły obraz Gmail zamienia na PNG, więc traci on ostrość i animację. Gmail i nowy Outlook dla Windows nie pokazują obrazów base64: w ich miejscu zostaje puste pole.

Zgodnie z projektem

Blocks Store

Jesienna wyprzedaż

Tak dotarł do Gmaila

Base64 ma jeszcze jedną wadę: rozdyma e-mail. Obraz zapisany znakami zajmuje w kodzie mniej więcej o jedną trzecią więcej miejsca niż sam plik. Parę banerów i e-mail robi się tak ciężki, że Gmail go przycina. Więcej o tym przy piątym błędzie.

Co to oznacza dla Ciebie: obrazy w e-mailu powinny leżeć na serwerze jako pliki PNG, JPG lub GIF, a w kodzie powinien być tylko link do nich z wymiarami:

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Błąd 4. Outlook dla Windows widzi Twój e-mail przez Worda

Klasyczny Outlook dla Windows zasługuje na osobną rozmowę. Wyświetla e-mail nie przeglądarką, tylko silnikiem edytora tekstu Word. Dlatego nie rozumie wielu rzeczy, które każda AI uważa za podstawy. Oto typowy pierwszy ekran e-maila zrobiony przez AI, z obrazem w tle, nagłówkiem na nim i przyciskiem:

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

W Outlooku psuje się to wszystko naraz:

• Nie pokazuje obrazu tła ustawionego przez background-image. Biały nagłówek trafia na białe tło i znika.
• Outlook dla Windows, Outlook dla Mac i Outlook.com nie obsługują w e-mailach znacznika <button>.
• Outlook respektuje padding tylko w komórkach tabeli. Przycisk zrobiony z linku z paddingiem kurczy się do rozmiaru tekstu.
• Nie rysuje border-radius, więc rogi wychodzą kwadratowe.

Zgodnie z projektem

Jesienna wyprzedaż

Rabaty do 50% do niedzieli

Kup teraz

Tak dotarł do Outlooka dla Windows

Jesienna wyprzedaż

Rabaty do 50% do niedzieli

Kup teraz

Co to oznacza dla Ciebie: pod Outlooka e-maile koduje się specjalnymi technikami. Przycisk buduje się z komórki tabeli z kolorem tła — taki przycisk przetrwa wszędzie:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

Obraz tła wymaga osobnego kodu w VML, przestarzałym języku znaczników, który rozumie tylko Outlook. Narzędzia AI prawie nigdy o nim nie pamiętają. A marketer nie ma żadnego powodu, żeby się go uczyć.

Błąd 5. Ciężki e-mail, który Gmail przycina

Gmail pokazuje e-mail w całości tylko wtedy, gdy jego kod waży mniej niż około 102 KB. Wszystko, co się nie zmieści, chowa się za linijką „[Wiadomość skrócona] Wyświetl całą wiadomość”. Liczy się kod: tekst, style, adresy linków i obrazów. Obrazy ładowane z linku nie wliczają się do tego rozmiaru, ale obrazy base64 już tak.

Narzędzia AI są gadatliwe. Powtarzają te same style przy każdym elemencie, dodają zbędne opakowania i komentarze, osadzają obrazy w kodzie. Przycięcie trafia w najważniejsze miejsce: na końcu e-maila zwykle jest link do wypisania się i niewidoczny piksel, którym Twoja platforma mailingowa liczy otwarcia. Subskrybent, który chce się wypisać, nie znajdzie linku i może zamiast tego kliknąć „Spam”. A otwarcia tego e-maila nie trafią do Twoich statystyk.

Co to oznacza dla Ciebie: pilnuj wagi kodu. Jeśli e-mail waży więcej niż 100 KB, trzeba go odchudzić: usunąć powtórzenia, przenieść obrazy na serwer, wyciąć to, co zbędne.

Błąd 6. Brak preheadera

Preheader to krótki tekst, który skrzynka odbiorcza pokazuje obok tematu. Jeśli go nie ma, skrzynka bierze pierwszy tekst, jaki znajdzie na górze e-maila. Zwykle jest to „Wyświetl w przeglądarce”, pozycje menu albo podpis pod logo. Narzędzia AI prawie nigdy nie dodają preheadera, bo strony internetowe nie mają takiego elementu.

Co to oznacza dla Ciebie: preheader to drugi temat i od niego zależy, czy e-mail zostanie otwarty. Dodaje się go jako ukryty blok na samym początku kodu:

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

Więcej o tym, co składa się na dobry e-mail, przeczytasz w naszym poradniku projektowania e-maili.

Błąd 7. Skrypty, formularze i wideo

Na stronie internetowej interaktywne elementy to norma: slider w JavaScript, formularz zapisu, wideo. Z przyzwyczajenia AI dodaje je też do e-maili. W e-mailu nic z tego nie działa:

• Żaden klient poczty nie uruchamia skryptów: wycina je, żeby chronić przed złośliwym kodem. Niektóre platformy mailingowe nie pozwolą nawet zapisać e-maila, w którym jest skrypt.
• Gmail zamienia znacznik <video> na pusty zastępnik, a Outlook dla Windows i Yahoo w ogóle go nie pokazują. Odtwarza się głównie w Apple Mail.
• Formularze nie działają w Outlooku dla Windows, Yahoo na iPhonie, Proton Mail i GMX, a w Outlook.com i Outlooku dla Mac dane nie zostają wysłane.

Co to oznacza dla Ciebie: zamiast wideo e-mail zawiera okładkę z linkiem do filmu, a zamiast formularza — przycisk prowadzący na stronę z formularzem. Jeśli naprawdę potrzebujesz interaktywności, wymaga to specjalnych technik, o których pisaliśmy w artykule o animowanych e-mailach.

Jak poprosić AI, żeby poprawnie zakodowała e-mail

Wielu z tych błędów unikniesz, jeśli od razu wyjaśnisz AI zasady znaczników e-mailowych. Oto prompt, który możesz dodać do swojej prośby:

Zakoduj e-mail HTML do kampanii e-mailowej, a nie stronę internetową. Do układu używaj wyłącznie tabel z role=“presentation”, bez siatek z div, flex ani grid. E-mail ma 600 pikseli szerokości. Wszystkie style zapisz inline w atrybucie style, bez bloku style i bez klas. Nie używaj znaczników header, main, section, footer ani button. Obrazy tylko w PNG lub JPG z pełnym adresem URL, szerokością, wysokością i alt, bez SVG i bez base64. Przyciski rób z komórki tabeli z kolorem tła. Bez JavaScript, formularzy i wideo. Dodaj ukryty preheader na początku e-maila. Kod ma ważyć mniej niż 100 KB.

Z takim promptem wynik jest wyraźnie lepszy. Ale powiedzmy uczciwie, czego on nie rozwiązuje.

Po pierwsze, w długim e-mailu AI w połowie zaczyna zapominać o zasadach. Pierwsze bloki są zakodowane tabelami, a w stopce znowu pojawiają się <div> i flexbox. Po drugie, AI nie widzi, jak e-mail wygląda w skrzynce. Pewnym tonem napisze „ten kod jest zgodny ze wszystkimi klientami poczty”, ale nie ma jak tego sprawdzić: nigdy nie otworzyła tego e-maila w Outlooku. I po trzecie, Ty też nie sprawdzisz kodu, chyba że kodujesz e-maile zawodowo. Do tego potrzebny jest zestaw testowych skrzynek w różnych klientach poczty albo płatny serwis do testów.

AI świetnie sprawdza się przy planowaniu struktury e-maila i pisaniu treści, o czym piszemy w artykule o AI w e-mail marketingu. Ale ostateczny kod bezpieczniej oddać narzędziu, które zna zasady e-maila.

Jak zamienić kod od AI w działający e-mail

Do tego służy konwerter e-maili HTML w Blocks. Bierze kod napisany przez AI i przebudowuje go według zasad znaczników e-mailowych. Sam naprawia wszystko, o czym pisaliśmy wyżej: zamienia bloki i flexbox na tabele, przenosi style do znaczników, porządkuje obrazy, przyciski i Outlooka.

Oto jak to przebiega:

1. Wklej kod e-maila do Blocks albo zaimportuj plik.
2. Blocks widzi, że e-mail powstał gdzie indziej, i proponuje konwersję.
3. Konwersja zwykle trwa mniej niż minutę.
4. E-mail otwiera się w edytorze, gotowy do eksportu do Twojej platformy mailingowej.

Jest też druga korzyść, którą łatwo przeoczyć. Po konwersji e-mail nie jest już ścianą kodu, której boisz się dotknąć. Otwiera się w edytorze jako bloki: nagłówek, obraz, tekst, przycisk. Każde miejsce poprawisz ręcznie, szczegół po szczególe: podmienisz słowo, wymienisz obraz, zmienisz kolor przycisku — wszystko bez kodu i bez kolejnej prośby do AI. A przy eksporcie Blocks znowu tworzy kod zrozumiały dla klientów poczty.

Jeśli nie masz pewności, czy e-mail HTML w ogóle jest wart zachodu, porównaj go z tekstowym w naszym artykule „E-mail HTML czy zwykły tekst”.

W skrócie

• Modele AI uczyły się kodować na stronach internetowych, więc szablon e-maila z ChatGPT, Claude czy Gemini jest zbudowany jak strona internetowa.
• Kampania trafia do wszystkich naraz. Jeśli technika nie działa choćby w jednym dużym kliencie poczty, w e-mailu się nie sprawdza.
• Główne błędy: divy i flexbox zamiast tabel, osobny blok stylów zamiast stylów inline, obrazy SVG i base64, techniki, których nie rozumie Outlook dla Windows, zbyt ciężki kod, brak preheadera oraz skrypty, formularze i wideo.
• Szczegółowy prompt pomaga, ale nie gwarantuje wyniku, a bez testów kodu nie sprawdzisz.
• Pewny sposób to przepuścić kod od AI przez konwerter i dopracować szczegóły ręcznie w edytorze.