HTML-E-Mail ist eine Mail, die statt reinem Text ein gestaltetes Layout mit Bildern, Buttons und Typografie zeigt — gebaut mit einer eigenen, eingefrorenen Mini-Sprache, die wenig mit modernem Web-HTML zu tun hat.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Fortgeschritten Synonyme / Auch bekannt als: HTML-Newsletter, Rich-Mail, E-Mail-Templates
Was sind HTML-E-Mail Grundlagen?
HTML-E-Mail Grundlagen sind die Regeln und Konventionen, nach denen eine gestaltete E-Mail aufgebaut sein muss, damit sie in über 50 verschiedenen Mail-Clients (Gmail, Outlook, Apple Mail, Yahoo, Thunderbird, GMX und mehr) zuverlässig dargestellt wird. Der Standard wirkt wie eingefroren in den späten 1990ern, weil viele Clients (allen voran Outlook auf Windows) modernes CSS schlicht ignorieren.
Erklärung
Wer aus dem Web-Frontend kommt, ist von HTML-E-Mail meist überrascht: Flexbox? Grid? Funktioniert nicht. Externe Stylesheets? Werden oft ignoriert. Web Fonts? Outlook fällt zurück auf Times New Roman. Stattdessen gelten diese Grundregeln:
- Table-based Layout: Strukturen werden mit verschachtelten
<table>-Elementen gebaut, weil Outlook (Word-Renderer) das einzige verlässlich versteht. - Inline-CSS: Alle Styles direkt am Element (
<td style="...">), weil viele Clients<style>-Blöcke entfernen. - Feste Breite: 600 Pixel ist Standard, weil das die Lesebreite in den meisten Vorschau-Fenstern abdeckt.
- Bilder mit Alt-Text und fester Breite: Image-Blocking ist bei vielen Empfängern Standard, ohne Alt-Text fehlt dann jede Aussage.
- Bulletproof Buttons: CTA-Buttons werden als Tabellenzelle mit Hintergrundfarbe gebaut, nicht als CSS-Button — sonst sehen sie in Outlook wie blauer Text aus.
- MSO-Conditional Comments: Für Outlook-spezifische Workarounds (
<!--[if mso]>). - Mobile Responsive: Media Queries funktionieren in den meisten Clients, aber nicht in Outlook Windows — deshalb Fluid Hybrid Layouts.
Wer das nicht von Hand bauen will, nutzt einen Framework-Layer wie MJML (markup, das in robustes Table-HTML kompiliert), Foundation for Emails oder Maizzle. Mail-Marketing-Tools wie Mailchimp, HubSpot oder Brevo bringen eigene Drag-and-Drop-Editoren mit, die im Hintergrund sauberes E-Mail-HTML erzeugen.
Tools wie Litmus oder Email on Acid rendern eine Mail in dutzenden Clients gleichzeitig — Pflicht vor jedem Versand an größere Listen.
Beispiele
- Beispiel 1: Ein Hero-Banner als
<table>mit Hintergrundbild, darunter Headline in einer eigenen Tabelle, dann Body-Text in einer weiteren Tabelle — alle mitwidth=\"600\"undalign=\"center\". - Beispiel 2: Ein CTA-Button gebaut als
<table>mitbgcolor=\"#E40037\"und Padding, Link um die ganze Zelle — funktioniert in Outlook wie in Gmail. - Beispiel 3: Ein Newsletter in MJML mit 100 Zeilen Markup, der nach Kompilierung 800 Zeilen Table-HTML wird — Output identisch zur handgepflegten Variante, Pflege deutlich einfacher.
- Beispiel 4: Mobile-Variante mit Media Query: Spalten kollabieren auf 100 Prozent Breite, Schrift wird größer — funktioniert in Apple Mail und Gmail, scheitert in Outlook (dort gilt Desktop-Layout auch mobil).
- Beispiel 5: Dark-Mode-Anpassung mit
@media (prefers-color-scheme: dark)— wird nur in einigen Clients respektiert, viele invertieren Bilder eigenmächtig. - Beispiel 6: Plaintext-Alternative als zweiter MIME-Teil, weil viele Spam-Filter HTML-only-Mails strenger bewerten.
In der Praxis
Eine HTML-E-Mail wird selten von Grund auf neu gebaut — Templates werden wiederverwendet und angepasst. Wer einen Newsletter aufsetzt, beginnt mit einem Master-Template (Header, Footer, Buttons, Typografie) und füllt nur die Inhalts-Module. Test-Versand an ein Litmus- oder Email-on-Acid-Set ist Pflicht. Vor jeder größeren Aussendung mindestens drei Endgeräte selbst testen: iPhone (Apple Mail), Android (Gmail), Desktop (Outlook). Die DSGVO-Pflichten — Impressum, Abmelde-Link, Datenschutzhinweis — gehören in den Footer. Bildgrößen sollten unter 1 MB bleiben, Gesamt-Datei-Größe unter 100 KB HTML — sonst clipped Gmail die Mail.
Vergleich & Abgrenzung
| Merkmal | HTML-E-Mail | Web-HTML |
|---|---|---|
| Layout | Tables | Flexbox / Grid |
| CSS | Inline, nur Subset | Externes Stylesheet, modernes CSS |
| JavaScript | Nicht erlaubt | Voll unterstützt |
| Schriftarten | Web-safe Fonts (Fallback) | Web Fonts überall |
| Test-Aufwand | Hoch (viele Clients) | Niedrig (Browser eng) |
HTML-E-Mail ist keine schlechte Version von Web-HTML, sondern eine eigene Disziplin mit eigenen Regeln, eigener Test-Infrastruktur und eigenen Frameworks.
Häufige Fragen (FAQ)
Warum ist Outlook so schwierig? Outlook auf Windows nutzt seit Outlook 2007 den Render-Engine von Microsoft Word — nicht den von Internet Explorer oder Edge. Dadurch fehlen viele moderne CSS-Eigenschaften (Flexbox, Grid, animation), und Tables sind das einzige verlässliche Layout-Werkzeug.
Lohnt sich ein eigenes Framework wie MJML? Ja, sobald regelmäßig Newsletter versendet werden. MJML reduziert den Code-Aufwand auf ein Bruchteil, kompiliert in robustes Table-HTML und vermeidet die häufigsten Outlook-Fallen. Für Einzel-Mails reicht oft der Editor des Mail-Tools.
Weiterführend
- Litmus (2024): The Ultimate Guide to HTML Email Development. litmus.com/blog
- MJML Project (2024): MJML Documentation. mjml.io/documentation
- Campaign Monitor (2023): The Complete Guide to CSS Support in Email. campaignmonitor.com/css
