E-Mail-Client-Kompatibilität: Was wo funktioniert

Für die meisten Teams, die HTML-E-Mails bauen wollen, ohne jede Outlook-Tabelle von Hand zu schreiben, ist MJML der beste Ausgangspunkt. Das Framework übersetzt eine vereinfachte Komponentensyntax in verschachtelte Tabellen, Inline-Styles und die bedingten Kommentare, die Outlook braucht. MJML wird selbst betrieben, eine feste Lizenzgebühr nennt dieser Leitfaden nicht. Die laufenden Kosten entstehen beim Versand. Ein Dienst wie Sender beginnt im kostenlosen Tarif mit bis zu 2.500 Abonnenten und 15.000 E-Mails im Monat. Die Preisangaben in diesem Leitfaden entsprechen dem Stand vom 7. Oktober 2026 auf den verlinkten Pricing-Seiten.

Dieser Leitfaden beschreibt, was in den wichtigsten Clients funktioniert, welche Teile davon ein Builder übernimmt und welche Sie selbst prüfen sollten. Danach folgen Vergleichstabellen zu Werkzeugen und Kosten, eine Entscheidungshilfe und eine Checkliste für Einrichtung und Umstieg. Am Ende stehen die häufigsten Fragen.

Warum ein Builder die Kompatibilität nicht ersetzt

Ein E-Mail-Builder abstrahiert das Markup, hebt aber die Rendering-Regeln der Clients nicht auf. Ein visueller Editor, der eine Spalte mit einem modernen Layout-Verfahren ausgibt, sieht in Gmail vielleicht korrekt aus und bricht in Outlook 2016 auseinander. Deshalb lohnt es sich, die Ausgabe zu verstehen, auch wenn Sie nie selbst programmieren.

Drei Fragen helfen bei jeder Werkzeugwahl. Wer baut die Vorlage: das Marketing, die Entwicklung oder Ihre Kunden? Wie viel Ausgabe-HTML wollen Sie sehen oder nachträglich ändern können? Und über welchen Dienst wird versendet? Die Abschnitte unten beantworten diese Fragen Werkzeug für Werkzeug. Die Clients selbst ändern sich laufend, deshalb sollten Sie die Ausgabe vor jeder größeren Kampagne an den Clients prüfen, die Ihre Abonnenten tatsächlich nutzen.

Die wichtigsten E-Mail-Clients

Outlook für Windows (Versionen bis 2019)

Der anspruchsvollste Client in dieser Liste. Outlook 2007 bis 2019 rendert mit der Engine von Microsoft Word und nicht mit einer Browser-Engine. Für Ihre Vorlage bedeutet das in der Praxis:

• Keine CSS-Floats für Spalten
• Hintergrundbilder auf div-Elementen werden nicht angezeigt; auf Tabellenzellen lassen sie sich mit VML lösen
• Margin und Padding sind nur eingeschränkt verlässlich
• Keine CSS-Positionierung
• Layouts müssen auf Tabellen aufbauen

Wer Outlook richtig bedient, baut also zuerst das Gerüst aus Tabellen und ergänzt danach die Verfeinerungen. Umgekehrt funktioniert der Weg nicht: Eine Vorlage, die nur in Gmail gut aussieht, ist für Desktop-Outlook selten brauchbar.

Outlook im neuen Design und Outlook im Web

Das neue Outlook und die Weboberfläche rendern mit Browser-Technik und sind deshalb deutlich verträglicher als das Desktop-Outlook älterer Versionen. Abstände und Hintergrundbilder können trotzdem abweichen, daher bleiben Tabellen und VML-Fallbacks sinnvoll. Outlook im Web ist außerdem nicht identisch mit dem Desktop-Client, auch wenn beide ähnlich heißen. Wer beide Varianten in der Zielgruppe hat, sollte beide Ansichten ansehen.

Gmail

Gmail unterstützt style-Blöcke im Head, filtert aber einzelne Selektoren und Eigenschaften heraus. Verlassen Sie sich deshalb für alles Wichtige auf Inline-Styles. Gmail blendet externe Bilder außerdem standardmäßig aus, bis der Empfänger sie lädt. Ihre Nachricht muss ohne Bilder verständlich bleiben, und jedes Bild braucht einen aussagekräftigen Alt-Text. Die Gmail-App auf dem Smartphone verarbeitet Media Queries anders als die Weboberfläche, weshalb responsives Verhalten auf einem echten Gerät geprüft werden sollte und nicht nur im Desktop-Browser.

Apple Mail (macOS und iOS)

