E-Mail-Clients sind keine Browser: Das Grundproblem

Eine Website läuft in einem modernen Browser, der HTML und CSS relativ konsistent interpretiert. E-Mail-Clients hingegen verwenden unterschiedliche Engines: Einige sind modern, andere wirken wie aus einer anderen Zeit. Dazu kommen Sicherheitsmaßnahmen, die Code entfernen oder verändern, und Features wie Dark Mode, die Farben eigenständig anpassen. Das Ergebnis: „gleiches HTML“ führt nicht zu „gleicher Anzeige“.

Besonders tückisch: Eine E-Mail kann in einem Client sauber aussehen und in einem anderen auseinanderfallen, obwohl sich am Code nichts geändert hat. Deswegen ist E-Mail-Design weniger „Pixel-perfect“ und mehr „defensives Engineering“.

Die häufigsten Gründe, warum HTML-E-Mails „broken“ wirken

1) Outlook & die Rendering-Engine: Tabellen sind dein Freund

Viele Outlook-Versionen interpretieren CSS nur eingeschränkt. Layouts, die im Web mit Flexbox oder Grid super funktionieren, scheitern in E-Mails häufig. Deshalb sind Tabellenlayouts im E-Mail-Universum weiterhin Standard. Das klingt altmodisch, ist aber der stabilste Weg, um Spalten, Abstände und Ausrichtung kontrolliert zu halten.

Wenn deine Mail „verschoben“ wirkt oder Spalten untereinander rutschen, obwohl sie nebeneinander bleiben sollen, ist das oft ein Hinweis, dass dein Layout zu sehr auf moderne CSS-Mechaniken setzt.

2) CSS wird entfernt, gekürzt oder umgeschrieben

Viele Clients filtern CSS aus Sicherheitsgründen. Manche entfernen <style>-Blöcke, andere ignorieren bestimmte Selektoren oder kürzen komplexe Regeln. Zusätzlich können Clients CSS umschreiben, z. B. um Tracking zu reduzieren oder um eigene Standards zu erzwingen.

Eine bewährte Strategie ist, wichtige Styles als Inline-CSS zu setzen. Inline ist nicht schön, aber oft am zuverlässigsten. Und ja: Einige Dinge, die du im Web selbstverständlich findest, funktionieren in E-Mails nur eingeschränkt oder gar nicht.

3) Externe Assets: Bilder werden blockiert oder „neu verpackt“

Standardmäßig blockieren viele Clients Bilder, bis der Empfänger sie aktiv lädt. Wenn dein Layout stark auf Bild-Hintergründe oder Bild-Text-Kombinationen setzt, wirkt die Mail dann wie eine leere Baustelle. Manche Clients laden Bilder auch über Proxy-Server und verändern dabei die URL oder das Timing.

Wenn deine Mail ohne Bilder „kaputt“ aussieht, fehlt dir wahrscheinlich ein robustes Fallback: sinnvolle Alt-Texte, stabile Hintergrundfarben und ein Layout, das auch ohne hero image nicht auseinanderfällt.

4) Webfonts funktionieren nicht überall

Custom Fonts sind verführerisch, aber E-Mail-Clients sind wählerisch. Viele erlauben keine Webfonts, andere laden sie nur unter bestimmten Bedingungen. Ergebnis: Deine sorgfältig gewählte Schrift wird durch eine Standardschrift ersetzt – und plötzlich brechen Zeilen um, Buttons werden größer und Abstände wirken falsch.

Lösung: Setze auf saubere Font-Stacks und plane das Layout so, dass es auch mit einer Systemschrift stabil bleibt. Webfont als Bonus – nicht als Fundament.

5) Dark Mode: Farben werden automatisch invertiert

Dark Mode ist einer der größten „Design-Zerstörer“. Manche Clients invertieren Hintergründe, andere verändern Textfarben, wieder andere machen beides – oder nur teilweise. Das kann dazu führen, dass dein schwarzer Text auf einmal grau wird, weiße Boxen „verschmelzen“ oder Logos unsichtbar wirken.

