E-Mail-Clients sind Programme oder Webdienste zum Empfang und Versand von E-Mails; das Outlook-Problem bezeichnet die Tatsache, dass Microsoft Outlook HTML-E-Mails mit einer veralteten Rendering-Engine darstellt und damit viele moderne Design-Elemente bricht.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger Synonyme / Auch bekannt als: E-Mail-Reader, MUA (Mail User Agent), Rendering-Inkonsistenz
Was sind E-Mail-Clients?
Ein E-Mail-Client ist jede Anwendung, mit der Nutzer E-Mails lesen – ob im Browser (Gmail, Outlook.com, Yahoo Mail), als Desktop-Programm (Outlook, Apple Mail, Thunderbird) oder als Smartphone-App (Gmail App, Apple Mail App, Samsung Mail). Das Problem für E-Mail-Designer: Jeder dieser Clients interpretiert HTML und CSS leicht oder stark unterschiedlich.
Erklärung
Die E-Mail-Client-Landschaft
Laut Litmus-Daten (2024) verteilen sich die E-Mail-Öffnungen ungefähr so:
- Apple iPhone (Apple Mail App): ~50 % aller Öffnungen
- Gmail: ~25 % (Web + App kombiniert)
- Outlook: ~4–8 % (besonders hoch im B2B-Bereich)
- Samsung Mail, Yahoo, Sonstige: Rest
Im B2C-Kontext dominiert Apple Mail, im B2B-Kontext ist Outlook unverhältnismäßig stark vertreten. Das macht Outlook-Kompatibilität für professionelle E-Mail-Marketer unverzichtbar.
Das Outlook-Problem im Detail
Microsoft Outlook für Windows (Versionen 2007 bis 2021 und der neue Outlook 2024 bei einigen Versionen) verwendet für das HTML-Rendering die Microsoft Word Rendering Engine statt eines Browsers. Word ist kein HTML-Renderer und unterstützt viele CSS-Eigenschaften schlicht nicht.
Was Outlook NICHT unterstützt:
- CSS Flexbox und Grid
- CSS Background-Images (kein
background-imagein CSS) - Border-Radius (runde Buttons werden eckig)
max-widthbei Bildern (Bilder können über den Container hinausgehen)- Video und GIF-Animationen (nur erstes Frame sichtbar)
- Web Fonts (nur Systemschriften)
paddingauf<div>-Elementen (nur auf<td>zuverlässig)
Was stattdessen funktioniert:
- Tabellen-Layout mit
<table>,<tr>,<td>für die Struktur - Inline-CSS auf
<td>-Elementen - VML (Vector Markup Language) für Hintergrundbilder und runde Buttons
- MSO Conditional Comments für Outlook-spezifischen Code
MSO Conditional Comments
Conditional Comments sind HTML-Kommentare, die nur von Outlook-Versionen gelesen werden:
``html <!--[if mso]> <table width="600" align="center"><tr><td> <![endif]--> <div style="max-width:600px;"> <!-- Inhalt der E-Mail --> </div> <!--[if mso]> </td></tr></table> <![endif]--> ``
Mit dieser Technik sehen Outlook-Nutzer die Tabellen-Version, alle anderen Browser/Clients die <div>-Version.
Gmail und seine Eigenheiten
Gmail entfernt CSS im <head>-Bereich bei einigen Zugriffsmethoden. Daher ist Inline-CSS Pflicht. Die Gmail-App auf Android unterstützt Media Queries oft nicht, weshalb Responsive E-Mail Design für Gmail besondere Aufmerksamkeit erfordert. Seit 2019 unterstützt Gmail.com im Browser jedoch CSS Grid und Flexbox – ein großer Fortschritt, aber nicht auf allen Clients.
Apple Mail: Der komfortabelste Client
Apple Mail (macOS und iOS) unterstützt modernes CSS sehr gut. Seit iOS 15 gibt es dort jedoch Mail Privacy Protection (MPP): Apple öffnet E-Mails automatisch über eigene Server, was E-Mail-Metriken wie Open Rate stark verfälscht. Eine hohe Öffnungsrate kann nun bedeuten, dass Apple die E-Mail vorgeladen hat – nicht, dass der Mensch sie gelesen hat.
Die Teststrategie
Da keine zwei Clients gleich rendern, ist systematisches Testen unerlässlich. Litmus E-Mail Testing und Email on Acid simulieren die Darstellung in über 90 Clients und Geräten. Wichtigste Prioritäten beim Testen:
- Outlook 2016, 2019, 2021 (Windows)
- Gmail App (Android und iOS)
- Apple Mail (iPhone, Retina-Display)
- Outlook.com (Web)
Beispiele
- Runder Button in Outlook: Mit CSS
border-radius: 4pxsieht der Button in Gmail rund aus, in Outlook eckig. Lösung: VML-Button-Code für Outlook einfügen. - Hintergrundbild im Header: In Apple Mail und Gmail wird ein schönes Hintergrundbild angezeigt, in Outlook erscheint nur die Fallback-Farbe.
- Zweispaltiges Layout: Funktioniert in Apple Mail und Gmail korrekt; in Outlook 2016 erscheinen beide Spalten übereinander ohne Tabellen-Struktur.
- Animiertes GIF: Apple Mail zeigt die Animation; Outlook zeigt nur das erste Standbild.
- Web Font (Google Font): In Apple Mail erscheint die gewünschte Schrift; Outlook fällt auf die Systemschriftart zurück.
In der Praxis
Empfohlener Workflow für clientübergreifende E-Mails:
- Mit MJML Framework starten: MJML erzeugt automatisch MSO Conditional Comments und Tabellen-Strukturen.
- In Litmus E-Mail Testing testen: Vorschau in allen wichtigen Clients vor dem Versand.
- Fallback-Strategien einbauen: Immer Fallback-Farben für Hintergrundbilder, Systemschriften als Fallback nach Web Fonts.
- Einfacher ist robuster: Je komplexer das Layout, desto mehr Stellen können brechen. Minimalismus schützt.
Vergleich & Abgrenzung
| Client | CSS-Support | Besonderheit |
|---|---|---|
| Apple Mail | Sehr gut | MPP verfälscht Open Rates |
| Gmail (Web) | Gut | Kein CSS im <head> per Inline-Methode |
| Gmail (App Android) | Eingeschränkt | Media Queries oft ignoriert |
| Outlook 2016–2021 | Schlecht | Word-Rendering-Engine |
| Outlook.com | Mittel | Eigene Quirks |
| Samsung Mail | Mittel | Webkit-basiert, besser als Outlook |
Häufige Fragen (FAQ)
Wie setze ich E-Mail-Design mit Outlook-Kompatibilität konkret um? Der zuverlässigste Weg ist die Verwendung von MJML oder einem E-Mail-Template, das bereits Outlook-kompatiblen Code enthält. MSO Conditional Comments und Tabellen-Layouts bilden die Basis. Für runde Buttons in Outlook gibt es fertige VML-Code-Snippets, die auf bulletproof-email.com kostenlos verfügbar sind.
Was sind typische Fehler bei der Outlook-Kompatibilität? Der größte Fehler ist, eine E-Mail nur im Browser zu entwerfen, ohne in echten Outlook-Clients zu testen. Weitere Fehler: CSS-Backgrounds ohne VML-Fallback, padding auf <div> statt <td>, und das Vergessen der MSO Conditional Comments für Tabellen-Strukturen.
Weiterführend
- Can I Email: CSS-Support-Tabelle für alle E-Mail-Clients – caniemail.com
- Bulletproof Email: VML-Code für Outlook-kompatible Buttons – bulletproof-email.com
- Litmus Blog: „Outlook Rendering Issues and How to Fix Them" (Litmus, 2024) – litmus.com/blog
