HTML-E-Mails sind E-Mails, die neben reinem Text auch HTML-Code und CSS-Styling enthalten, um visuelle Gestaltung, Bilder und strukturierte Layouts zu ermöglichen.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger
Was sind HTML-E-Mails?
Eine E-Mail kann als reiner Text (Plain Text) oder als HTML-Dokument versendet werden. Fast alle modernen Marketing-E-Mails nutzen HTML, um eine visuelle Gestaltung zu ermöglichen – Logos, Bilder, Buttons, Schriftformatierungen. Der Haken: E-Mail-Clients rendern HTML komplett anders als Webbrowser. Es gibt keinen gemeinsamen Standard, jeder Client macht, was er will.
Das Ergebnis: Eine E-Mail, die in Gmail perfekt aussieht, kann in Outlook 2016 komplett zerbrechen. Wer HTML-E-Mails erstellt, arbeitet in einem der fragmentiertesten Rendering-Umgebungen der digitalen Welt.
Erklärung
Warum E-Mail-HTML anders ist als Web-HTML
Webbrowser (Chrome, Firefox, Safari) folgen alle weitgehend denselben HTML5- und CSS3-Standards. E-Mail-Clients nicht.
Outlook für Windows (2007–2021) nutzt die Rendering-Engine von Microsoft Word – nicht von Internet Explorer oder Edge. Das bedeutet: Modernes CSS ist weitgehend nicht verfügbar. Outlook versteht kein Flexbox, kein CSS Grid, kein background-image, kein position: absolute, kein border-radius und mehr.
Gmail hat seinen eigenen Renderer und strippte bis 2016 alle <style>-Tags aus dem <head>, was bedeutete, dass nur Inline-CSS funktionierte. Neuere Gmail-Versionen unterstützen einige Media Queries.
Apple Mail ist am fortschrittlichsten und unterstützt viele moderne CSS-Features.
Inline-CSS: Warum es nötig ist
In normalen Webseiten steht CSS in einer externen .css-Datei oder im <head>. Viele E-Mail-Clients ignorieren externen CSS und teils sogar den <head>. Deswegen muss CSS für E-Mails inline sein – direkt im style-Attribut des HTML-Elements:
``html <p style="font-family: Arial, sans-serif; font-size: 16px; color: #333333; line-height: 1.6;"> Dieser Text ist inline gestylt. </p> ``
Tools wie Mailchimp, Brevo oder Campaign Monitor übernehmen das automatische CSS-Inlining. Wer manuell HTML-E-Mails baut, nutzt Tools wie Premailer oder MJML.
Tabellen-Layout: Das Fundament
Tabellen (<table>, <tr>, <td>) waren das Layoutwerkzeug des Webs der 1990er Jahre. Im E-Mail-Design sind sie bis heute Standard – aus einem einfachen Grund: Sie funktionieren überall, auch in Outlook.
Eine typische E-Mail-Struktur:
``html <table width="600" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td style="padding: 20px; background-color: #ffffff;"> <!-- Inhalt --> </td> </tr> </table> ``
Für mehrspaltige Layouts werden Tabellen verschachtelt:
``html <table> <tr> <td width="50%">Linke Spalte</td> <td width="50%">Rechte Spalte</td> </tr> </table> ``
Auf Mobilgeräten müssen diese Spalten per Media Query auf 100 % Breite umschalten – was Outlook (das Media Queries nicht unterstützt) wieder als Problem aufwirft.
MJML: Modernes Framework für E-Mail-HTML
MJML (Mailjet Markup Language) ist ein Open-Source-Framework, das entwicklungsfreundlichere Syntax in kompatibles E-Mail-HTML kompiliert:
``xml <mjml> <mj-body> <mj-section> <mj-column> <mj-text>Hallo Welt</mj-text> </mj-column> </mj-section> </mj-body> </mjml> ``
MJML übernimmt automatisch Tabellen, Inline-CSS und Outlook-Fixes. Es ist der empfohlene Ansatz für Entwickler, die HTML-E-Mails manuell bauen. Alternativ bieten visuelle Builder wie Mailchimp, Beefree oder Stripo No-Code-Optionen.
Die häufigsten Outlook-Probleme
| Problem | Ursache | Lösung |
|---|---|---|
| Bilder vergrößern sich | Word-Renderer ignoriert width | width-Attribut UND Inline-Style setzen |
| Mehrspaltige Layouts brechen | Kein Flexbox | Verschachtelte Tabellen |
| Hintergrundbilder fehlen | background-image nicht unterstützt | VML-Hack (<!--[if mso]>) |
| Schriftarten nicht geladen | Keine Web-Font-Unterstützung | Web-Safe-Font als Fallback |
| Abstände falsch | padding teilweise ignoriert | cellpadding auf Tabelle + Inline-Style |
Conditional Comments (<!--[if mso]>) erlauben es, Outlook-spezifischen Code einzufügen:
``html <!--[if mso]> <table><tr><td>Dieser Code ist nur für Outlook</td></tr></table> <![endif]--> ``
Beispiele
- Einfache Text-E-Mail: Kein HTML, nur Plain Text – maximale Kompatibilität, nulles visuelles Design
- Minimale HTML-E-Mail: Header-Tabelle, Text, ein CTA-Button – funktioniert überall
- Volle Branded E-Mail: Mehrere Abschnitte, Hero-Bild, Mehrspalter, Footer-Navigation – benötigt Outlook-Fixes
In der Praxis
- E-Mail-Builder nutzen: Für die meisten Anwender sind Tools wie Mailchimp, Klaviyo oder Brevo der einfachste Weg zu kompatiblen HTML-E-Mails
- Keine externen CSS-Dateien: Alles inline oder im
<head>(nicht verlässlich) - Testen, testen, testen: Litmus oder Email on Acid für Vorschauen in 90+ Clients
- Maximale Breite 600 px: De-facto-Standard; mehr wird auf vielen Clients abgeschnitten
- Alle Bilder mit `alt`-Text: Bildblocking ist häufig, besonders in Unternehmens-Mailsystemen
Vergleich & Abgrenzung
HTML-E-Mail vs. Plain-Text-E-Mail: HTML ermöglicht visuelle Gestaltung und Tracking-Pixel. Plain-Text-E-Mails werden von manchen Lesern bevorzugt (persönlicher) und können in bestimmten Umgebungen höhere Öffnungsraten erzielen. Professionelle E-Mail-Tools senden stets einen Multipart/MIME-Body: HTML + Plain Text als Fallback.
Häufige Fragen (FAQ)
Muss ich wirklich mit Tabellen arbeiten? Für maximale Outlook-Kompatibilität ja. MJML abstrahiert das – wer MJML oder einen visuellen Builder nutzt, muss selbst keine Tabellen schreiben.
Warum funktioniert meine E-Mail im Browser, aber nicht in Outlook? Outlook nutzt Word als Rendering-Engine, der viele moderne CSS-Features nicht kennt. Das ist ein bekanntes Problem der Branche seit über 15 Jahren. Conditional Comments und Tabellenlayout sind die gängigen Workarounds.
Wie groß darf eine HTML-E-Mail sein? Gmail beschneidet E-Mails über 102 KB (komprimiert) und zeigt dann nur eine gekürzte Version mit einem „Gesamte Nachricht anzeigen"-Link. Ziel: unter 100 KB HTML-Codegröße.
Verwandte Einträge
- E-Mail-Design: Responsive, Dark Mode, Einschränkungen
- E-Mail-Marketing-Grundlagen
- Zustellbarkeit: SPF, DKIM, DMARC, Sender-Reputation
- E-Mail-Tools im Vergleich: Mailchimp, Klaviyo, ActiveCampaign, Brevo
- Transaktionale E-Mails: Bestätigung, Rechnung, Reminder
Weiterführend
- Email on Acid (2023): HTML Email Development Guide. emailonacid.com
- MJML (2023): MJML Documentation. mjml.io/documentation
- Litmus (2022): State of Email Report 2022. litmus.com
- Atkins, Tab / Etemad, Elika J. (2022): CSS Snapshots 2022. W3C.
- Schwarz, Torsten (2017): Leitfaden E-Mail-Marketing. marketing-BÖRSE GmbH.