Besonders häufig: Buttons verlieren Kontrast, feine Border-Linien verschwinden, und Bilder mit transparentem Hintergrund sehen plötzlich komisch aus. Wenn deine Mail im Dark Mode seltsam wirkt, ist das nicht selten ein Mix aus automatischer Farb-Transformation und fehlenden Design-Fallbacks.

6) Margins & Abstände: Was im Web klappt, wird in E-Mails ignoriert

Ein Klassiker: margin wird nicht überall zuverlässig gerendert. Das führt dazu, dass Überschriften plötzlich kleben oder Absätze zu dicht wirken. Auch line-height kann je nach Client variieren. Wenn Abstände „kaputt“ sind, ist es oft ein Spacing-Problem durch eingeschränkte CSS-Unterstützung.

In vielen E-Mail-Templates werden Abstände daher über Padding in Tabellenzellen gelöst oder über kleine Spacer-Tabellen. Klingt unschön, ist aber extrem kompatibel.

7) Skalierung auf Mobilgeräten: Zoom, automatische Schriftgrößen, „Smart“ Anpassungen

Mobile Clients sind nicht nur klein – sie sind „smart“. Sie skalieren Inhalte, erhöhen Schriftgrößen, versuchen Spalten automatisch umzubrechen und optimieren Lesbarkeit nach eigenen Regeln. Das ist nett, bis es dein Layout verändert.

Wenn Überschriften auf iOS plötzlich riesig werden oder Buttons zu hoch wirken, kann das an automatischen Font-Adjustments liegen. Du brauchst dann ein Layout, das in der Breite flexibel ist und auf kleinen Screens nicht „hart“ bricht.

Was du konkret tun kannst: Robustheits-Strategien aus der Praxis ✅

1) Baue defensiv: Tabellenlayout für Struktur, Inline-CSS für Kern-Styles

Wenn es um Layout-Stabilität geht, führen Tabellen und Inline-Stile immer noch die Rangliste an. Nutze Tabellen für Spalten und grundlegende Struktur. Verwende Inline-CSS für Typografie, Farben, Abstände und Buttons. Komplexe Selektoren, moderne Layout-Features und Abhängigkeiten von externen Styles sind riskant.

Das Ziel ist nicht „modernes CSS“, sondern „predictable rendering“. Wenn deine Mail bei 80% der Empfänger sauber aussieht, ist das oft wertvoller als ein perfektes Layout bei nur einem Client.

2) Halte das CSS simpel und vermeide fragile Features

Je weniger Magie, desto weniger Überraschungen. Verlasse dich nicht auf Dinge, die in E-Mails häufig brechen: komplexe Positionierung, viele verschachtelte Container, Hintergrundbilder als zentrale Layout-Elemente, oder zu viele Abhängigkeiten von Media Queries.

Media Queries können funktionieren, aber nicht überall gleich. Plane daher eine „Baseline“, die auch ohne Media Queries gut aussieht. Mobile-Optimierung ist dann ein Upgrade, nicht die einzige Rettungsleine.

3) Bilder: Plane immer den „Images off“-Fall

Mach deine Mail so, dass sie auch ohne Bilder nicht peinlich wirkt. Setze sinnvolle Hintergrundfarben, strukturiere die Inhalte so, dass Text auch ohne Grafiken verständlich bleibt, und nutze Alt-Texte, die wirklich informieren – nicht nur „image“.

Wenn dein Logo transparent ist, prüfe es im Dark Mode: Transparent kann plötzlich zu wenig Kontrast haben. Eine Variante mit solidem Hintergrund oder ein alternativer Asset-Export kann hier Wunder wirken.

4) Typografie: sichere Schriftstapel und stabile Zeilenhöhen

Wähle einen soliden Font-Stack, der in Windows, macOS, iOS und Android gut aussieht. Setze außerdem stabile line-height-Werte, damit Absätze nicht zusammenfallen oder zu locker werden. Plane Button-Text so, dass er auch mit einer Ersatzschrift nicht überläuft.