Apple Mail arbeitet mit WebKit, ähnlich wie Safari, und unterstützt Media Queries, Hintergrundbilder und die meisten modernen CSS-Eigenschaften. Eigene Schriften werden hier geladen. Wenn Ihre Zielgruppe überwiegend Apple-Geräte nutzt, gewinnen Sie gestalterischen Spielraum. Die Grundregel bleibt trotzdem: Gebaut wird für den schwächsten Client, verfeinert für den stärksten.

Yahoo Mail

Die CSS-Unterstützung liegt im mittleren Bereich. Yahoo entfernt einige Styles, aber weniger konsequent als Gmail. Hintergrundbilder sollten mit einer Hintergrundfarbe als Fallback hinterlegt werden. Ihre Vorlage muss auch ohne Bild gut aussehen.

CSS-Eigenschaften im Überblick

Die folgenden Blöcke fassen zusammen, was Sie mit den meisten Clients bedenkenlos verwenden können, was nur mit Einschränkungen funktioniert und was Sie meiden sollten. Die Einteilung ist eine Faustregel und keine vollständige Matrix. Prüfen Sie Abweichungen für Ihre eigene Zielgruppe.

Überall sicher verwendbar

/* Funktioniert in allen gängigen Clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* auf Tabellenzellen */
width: 100%;
max-width: 600px;

Teilweise unterstützt

/* In den meisten Clients ok, Probleme in Outlook */
border-radius: 4px; /* In Desktop-Outlook nicht unterstützt */
background-image: url(...); /* In Outlook über VML lösen */
box-shadow: ...; /* Eingeschränkte Unterstützung */
margin: 10px; /* In Outlook uneinheitlich */

Meiden oder nur mit Vorsicht verwenden

/* Diese Eigenschaften verursachen Probleme */
display: flex; /* In E-Mails nicht verlässlich */
display: grid; /* In E-Mails nicht verlässlich */
position: absolute/relative; /* Sehr eingeschränkt */
float: left/right; /* Probleme in Outlook */
transform: ...; /* Eingeschränkt */
animation: ...; /* Praktisch nur in Apple Mail */

Ein Builder schreibt diese Regeln in den meisten Fällen für Sie. Interessant wird es, wenn Sie eigene Stile ergänzen, etwa in einem Editor mit freiem CSS-Feld. Dann lohnt ein Blick in die Ausgabe, denn genau dort rutschen Eigenschaften aus der dritten Gruppe in die Vorlage.

Layout-Techniken

Tabellen als Gerüst

Tabellen bleiben das zuverlässigste Layoutwerkzeug. Ein Standardgerüst legt eine Außentabelle über die volle Breite an und darin eine Innentabelle mit 600 Pixeln Breite:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Inhalt hier</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Dieses Muster erzeugt MJML automatisch. Wenn Sie es von Hand schreiben, achten Sie auf role="presentation" sowie auf cellpadding und cellspacing, damit Clients keine eigenen Abstände einfügen.

Bedingte Kommentare für Outlook

Mit bedingten Kommentaren sprechen Sie gezielt nur Outlook an. Alle anderen Clients ignorieren den Block:

<!--[if mso]>
  <!-- Nur für Outlook -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Inhalt für alle Clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML für Hintergrundbilder in Outlook

Hintergrundbilder auf Abschnitten brauchen für Desktop-Outlook einen VML-Fallback. Der Block hinterlegt das Bild im Desktop-Outlook, während andere Clients das normale div mit dem Hintergrund sehen:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Inhalt hier
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Der VML-Block ist aufwendig und fehleranfällig, wenn man ihn von Hand pflegt. Deshalb ist er ein guter Prüfpunkt, wenn Sie einen Builder oder ein Framework evaluieren: Fragen Sie, ob der Hintergrund für Outlook automatisch als VML ausgegeben wird.

Bilder

Grundlegender Bildcode

<img
  src="https://example.com/bild.jpg"
  alt="Beschreibung des Bildes"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Die wichtigsten Attribute:

• width und height: Feste Maße festlegen, Outlook braucht sie
• display: block: Entfernt die Lücke unter dem Bild
• max-width: 100%: Skaliert auf kleinen Bildschirmen mit
• border: 0: Entfernt den Rand bei verlinkten Bildern

Bildformate

• JPG: Fotos und komplexe Bilder
• PNG: Transparenz und einfache Grafiken
• GIF: Animation, sparsam einsetzen
• SVG: Begrenzte Unterstützung, in E-Mails besser vermeiden
• WebP: Wird in Outlook nicht unterstützt

