Warum Ihre ChatGPT-E-Mail-Vorlage im Posteingang zerfällt

Ihre ChatGPT-E-Mail-Vorlage sieht im Chatfenster großartig aus: saubere Spalten, ein großer Button, Ihre Markenfarben. Dann schicken Sie eine Test-E-Mail, und Outlook zieht die E-Mail über den ganzen Bildschirm, Gmail wirft die Styles weg, und statt des Logos klafft eine Lücke. Kommt Ihnen das bekannt vor? Das liegt nicht speziell an ChatGPT. Claude, Gemini, Copilot und andere KI-Tools machen dieselben Fehler, weil die Ursache dieselbe ist.

In diesem Artikel sehen wir uns an, warum eine von KI erstellte HTML-E-Mail in E-Mail-Clients oft schlecht aussieht, gehen die typischen Fehler mit Codebeispielen durch und zeigen, wie aus diesem HTML eine E-Mail wird, die bei Ihren Abonnenten genau so ankommt, wie Sie sie gestaltet haben.

Warum das passiert: KI hat das Coden an Websites gelernt

Ein KI-Modell schreibt HTML so, wie es HTML am häufigsten gesehen hat. Und das meiste HTML im Internet sind Websites: Millionen Seiten nach den Regeln des modernen Webs, mit <div>-Blöcken, flexiblen Rastern, Styles in einer eigenen Datei und SVG-Grafiken. Für einen Browser ist das korrekter Code. Die KI überträgt ihn getreu auch in Ihre E-Mail.

Aber ein E-Mail-Client ist kein Browser. E-Mails folgen eigenen Regeln, und die hinken dem Web um Jahre hinterher. Das klassische Outlook für Windows stellt E-Mails bis heute mit der Engine von Microsoft Word dar, nicht mit einer Browser-Engine, und Microsoft hat versprochen, es mindestens bis 2029 zu unterstützen. Gmail entfernt einen Teil Ihrer Styles. GMX und WEB.DE in Deutschland sowie La Poste und SFR in Frankreich ignorieren Styles, die in einem eigenen Block stehen. Deshalb funktionieren HTML5 und CSS3, auf die sich eine moderne Website verlässt, in E-Mail-Kampagnen nicht.

Ein wichtiges Detail: Eine Kampagne geht an alle Ihre Abonnenten gleichzeitig. Sie können nicht auswählen, wer sie in Gmail und wer in Outlook öffnet. Wenn also eine Technik auch nur in einem großen E-Mail-Client versagt, taugt sie nicht für E-Mails. An diesem Maßstab messen wir die folgenden Fehler.

Fehler 1. Divs und Flexbox wie auf einer Website

So sieht eine von KI erstellte E-Mail typischerweise aus: zwei Produktkarten nebeneinander in einem 600 Pixel breiten Block, der auf der Seite zentriert ist.

<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>

Für eine Website ist das alles richtig. Für eine E-Mail ist fast jede Zeile ein Problem. Das klassische Outlook für Windows versteht display: flex nicht, also rutschen die Karten untereinander, statt nebeneinanderzustehen. max-width beachtet es nur bei Tabellen, und Zentrieren mit margin: auto unterstützt es überhaupt nicht, also zieht sich die E-Mail über die volle Fensterbreite. Auch die Tags <main> und <section> kennt Outlook nicht, und Gmail ersetzt einige dieser Tags durch eigene.

So gestaltet

Blocks Store

So kam sie in Outlook für Windows an

Blocks Store

Was das für Sie bedeutet: In E-Mails wird das Layout mit Tabellen gebaut, nicht mit Blöcken. Das wirkt altmodisch, aber Tabellen versteht jeder Client gleich, auch Outlook mit seiner Word-Engine. Hier dieselben zwei Karten als E-Mail-Markup:

<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>

Eine KI kann solchen Code schreiben, wenn Sie darum bitten. Von sich aus wählt sie aber Website-Markup, weil sie das öfter gesehen hat. Wenn Sie wissen möchten, wie E-Mails von Hand mit Tabellen gecodet werden und wie Frameworks dabei helfen, lesen Sie unseren Vergleich von E-Mail-Frameworks.

Fehler 2. Styles in einem eigenen Block statt in den Tags

Eine Website trennt Gestaltung und Inhalt: Die Styles werden einmal in einem <style>-Block oder in einer eigenen Datei beschrieben, und die Elemente verweisen über Klassen darauf. Die KI macht es genauso:

<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>

Viele E-Mail-Clients werfen diesen Block einfach weg. Die mobile Webversion von Gmail, GMX, WEB.DE, La Poste und SFR lesen <style> überhaupt nicht. Die Gmail-App ignoriert ihn, wenn das Postfach kein Google-Konto ist, zum Beispiel eine geschäftliche Adresse. Gmail im Browser akzeptiert Styles nur im Kopf der E-Mail, dem <head>, und nur bis 16 KB. Wird der Block ein wenig größer, verschwindet die gesamte Gestaltung auf einmal. Das Einbinden eines externen Stylesheets mit <link> unterstützen Gmail und Outlook.com überhaupt nicht.

So gestaltet

Blocks Store

Herbst-Sale

Bis zu 50 % Rabatt auf die gesamte Kollektion bis Sonntag.

Zum Sale

So kam sie ohne Style-Block an

Blocks Store

Herbst-Sale

Bis zu 50 % Rabatt auf die gesamte Kollektion bis Sonntag.

Zum Sale

Was das für Sie bedeutet: In einer E-Mail steht jede Gestaltungsregel direkt im Tag, im Attribut style. Das nennt man Inline-Styles. Der Code wird länger, aber die Styles gehen unterwegs nicht verloren:

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

Freuen Sie sich über diesen Button aber nicht zu früh: In Outlook für Windows geht er trotzdem kaputt. Warum, erklären wir beim vierten Fehler.

Fehler 3. Bilder als SVG und base64

Eine KI kann ihrer Antwort keine Bilddatei anhängen, also behilft sie sich anders. Logo und Icons zeichnet sie direkt im Code als SVG. Und wenn Sie ihr ein Bild gegeben haben, bettet sie es als base64 ins HTML ein, als lange Zeichenkette statt eines Links auf eine Datei:

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

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

Im Browser funktioniert beides. In E-Mails funktioniert keins von beiden. Gmail, Outlook und Yahoo zeigen kein SVG an, das im Code gezeichnet ist. Eine SVG-Datei, die wie ein normales Bild verlinkt ist, wandelt Gmail in ein PNG um, sodass sie ihre Schärfe und Animation verliert. Gmail und das neue Outlook für Windows zeigen keine base64-Bilder an: Wo sie stehen sollten, bleibt eine leere Fläche.

So gestaltet

Blocks Store

Herbst-Sale

So kam sie in Gmail an

Base64 hat noch einen zweiten Nachteil: Es bläht die E-Mail auf. Ein Bild, das als Zeichen ausgeschrieben ist, braucht im Code etwa ein Drittel mehr Platz als die Datei selbst. Ein paar Banner, und die E-Mail wird so schwer, dass Gmail sie abschneidet. Mehr dazu beim fünften Fehler.

Was das für Sie bedeutet: Bilder für eine E-Mail liegen als PNG-, JPG- oder GIF-Dateien auf einem Server, und im Code steht nur ein Link darauf mit ihren Abmessungen:

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

Fehler 4. Outlook für Windows sieht Ihre E-Mail durch Word

Das klassische Outlook für Windows verdient ein eigenes Kapitel. Es stellt die E-Mail nicht mit einem Browser dar, sondern mit der Engine des Textprogramms Word. Deshalb versteht es vieles nicht, was jede KI für selbstverständlich hält. Hier ein typischer oberer Bereich einer E-Mail, wie ihn eine KI baut, mit Hintergrundbild, einer Überschrift darauf und einem Button:

<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>

In Outlook geht das alles auf einmal kaputt:

• Ein Hintergrundbild, das mit background-image gesetzt ist, zeigt es nicht an. Die weiße Überschrift landet auf weißem Hintergrund und verschwindet.
• Outlook für Windows, Outlook für Mac und Outlook.com unterstützen den Tag <button> in E-Mails nicht.
• padding beachtet Outlook nur in Tabellenzellen. Ein Button aus einem Link mit Innenabstand schrumpft auf die Größe seines Textes.
• border-radius stellt es nicht dar, die Ecken bleiben also eckig.

So gestaltet

Herbst-Sale

Bis zu 50 % Rabatt bis Sonntag

Jetzt shoppen

So kam sie in Outlook für Windows an

Herbst-Sale

Bis zu 50 % Rabatt bis Sonntag

Jetzt shoppen