Ein typischer Fix: Buttons nicht zu knapp dimensionieren. Gib ihnen ausreichend Padding und Raum, damit Text in verschiedenen Clients nicht „gequetscht“ wird.

5) Dark Mode: Kontrast-Reserven einbauen 🎨

Du kannst nicht jedes Dark-Mode-Verhalten kontrollieren, aber du kannst dein Design widerstandsfähiger machen: klare Kontraste, keine ultrafeinen Linien, ausreichende Flächen, und vorsichtiger Einsatz von Hellgrau auf Weiß. Wenn dein Design nur unter perfekten Farben funktioniert, wird es in Dark Mode sehr wahrscheinlich leiden.

Setze Buttons so, dass sie auch nach automatischer Farbverschiebung noch als Button erkennbar sind: deutliche Flächen, gut lesbarer Text, und im Zweifel ein Rahmen, der nicht verschwindet.

6) Vermeide „Layout durch Bilder“

Wenn dein Layout nur funktioniert, weil ein Hintergrundbild die Struktur vorgibt, wird es brechen, sobald Bilder blockiert sind oder das Bild skaliert wird. Lege die Struktur im HTML fest, nutze Bilder als Ergänzung. So bleibt die Mail stabil, egal ob Assets geladen werden oder nicht.

7) Teste wie ein Profi: nicht nur in einem Client

Viele Probleme sieht man erst im echten Client: Outlook Desktop, Gmail Web, Gmail App, Apple Mail, iOS Mail, Samsung Mail. Wenn du nur einen Client testest, ist dein „perfektes“ Ergebnis oft ein Zufallsfund. Ein kurzer Testlauf in mehreren Umgebungen spart dir später Support-Mails und verlorene Klicks.

Wichtig: Teste auch Variationen wie Dark Mode, Bilder aus, kleinere Screenbreiten und längere Betreffzeilen. Manchmal bricht nicht das Layout, sondern die Wahrnehmung: Ein abgeschnittener Preheader oder ein CTA, der untergeht, ist praktisch genauso fatal.

Mini-Checkliste: So wirkt deine HTML-Mail sofort „aufgeräumter“ 🔧

• Struktur: Tabelle für Layout, keine Abhängigkeit von Flex/Grid.
• CSS: Kern-Styles inline; komplexe Selektoren und fancy Features vermeiden.
• Spacing: Padding statt Margin, Zeilenhöhen konsistent setzen.
• Bilder: Alt-Texte, Fallback-Farben, Layout ohne Bilder stabil.
• Buttons: genügend Padding, klare Kontraste, Text darf nicht überlaufen.
• Fonts: System-Fallbacks einplanen, Webfonts nur als Bonus.
• Dark Mode: Kontrast-Reserven, keine „zu feinen“ UI-Elemente.
• Testing: mehrere Clients, mobil + desktop, Dark Mode + Bilder aus.

Wenn du diese Punkte beachtest, wirst du nicht jedes Rendering-Problem eliminieren – aber du reduzierst die typischen „Broken“-Momente drastisch. Und das ist in der E-Mail-Welt oft der Unterschied zwischen „professionell“ und „zusammengebastelt“.

Bonus: Wie du „kaputte“ E-Mails schneller debuggen kannst 🕵️‍♂️

Wenn eine Mail in einem bestimmten Client schief aussieht, gehe systematisch vor: Isoliere zuerst das Problem (Spacing, Bild, Schrift, Button, Spalten). Entferne dann schrittweise Komplexität, bis das Rendering wieder stabil ist. Oft liegt es an einer einzelnen Eigenschaft, die der Client ignoriert oder anders interpretiert.

Ein praktischer Ansatz: Baue eine robuste Basis (Header, Content-Block, CTA, Footer) und füge Extras erst danach hinzu. So erkennst du schneller, welches Feature das Layout kippt. Besonders bei Outlook ist diese „Layer“-Arbeitsweise Gold wert.