Komprimieren Sie Bilder vor dem Versand und halten Sie die Gesamtgröße der Nachricht niedrig. Große Nachrichten laden langsamer, und bei Bildern, die Clients nicht laden, bleibt der Inhalt sonst leer. Hosten Sie Bilder unter absoluten https-Adressen auf einer Domain, die Sie kontrollieren.

Schriften

Web-sichere Schriftstapel

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Eigene Schriften mit Fallback

Eingebundene Webschriften funktionieren nur in einigen Clients, etwa in Apple Mail, auf dem iPhone und auf manchen Android-Geräten. Setzen Sie immer einen Fallback aus einer web-sicheren Schrift:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text mit eigener Schrift
</p>

Outlook und Gmail zeigen in der Regel den Fallback. Apple Mail lädt die eigene Schrift. Bei Markenschriften gilt daher: Die Botschaft muss mit der Fallback-Schrift vollständig lesbar sein, sonst leidet die Gestaltung in den Clients ohne Webschriften.

Media Queries

Die Unterstützung für Media Queries unterscheidet sich stark zwischen den Clients. Ein typischer Block für mobile Ansichten sieht so aus:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Der Stand in der Praxis:

• Apple Mail: Volle Unterstützung
• iOS Mail: Volle Unterstützung
• Gmail-App (iOS und Android): Unterstützung
• Gmail im Web: Eingeschränkt
• Outlook: Keine Unterstützung, daher Layouts mit Tabellen fest bauen

Für die Praxis heißt das: Die Vorlage soll auch dann funktionieren, wenn die Media Query ignoriert wird. Ein Layout mit Tabellen und festen Breiten bleibt in jedem Client lesbar, auch wenn das mobile Umbruchverhalten fehlt.

Werkzeuge im Vergleich

Die Werkzeuge lassen sich grob in drei Gruppen teilen. Visuelle Editoren bauen Vorlagen per Drag-and-drop, Code-Frameworks erzeugen HTML in Ihrem Build-Prozess, und Versanddienste stellen die fertige Nachricht zu. Die folgende Tabelle zeigt die wichtigsten Unterschiede. Wo kein Preis angegeben ist, gibt es in diesem Leitfaden keine verlässliche Zahl, und der Anbieter nennt sie auf Anfrage.

Visuelle Editoren: Stripo, BEE und Unlayer

Stripo

Stripo richtet sich an Marketing-Teams, die Vorlagen per Drag-and-drop bauen und trotzdem sauberes HTML ausliefern wollen. Die Stärke liegt in vorgefertigten Bausteinen und darin, bestehende Vorlagen weiterzuverwenden. Die Schwäche: Ein Editor bildet nicht jedes Detail einer individuellen Gestaltung ab. Bei komplexen Layouts sollten Sie den erzeugten Code in Outlook prüfen, bevor Sie eine Kampagne freigeben. Der Preis wird auf Anfrage genannt, und Angebote richten sich nach Ihrem Bedarf.

BEE

BEE eignet sich besonders, wenn Sie einen Editor in eine eigene Plattform einbetten möchten, damit Ihre Kunden Nachrichten selbst gestalten. Das Ergebnis hängt davon ab, welche Bausteine und Stile Sie freigeben. Je mehr Freiheit Sie Nutzern geben, desto wichtiger wird eine feste Prüfroutine mit den Clients aus diesem Leitfaden. Der Preis wird auf Anfrage genannt.

Unlayer

Unlayer ist ein Editor-Baukasten für Produkte, in denen Nutzer E-Mail-Vorlagen selbst erstellen. Der Vorteil: Ihre Nutzer arbeiten im Editor, während Sie Versand und Speicherung der Vorlagen übernehmen. Die Grenze: Die HTML-Ausgabe lässt sich nur begrenzt von Hand verfeinern. Wer eine Vorlage exportiert, sollte sie vor dem Versand in Outlook und Gmail prüfen. Der Preis wird auf Anfrage genannt.

MJML, React Email und Maizzle: Code-Frameworks

MJML

MJML hat den klarsten Nutzen für die Kompatibilität. Sie schreiben Komponenten wie mj-section, mj-column und mj-text, und das Framework erzeugt daraus Tabellen, Inline-Styles, Media Queries und die Outlook-Kommentare. Das Outlook-Problem müssen Sie dadurch nicht selbst lösen. Ein einfacher Aufbau sieht so aus:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Willkommen bei uns</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Die Schwäche: MJML braucht eine Build-Umgebung, und eigene Konstruktionen passen nicht immer in die Komponentenliste. Für eigene Komponenten brauchen Sie Entwicklungszeit. MJML wird selbst betrieben. Die Preisangaben zu möglichen hosted Angeboten finden Sie auf der Pricing-Seite von MJML.