Was das für Sie bedeutet: Für Outlook werden E-Mails mit besonderen Techniken gecodet. Ein Button entsteht aus einer Tabellenzelle mit Hintergrundfarbe, und so ein Button übersteht jeden Client:

<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>

Ein Hintergrundbild braucht eigenen Code in VML, einer veralteten Auszeichnungssprache, die nur Outlook versteht. KI-Tools denken fast nie daran. Und als Marketer haben Sie keinen Grund, sie zu lernen.

Fehler 5. Eine schwere E-Mail, die Gmail abschneidet

Gmail zeigt eine E-Mail nur dann vollständig an, wenn ihr Code weniger als etwa 102 KB wiegt. Was nicht hineinpasst, verschwindet hinter der Zeile „[Nachricht gekürzt] Gesamte Nachricht anzeigen“. Gezählt wird der Code: Text, Styles, Adressen von Links und Bildern. Bilder, die per Link geladen werden, zählen nicht zu dieser Größe, base64-Bilder dagegen schon.

KI-Tools sind geschwätzig. Sie wiederholen dieselben Styles an jedem Element, fügen überflüssige Hüllen und Kommentare hinzu und betten Bilder in den Code ein. Das Abschneiden trifft den wichtigsten Teil: Am Ende einer E-Mail stehen meist der Abmeldelink und das unsichtbare Pixel, mit dem Ihr E-Mail-Dienst die Öffnungen zählt. Wer sich abmelden möchte, findet den Link nicht und klickt womöglich stattdessen auf „Spam“. Und die Öffnungen dieser E-Mail landen nicht in Ihrer Statistik.

Was das für Sie bedeutet: Behalten Sie das Gewicht des Codes im Blick. Ist die E-Mail schwerer als 100 KB, muss sie abspecken: Wiederholungen entfernen, Bilder auf einen Server verlagern, Überflüssiges streichen.

Fehler 6. Kein Preheader

Ein Preheader ist der kurze Text, den der Posteingang neben der Betreffzeile anzeigt. Fehlt er, nimmt der Posteingang den ersten Text, den er oben in der E-Mail findet. Meist ist das „Im Browser anzeigen“, ein Menüpunkt oder die Bildunterschrift unter dem Logo. KI-Tools fügen fast nie einen Preheader ein, weil es so ein Element auf Websites nicht gibt.

Was das für Sie bedeutet: Der Preheader ist eine zweite Betreffzeile, und er beeinflusst, ob die E-Mail geöffnet wird. Er wird als ausgeblendeter Block ganz am Anfang des Codes eingefügt:

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

Mehr darüber, was eine gute E-Mail ausmacht, lesen Sie in unserem Leitfaden zum E-Mail-Design.

Fehler 7. Skripte, Formulare und Videos

Auf einer Website sind interaktive Elemente normal: ein Slider in JavaScript, ein Anmeldeformular, ein Video. Aus Gewohnheit baut die KI sie auch in E-Mails ein. In E-Mails funktioniert davon nichts:

• E-Mail-Clients führen keine Skripte aus und entfernen sie zum Schutz vor Schadcode. Manche E-Mail-Dienste lassen Sie eine E-Mail mit Skript nicht einmal speichern.
• Gmail ersetzt den Tag <video> durch einen leeren Platzhalter, Outlook für Windows und Yahoo zeigen ihn gar nicht an. Abgespielt wird er vor allem in Apple Mail.
• Formulare funktionieren nicht in Outlook für Windows, Yahoo auf dem iPhone, Proton Mail und GMX, und in Outlook.com und Outlook für Mac werden die Daten nicht abgeschickt.

Was das für Sie bedeutet: Statt eines Videos verwendet eine E-Mail ein Vorschaubild mit Link zum Video, und statt eines Formulars einen Button, der auf eine Seite mit dem Formular führt. Wenn Sie wirklich Interaktivität brauchen, sind besondere Techniken nötig, die wir in unserem Artikel über animierte E-Mails beschrieben haben.

So bitten Sie eine KI, eine E-Mail richtig zu coden

Viele dieser Fehler können Sie verhindern, wenn Sie der KI die Regeln für E-Mail-Markup gleich zu Beginn erklären. Diesen Prompt können Sie Ihrer Anfrage hinzufügen:

Code eine HTML-E-Mail für eine E-Mail-Kampagne, keine Webseite. Verwende für das Layout nur Tabellen mit role=“presentation”, keine div-Raster, kein flex und kein grid. Die E-Mail ist 600 Pixel breit. Schreibe alle Styles inline in das Attribut style, ohne style-Block und ohne Klassen. Verwende keine Tags header, main, section, footer oder button. Bilder nur als PNG oder JPG mit vollständiger URL, width, height und alt, kein SVG und kein base64. Baue Buttons aus einer Tabellenzelle mit Hintergrundfarbe. Kein JavaScript, keine Formulare, kein Video. Füge am Anfang der E-Mail einen ausgeblendeten Preheader ein. Halte den Code unter 100 KB.

Mit so einem Prompt wird das Ergebnis spürbar besser. Aber seien wir ehrlich, was er nicht löst.

Erstens vergisst die KI bei einer langen E-Mail die Regeln auf halber Strecke. Die ersten Blöcke sind mit Tabellen gecodet, und im Footer tauchen wieder <div> und Flexbox auf. Zweitens sieht die KI nicht, wie die E-Mail im Posteingang aussieht. Sie schreibt selbstbewusst „Dieser Code ist mit allen E-Mail-Clients kompatibel“, kann das aber nicht prüfen: Sie hat die E-Mail nie in Outlook geöffnet. Und drittens können auch Sie den Code nicht selbst prüfen, es sei denn, Sie coden E-Mails beruflich. Dafür brauchen Sie eine Reihe von Testpostfächern in verschiedenen Clients oder einen kostenpflichtigen Testdienst.

KI eignet sich hervorragend, um den Aufbau einer E-Mail zu planen und die Texte zu schreiben, wie wir in unserem Artikel über KI im E-Mail-Marketing zeigen. Das finale Markup ist aber bei einem Tool besser aufgehoben, das die Regeln von E-Mails kennt.

So wird aus KI-Markup eine funktionierende E-Mail

Genau dafür gibt es den HTML-E-Mail-Konverter in Blocks. Er nimmt den Code, den die KI geschrieben hat, und baut ihn nach den Regeln für E-Mail-Markup neu auf. Alles, was wir oben besprochen haben, behebt er selbstständig: Er macht aus Blöcken und Flexbox Tabellen, schreibt die Styles in die Tags und bringt Bilder, Buttons und Outlook in Ordnung.

So läuft es ab:

1. Fügen Sie den Code der E-Mail in Blocks ein oder laden Sie die Datei hoch.
2. Blocks erkennt, dass die E-Mail anderswo erstellt wurde, und bietet die Konvertierung an.
3. Die Konvertierung dauert meist weniger als eine Minute.
4. Die E-Mail öffnet sich im Editor und ist bereit für den Export in Ihren E-Mail-Dienst.

Einen zweiten Vorteil übersieht man leicht. Nach der Konvertierung ist die E-Mail keine Wand aus Code mehr, die Sie lieber nicht anfassen. Sie öffnet sich im Editor als Blöcke: Überschrift, Bild, Text, Button. Jede Stelle können Sie von Hand korrigieren, Detail für Detail: ein Wort ersetzen, ein Bild austauschen, einen Button umfärben, alles ohne Code und ohne neue Anfrage an die KI. Und beim Export erzeugt Blocks wieder Code, den E-Mail-Clients verstehen.

Wenn Sie nicht sicher sind, ob sich eine HTML-E-Mail überhaupt lohnt, vergleichen Sie sie mit einer reinen Text-E-Mail in unserem Artikel „HTML- oder Plain-Text-E-Mails“.

Kurz gesagt

• KI-Modelle haben das Coden an Websites gelernt, deshalb ist eine E-Mail-Vorlage aus ChatGPT, Claude oder Gemini wie eine Webseite gebaut.
• Eine Kampagne geht an alle gleichzeitig. Funktioniert eine Technik auch nur in einem großen E-Mail-Client nicht, taugt sie nicht für E-Mails.
• Die wichtigsten Fehler: Divs und Flexbox statt Tabellen, ein eigener Style-Block statt Inline-Styles, Bilder als SVG und base64, Techniken, die Outlook für Windows nicht versteht, zu schwerer Code, kein Preheader sowie Skripte, Formulare und Videos.
• Ein ausführlicher Prompt hilft, garantiert aber kein Ergebnis, und ohne Tests können Sie den Code nicht prüfen.
• Der verlässliche Weg: das KI-Markup durch einen Konverter schicken und die Details im Editor von Hand anpassen.