Email Design bezeichnet die visuelle und technische Gestaltung von HTML-E-Mails und Newslettern, die in verschiedenen E-Mail-Clients und auf unterschiedlichen Endgeräten konsistent dargestellt werden sollen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Newsletter Design, HTML-E-Mail Design, E-Mail-Template
Was ist Email Design?
E-Mail ist trotz Social Media und Messaging-Apps nach wie vor einer der effektivsten digitalen Marketingkanäle – und einer der komplexesten für Designer. Eine HTML-E-Mail sieht in Gmail, Outlook, Apple Mail und auf Mobilgeräten oft völlig unterschiedlich aus. Outlook rendert keine CSS-Flexbox; viele Clients blockieren standardmäßig Bilder; Dark Mode kann Farben invertieren. Email Design ist die Disziplin, die visuelle Gestaltung, technische Eigenheiten der E-Mail-Clients und Nutzungsverhalten auf Mobilgeräten in Einklang bringt.
Erklärung
E-Mail-Clients verwenden unterschiedliche Rendering-Engines, was Email Design technisch anspruchsvoller macht als Webdesign:
Layoutprinzipien: Da moderne CSS-Layout-Techniken (Flexbox, CSS Grid) von Outlook nicht unterstützt werden, ist tabellenbasiertes Layout (HTML <table>) für E-Mails noch immer der zuverlässigste Ansatz für maximale Client-Kompatibilität. Neuere Frameworks wie MJML abstrahieren diese Komplexität.
E-Mail-Breite: Desktop-E-Mails werden typischerweise auf 600–700 Pixel Breite ausgelegt. Auf mobilen Geräten wird auf 320–480 Pixel responsiv angepasst.
Typografie in E-Mails: Sichere Web-Schriften für E-Mails sind begrenzt: Arial, Georgia, Times New Roman, Helvetica funktionieren zuverlässig. Selbst gehostete Webfonts werden nur von wenigen Clients unterstützt. Google Fonts über <link> im <head> werden von Gmail auf Desktop unterstützt, aber nicht von Outlook.
Bilder in E-Mails: Bilder sollten gehostet (auf einem Server) und mit absolutem URL verlinkt sein. Immer ein alt-Attribut verwenden, da viele Clients Bilder standardmäßig blockieren. Wichtige Informationen dürfen nie ausschließlich als Bild kommuniziert werden.
Dark Mode in E-Mails: Apple Mail und einige andere Clients invertieren Farben im Dark Mode automatisch, wenn keine expliziten Anweisungen vorhanden sind. Farben müssen mit @media (prefers-color-scheme: dark) explizit gesteuert werden.
Call-to-Action in E-Mails: Buttons in E-Mails sollten als HTML-Buttons (nicht als Bild-Buttons) umgesetzt sein, damit sie auch bei deaktivierten Bildern sichtbar und klickbar sind. Mindestgröße: 44 × 44 Pixel (Apple-Empfehlung für Touch-Targets).
Preheader Text: Der Preheader ist der kurze Text, der nach dem Betreff in E-Mail-Vorschauen angezeigt wird. Er ist nicht sichtbar im E-Mail-Body, aber im Posteingang – ein wichtiges Designelement, das die Öffnungsrate beeinflusst.
Beispiele
- Wöchentlicher Newsletter: Klares Header-Bild mit Logo, Betreff-Echowort als Headline, drei Teaser-Artikel mit Thumbnail, Kurzbeschreibung und CTA-Button, Footer mit Abmeldelink.
- Transaktionale E-Mail (Bestellbestätigung): Klare, strukturierte Auflistung der bestellten Artikel, Gesamtbetrag, Lieferadresse und CTA „Bestellung verfolgen" – funktional vor ästhetisch.
- Willkommens-E-Mail: Personalisierte Begrüßung, Erklärung des Mehrwerts des Newsletters, ein klarer Einstiegs-CTA und die wichtigsten Ressourcen auf einen Blick.
- Drip Campaign: Eine Serie von drei E-Mails über eine Woche – E-Mail 1 stellt vor, E-Mail 2 liefert Mehrwert (How-To), E-Mail 3 enthält ein Angebot. Jede E-Mail hat dasselbe visuelle System.
- Re-Engagement-E-Mail: An inaktive Abonnentinnen und Abonnenten gerichtet, mit einem überraschenden Betreff, einem ehrlichen Text und zwei CTAs: „Ich bin noch dabei!" und „Abmelden (kein Problem)".
In der Praxis
E-Mail-Templates werden in spezialisierten Tools erstellt: Mailchimp, HubSpot, Klaviyo und Campaign Monitor bieten Drag-and-Drop-Editoren; für vollständige Kontrolle wird in MJML (eine auf E-Mails spezialisierte Markup Language) oder direkt in HTML/Inline-CSS entwickelt. Testen ist in Email Design unerlässlich: Litmus und Email on Acid erlauben das Testen in über 90 E-Mail-Clients und Geräten. Kennzahlen für die Performance: Öffnungsrate, Klickrate (CTR), Konversionsrate, Abmelderate und Spam-Beschwerden.
Vergleich & Abgrenzung
Email Design vs. Webdesign: Im Webdesign gibt es einen de-facto-Standard-Browser (Chrome); in E-Mails gibt es Dutzende verschiedene Clients mit inkonsistenter CSS-Unterstützung. E-Mails sind technisch restriktiver. HTML-E-Mail vs. Plain-Text-E-Mail: Plain-Text-E-Mails (nur Text, kein HTML) wirken persönlicher und werden nicht von Spamfiltern geblockt; HTML-E-Mails ermöglichen Markendarstellung, Bilder und CTAs. Viele E-Mail-Strategien nutzen beide Formate für unterschiedliche Zielgruppen oder Anlässe. Newsletter vs. Transaktionale E-Mail: Newsletter sind marketing- und redaktionell orientiert; transaktionale E-Mails (Bestellbestätigungen, Passwort-Reset) sind funktional und werden bei Bedarf ausgelöst.
Häufige Fragen (FAQ)
Warum sieht meine E-Mail in Outlook anders aus als geplant? Outlook nutzt die Word-Rendering-Engine für HTML-E-Mails, nicht WebKit oder Gecko. Diese Engine unterstützt kein CSS-Flexbox, kein CSS-Grid, keine CSS-Animationen und viele andere moderne Webstandards. Tabellen-basiertes Layout und Inline-CSS sind die zuverlässigsten Lösungen für Outlook-Kompatibilität.
Wie groß darf eine HTML-E-Mail sein? Gmail schneidet E-Mails ab einer Gesamtgröße von 102 KB ab und zeigt nur einen Teil des HTML an (mit einem „Komplette Nachricht anzeigen"-Link). Bilder in der E-Mail zählen dabei nicht, da sie extern geladen werden. Ein schlankes HTML ohne redundanten Code ist daher wichtig.
Verwandte Einträge
Weiterführend
- Ford, N. (2015): The Sendgrid Email Design Reference. Sendgrid (Online-Ressource).
- Litmus (2024): State of Email Report. litmus.com/state-of-email.
- Cerejo, L. (2012): Responsive Email Design. A List Apart (Artikel, alist apart.com).
