HTML-E-Mail ist eine E-Mail-Nachricht, die mit HTML und CSS gestaltet ist und dadurch Bilder, Farben, Schriftarten und mehrspaltige Layouts anzeigen kann – im Unterschied zur reinen Textnachricht.
Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger Synonyme / Auch bekannt als: HTML-Newsletter, Rich-Text-E-Mail, gestaltete E-Mail
Was ist HTML-E-Mail?
Eine HTML-E-Mail verwendet die Auszeichnungssprache HTML (HyperText Markup Language), um Nachrichten visuell zu formatieren. Empfänger sehen dabei kein rohen Code, sondern ein gestaltetes Layout mit Texten, Bildern, Buttons und Farben. HTML-E-Mails sind der Standard im professionellen E-Mail-Marketing.
Erklärung
Warum HTML-E-Mails sich von Web-HTML unterscheiden
Die Erstellung von HTML-E-Mails folgt völlig anderen Regeln als das Bauen von Webseiten. Der Hauptgrund: E-Mail-Clients wie Outlook, Gmail oder Apple Mail besitzen eigene Rendering-Engines, die modernes CSS und HTML nur unvollständig oder gar nicht unterstützen. Was im Browser problemlos funktioniert, kann in einem E-Mail-Client komplett falsch dargestellt werden.
Tabellen-basiertes Layout
Das wichtigste Grundprinzip der HTML-E-Mail-Entwicklung ist das Tabellen-Layout. Während Webentwickler heute auf CSS Flexbox oder Grid setzen, verwenden E-Mail-Entwickler nach wie vor HTML-Tabellen (<table>, <tr>, <td>) als Grundgerüst. Nur so lässt sich ein konsistentes Layout über alle E-Mail-Clients hinweg sicherstellen.
Ein einfaches zweispaltiges Layout sieht beispielsweise so aus: Eine äußere Tabelle bildet den Container, zwei <td>-Elemente nebeneinander bilden die Spalten. Für Outlook-Kompatibilität sind zudem sogenannte MSO Conditional Comments notwendig – spezielle HTML-Kommentare, die nur von Outlook gelesen werden.
Inline-CSS
Ein weiteres Grundprinzip ist Inline-CSS. Viele E-Mail-Clients, allen voran Gmail, ignorieren CSS-Styles im <head>-Bereich oder in externen Stylesheets vollständig. Deshalb müssen Stile direkt in das style-Attribut jedes HTML-Elements geschrieben werden:
``html <td style="font-family: Arial, sans-serif; font-size: 16px; color: #333333; padding: 20px;"> ``
Sichere Schriftarten und Bilder
Web-Fonts wie Google Fonts werden nicht von allen E-Mail-Clients unterstützt. Sicher sind sogenannte System Fonts: Arial, Helvetica, Georgia, Times New Roman, Courier New. Bilder müssen extern gehostet und über absolute URLs eingebunden werden. ALT-Texte für Bilder sind Pflicht, da viele E-Mail-Clients Bilder standardmäßig blockieren.
Maximale Breite
HTML-E-Mails sollten eine maximale Breite von 600 bis 680 Pixeln haben. Diese Breite funktioniert in den meisten Desktop-E-Mail-Clients ohne horizontales Scrollen. Auf mobilen Geräten wird die E-Mail durch Responsive E-Mail Design an kleinere Bildschirme angepasst.
Doctype und Meta-Tags
Der korrekte Doctype für HTML-E-Mails lautet: ``html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``
Wichtige Meta-Tags sind der Charset (UTF-8) und das Viewport-Tag für mobile Darstellung.
Beispiele
- Transaktionsmails wie Bestellbestätigungen nutzen einfache, einspaltige HTML-E-Mails mit Logo, Bestelldetails in Tabellenform und einem CTA-Button.
- Newsletter eines Online-Shops verwenden ein zweispaltiges Layout für Produktkacheln, jeweils mit Bild, Produktname, Preis und Kaufen-Button.
- Event-Einladungen setzen auf ein großes Header-Bild, zentrierten Text und einen auffälligen Anmelden-Button.
- Willkommens-E-Mails von SaaS-Tools bestehen aus einem einfachen einspaltigem Layout mit persönlicher Ansprache und klarem nächstem Schritt.
- Re-Engagement-Mails nutzen minimalistisches HTML mit einem einzigen, großen CTA-Button, um die Ablenkung zu minimieren.
In der Praxis
Die meisten professionellen E-Mail-Marketing-Plattformen bieten Drag-and-Drop-Editoren, die gültigen HTML-Code im Hintergrund generieren:
- Mailchimp: Eigener Builder mit HTML-Export-Option für Entwickler
- Klaviyo: Unterstützt Custom HTML, besonders für E-Commerce beliebt
- ActiveCampaign: HTML-Editor mit Vorschau-Funktion
- Brevo (ehem. Sendinblue): Code-Editor mit Inline-CSS-Konverter
Für Entwickler empfiehlt sich der Einsatz des MJML Framework, das automatisch optimierten HTML-E-Mail-Code generiert. Tools wie Putsmail oder Litmus E-Mail Testing ermöglichen es, HTML-E-Mails vor dem Versand in verschiedenen Clients zu testen.
Vergleich & Abgrenzung
| HTML-E-Mail | Plaintext-E-Mail | |
|---|---|---|
| Gestaltung | Vollständiges Layout möglich | Nur Text, keine Formatierung |
| Kompatibilität | Abhängig vom E-Mail-Client | Universell kompatibel |
| Zustellbarkeit | Kann Spam-Filter auslösen | Gilt als vertrauenswürdiger |
| Einsatz | Newsletter, Marketing | Persönliche E-Mails, Transaktionen |
Viele Profis empfehlen, immer einen Plaintext-Fallback mitzusenden – das verbessert die Zustellbarkeit und ist gute Praxis für die Sender-Reputation & Deliverability.
Häufige Fragen (FAQ)
Wie setze ich HTML-E-Mails konkret um? Der einfachste Einstieg ist ein Drag-and-Drop-Builder in Mailchimp oder Brevo, der gültigen Code erzeugt. Für maßgeschneiderte Designs empfiehlt sich das MJML-Framework, das die komplexen Tabellen-Strukturen automatisch generiert. Fortgeschrittene Entwickler schreiben den HTML-Code von Hand und testen ihn mit Litmus oder Email on Acid.
Was sind typische Fehler bei HTML-E-Mails? Der häufigste Fehler ist die Verwendung moderner CSS-Eigenschaften wie Flexbox oder Grid, die in E-Mail-Clients nicht funktionieren. Weitere häufige Probleme: kein Inline-CSS (Gmail ignoriert Head-Styles), fehlende ALT-Texte für Bilder, zu große Bildgrößen, die die Ladezeit erhöhen, und keine Testphase vor dem Versand in verschiedenen Clients.
Weiterführend
- Litmus Blog: „The Ultimate Guide to Email HTML" (Litmus, 2024) – litmus.com/blog
- Campaign Monitor: „HTML Email Development Guide" (Campaign Monitor, 2023) – campaignmonitor.com/dev-resources
- Email on Acid: „HTML Email Coding Basics" (Email on Acid, 2024) – emailonacid.com/blog