React Email

React Email lässt Sie E-Mail-Vorlagen als React-Komponenten schreiben. Für Teams, die ohnehin mit React arbeiten, ist das ein kurzer Weg zu wiederverwendbaren Bausteinen. Die Grenze: Ohne React-Erfahrung ist die Lernkurve steil, und das Marketing kann Vorlagen selten ohne Entwicklung ändern. Der Preis wird auf Anfrage genannt.

Maizzle

Maizzle arbeitet mit Vorlagen in einer Utility-Klassen-Syntax, die an Tailwind erinnert. Beim Build werden die Styles in Inline-Styles übersetzt, was die Zuverlässigkeit in den Clients erhöht. Das passt zu Teams, die Utility-Klassen kennen und eigene Layouts wollen. Die Einschränkung: Sie brauchen einen Build-Prozess, und weil die Ausgabe erst beim Build entsteht, sollten Sie das fertige HTML immer kontrollieren. Der Preis wird auf Anfrage genannt.

Versanddienste, die zu diesen Vorlagen passen

Ein fertiges HTML-Dokument müssen Sie irgendwo verschicken. Die drei folgenden Dienste passen unterschiedlich gut zu den Build-Werkzeugen oben. Entscheidend sind Listengröße, Automationen und ob Sie transaktionale Nachrichten aus der Anwendung senden.

Sender

Sender ist ein Versanddienst für Newsletter und Kampagnen mit einem kostenlosen Tarif. Der Free-Tarif umfasst 2.500 Abonnenten und 15.000 E-Mails im Monat. Der Standard-Tarif kostet 6,30 $ pro Monat und umfasst 6.000 E-Mails im Monat für bis zu 500 Abonnenten. Der Professional-Tarif kostet 10,50 $ pro Monat und umfasst 12.000 E-Mails im Monat, ebenfalls für bis zu 500 Abonnenten. Die Preisstruktur richtet sich nach Abonnenten und E-Mail-Volumen. Lesen Sie die Pricing-Seite von Sender, bevor Sie einen Tarif wählen. Für Listen mit mehr als 12.000 E-Mails im Monat sind in diesem Leitfaden keine Preise angegeben.

Sender passt zu einer MJML-Vorlage, die Sie als HTML exportieren und in den Editor hochladen. Für kleine Listen bleibt die Kampagne damit kostenlos, sobald die Vorlage einmal sauber gebaut ist.

Kit

Kit ist für Creator und Newsletter-Teams gedacht, die Abonnenten taggen und segmentieren. Der Free-Tarif umfasst bis zu 10.000 Abonnenten mit unbegrenzten Landingpages, Formularen und E-Mail-Broadcasts. Visuelle Automationen und E-Mail-Sequenzen beginnen erst im Creator-Tarif, der 33 $ pro Monat bei jährlicher Abrechnung kostet. Der Pro-Tarif kostet 66 $ pro Monat bei jährlicher Abrechnung und enthält unter anderem Zustellbarkeitsberichte und unbegrenzte Benutzer. Auf kostenpflichtigen Tarifen gibt es eine 14-tägige Testphase ohne Kreditkarte. Die Details stehen auf der Pricing-Seite von Kit.

Kit ist kein HTML-Werkzeug im engeren Sinne. Wer exakten eigenen Code ausliefern will, nutzt Kit am besten als Versandziel für Vorlagen, die mit MJML, React Email oder Maizzle gebaut wurden. Dann bleibt die Kompatibilität im Build, und Kit übernimmt Abonnenten, Tags und Automationen.

Courier

Courier ist eine API für transaktionale Nachrichten und Benachrichtigungen, etwa Bestätigungen, Passwort-Mails und Rechnungsinformationen aus Ihrer Anwendung. Der Developer-Tarif ist kostenlos und umfasst 10.000 Versände im Monat sowie Journeys und Broadcasts, einen MCP-Server, CLI und SDKs. Darüber gilt der nutzungsbasierte Business-Tarif mit 0,005 $ pro Versand. Enterprise-Verträge mit Volumenrabatten gibt es auf Anfrage. Die Pricing-Seite von Courier zeigt die aktuelle Staffelung.

Für eine transaktionale Vorlage aus MJML ist Courier eine gute Wahl, weil die Kosten pro Versand gut planbar sind. Für Newsletter mit großen Listen müssen Sie die Versandmenge vorher durchrechnen, denn bei Courier wächst die Rechnung mit jedem Versand.

Kosten bei realistischen Listen

Die folgende Rechnung nimmt drei Beispiellisten an. Die Zahl der Versände ergibt sich aus Abonnenten mal Nachrichten pro Monat. Ein Preis steht nur dort, wo er für das jeweilige Volumen auf der Anbieterseite angegeben ist. Ein Builder oder ein Framework verändert diese Zahlen nicht, denn die Kosten entstehen beim Versand und nicht beim Erstellen der Vorlage.

Die Rechnung zeigt zwei Muster. Bei Newslettern mit festen Abonnentenzahlen ist ein Tarifmodell meist günstiger, sobald das Volumen die Freigrenzen übersteigt. Bei transaktionalen Nachrichten steigt die Rechnung linear mit dem Versand, was bei sehr großen Mengen schnell ins Gewicht fällt. Multiplizieren Sie deshalb immer die realistische Monatsmenge mit dem Versandpreis, bevor Sie sich festlegen.

So wählen Sie das passende Werkzeug

Die Entscheidung hängt meist zuerst davon ab, wer die Vorlage pflegt. Erst danach stellt sich die Frage, welcher Versanddienst zum Volumen passt. Die Tabelle fasst die Situationen zusammen.

Einrichtung und Umstieg: Checkliste

Wer eine bestehende Vorlage in ein neues Werkzeug übernimmt, sollte die Schritte in einer festen Reihenfolge abarbeiten. Die folgende Tabelle führt von der Sicherung bis zum Versand. Jede Zeile ist ein Prüfpunkt, unabhängig davon, welches Werkzeug Sie wählen.

Beim Umstieg lohnt es sich, die alte und die neue Vorlage parallel an denselben Testadressen zu verschicken. Unterschiede zeigen sich oft erst im Detail, etwa bei Abständen oder Schriftgrößen in Outlook. Erst wenn beide Fassungen in allen Testclients stimmen, sollte die alte Vorlage abgeschaltet werden.

Häufige Fragen

Welcher E-Mail-Client ist der schwierigste?

Das Desktop-Outlook für Windows in den Versionen bis 2019 ist der anspruchsvollste Client. Es rendert mit der Engine von Microsoft Word, deshalb braucht jede Vorlage für diesen Client Tabellen als Gerüst und gegebenenfalls VML für Hintergrundbilder.

Reicht ein visueller Editor, damit Outlook korrekt aussieht?

Oft ja, bei Standardlayouts. Bei individuellen Gestaltungen sollten Sie den erzeugten Code oder die Vorschau in Outlook prüfen, bevor Sie eine Kampagne freigeben. Ein Editor ersetzt diesen Schritt nicht.

Brauche ich MJML, wenn ich nur einfache Newsletter schreibe?

Nicht zwingend. Für wenige, einfache Vorlagen reicht oft ein visueller Editor. MJML lohnt sich, sobald Sie regelmäßig Vorlagen bauen, die Entwicklung und Marketing gemeinsam pflegen, oder wenn Sie transaktionale Mails aus einer Anwendung versenden.

Muss ich Bilder immer in die E-Mail einbinden?

Nein. Da Gmail externe Bilder standardmäßig ausblendet, sollte jede Nachricht auch ohne Bilder verständlich sein. Bilder ergänzen die Botschaft, sie sollten sie nicht tragen.

Welcher Versanddienst passt zu einer Vorlage aus MJML?

Das hängt von Listengröße und Funktionen ab. Für kleine Newsletter bietet sich Sender mit dem Free-Tarif an, für Automationen und Segmente Kit im Creator-Tarif, für transaktionale Nachrichten aus der Anwendung Courier mit dem Developer-Tarif. Die Rechnung im Abschnitt zu den Kosten zeigt, wie sich die Preise bei wachsenden Listen verändern.

Kann ich eine Vorlage von einem Werkzeug in ein anderes übertragen?

Meist nur über den HTML-Export. Die Struktur und die Bausteine bleiben im Zielwerkzeug nicht erhalten, deshalb sollten Sie die Vorlage dort neu aufbauen und danach gegen die Checkliste im Abschnitt zur Einrichtung prüfen.

Warum ist der Preis bei vielen Werkzeugen nicht angegeben?

Stripo, BEE, Unlayer, React Email und Maizzle nennen ihre Preise in diesem Leitfaden nicht. Die Anbieter bieten Angebote auf Anfrage an, deshalb sind hier keine Zahlen eingetragen. Für Sender, Kit und Courier stehen die Tarife auf den verlinkten Pricing-Seiten.