E-Mail-Design: Responsive, Dark Mode, Einschränkungen

E-Mail-Design bezeichnet die visuelle und strukturelle Gestaltung von HTML-E-Mails unter den besonderen technischen Einschränkungen von E-Mail-Clients.

Rubrik: Online-Marketing & Content · Unterrubrik: E-Mail-Marketing · Niveau: Einsteiger

Was ist E-Mail-Design?

E-Mail-Design ist ein eigenes Fachgebiet, es folgt anderen Regeln als Webdesign, App-Design oder Print. Der Grund: E-Mail-Clients wie Outlook, Gmail oder Apple Mail rendern HTML und CSS sehr unterschiedlich. Was in einem Browser perfekt aussieht, kann in Outlook 2019 komplett zerbrechen. Wer E-Mails gestaltet, muss diese Einschränkungen kennen und mit ihnen arbeiten, nicht gegen sie.

Erklärung

Mobile-First-Design

Mehr als 60 % aller E-Mails werden auf einem Mobilgerät geöffnet (Litmus, 2022). Das Designprinzip „Mobile First" bedeutet: zuerst für den kleinsten Bildschirm entwerfen, dann für größere.

Praktische Konsequenzen:

• Einspaltig: Einspaltiges Layout funktioniert auf allen Bildschirmgrößen. Mehrspaltige Layouts erfordern responsives CSS.
• Große Schrift: Min. 16 px für Fließtext, 22 px für Überschriften, alles kleinere ist auf Mobilgeräten unleserlich
• Touch-freundliche Buttons: CTA-Buttons mindestens 44 × 44 px (Apple-Richtlinie für Touch-Targets), mit ausreichend Abstand
• Kurze Zeilen: 60–80 Zeichen pro Zeile für optimale Lesbarkeit

Responsive E-Mail-Design

Responsive E-Mails passen sich an die Bildschirmgröße an. Die zwei Hauptmethoden:

Media Queries (CSS) Erlauben unterschiedliche Stile je nach Bildschirmbreite. Funktionieren in Apple Mail, Gmail App (ab 2016), Outlook für Mac, aber nicht in Outlook für Windows (2007–2019).

Fluid Design Nutzung von prozentualen Breiten statt fixer Pixel-Werte. Funktioniert überall, gibt aber weniger Kontrolle.

Für maximale Kompatibilität empfehlen Experten wie Email on Acid (2023) eine Kombination beider Ansätze.

Dark Mode

Dark Mode ist in E-Mail-Clients weit verbreitet: Apple Mail, Gmail (Android/iOS), Outlook (neuere Versionen) und Samsung Mail unterstützen ihn. Das Problem: Jeder Client implementiert Dark Mode anders.

Drei Typen von Dark-Mode-Implementierung:

1. Vollständige Invertierung (selten): Alle Farben werden umgekehrt
2. Partielle Invertierung: Nur bestimmte Elemente werden angepasst
3. Intelligente Invertierung (Apple Mail): Erkennt helle Bereiche und dunkelt sie ab; dunkle Bereiche werden meistens nicht verändert

Design-Empfehlungen für Dark Mode:

• Transparente PNGs statt weißer JPEG-Hintergründe für Logos
• prefers-color-scheme-Media-Query nutzen, um eigene Dark-Mode-Farben zu definieren
• Text auf Bildern vermeiden (Text wird lesbar bleiben, Bild nicht unbedingt)
• Testtools wie Litmus oder Email on Acid nutzen, um Dark-Mode-Rendering zu überprüfen

Typografie in E-Mails

Web Fonts (Google Fonts, Adobe Fonts) werden von vielen E-Mail-Clients nicht unterstützt. Sicher sind sogenannte „Web-Safe Fonts":

• Arial, Helvetica (Sans-Serif)
• Georgia, Times New Roman (Serif)
• Courier New (Monospace)

Für modernes Design trotzdem Web Fonts einsetzen und als Fallback eine Web-Safe-Schrift definieren: ``css font-family: 'Inter', Arial, sans-serif; `` Clients, die Inter nicht laden können, zeigen Arial, akzeptabler Kompromiss.

Bilder in E-Mails

• Bildblocking: Viele E-Mail-Clients blockieren Bilder standardmäßig (besonders in Unternehmens-Umgebungen). Wichtige Inhalte nie nur als Bild kommunizieren.
• Alt-Text: Immer einen beschreibenden Alt-Text setzen, er erscheint, wenn das Bild nicht geladen wird
• Dateigrößen: Max. 1 MB gesamt (idealerweise unter 600 KB), größere Mails werden langsamer geladen und können als Spam markiert werden
• Bildbreite: Max. 600 px breit, dann auf 100 % skalieren für Mobilgeräte

Technische Einschränkungen im Überblick

Mehr zu technischen Details im Eintrag HTML-E-Mails: Technik, Tabellen, Outlook-Probleme.

Beispiele

• Minimalistische Newsletter (Substack, Beehiiv): Kein HTML-Design, reiner Text oder minimale Formatierung, oft höhere Öffnungsraten, da persönlicher wirkend
• Branded Newsletter (Apple, Airbnb): Aufwändiges visuelles Design mit konsistentem Brand-System
• MJML-basierte Designs: Strukturiertes Responsive-Design mit Framework-Unterstützung

In der Praxis

1. Mit 600 px Breite arbeiten, das ist der de-facto-Standard für E-Mail-Design
2. Immer testen: Litmus oder Email on Acid zeigen Vorschauen in 90+ E-Mail-Clients
3. Tabellen-basiertes Layout für Outlook-Kompatibilität (oder MJML nutzen)
4. Kontrastwerte nach WCAG 2.1 prüfen (min. 4,5:1 für normalen Text), mehr im Thema E-Mail-Barrierefreiheit

Vergleich & Abgrenzung

E-Mail-Design vs. Webdesign: Im Web sind JavaScript, CSS Grid, Video und moderne CSS-Features Standard. In E-Mails sind das alles entweder nicht unterstützt oder stark eingeschränkt. E-Mail-Design ist in gewisser Weise „Webdesign der 2000er Jahre", Table-Layouts und Inline-CSS sind keine Fehler, sondern Notwendigkeiten.

Häufige Fragen (FAQ)

Muss ich E-Mails für Outlook extra optimieren? Ja, wenn Outlook in der Zielgruppe relevant ist. Outlook (Windows) nutzt Word als Rendering-Engine, was moderne CSS-Features bricht. Tools wie MJML oder spezialisierte E-Mail-Builder helfen.

Wie teste ich, wie meine E-Mail in verschiedenen Clients aussieht? Tools wie Litmus, Email on Acid oder die Vorschauffunktion moderner E-Mail-Sender (Mailchimp, Klaviyo) zeigen Renderings in verschiedenen Clients.

Soll ich Text-E-Mails oder HTML-E-Mails senden? Beides hat Vor- und Nachteile. Plain-Text-E-Mails wirken persönlicher und haben oft höhere Öffnungsraten; HTML-E-Mails bieten mehr Gestaltungsmöglichkeiten und ermöglichen Tracking. Für viele Anwendungsfälle ist ein minimalistisches HTML-Design (wenige Bilder, viel Text) der beste Kompromiss.

Verwandte Einträge

• HTML-E-Mails: Technik, Tabellen, Outlook-Probleme
• E-Mail-Marketing-Grundlagen
• Newsletter-Struktur: Aufbau, Inhalte, Rhythmus
• A/B-Tests für E-Mails
• Zustellbarkeit: SPF, DKIM, DMARC, Sender-Reputation

Weiterführend

• Litmus (2022): State of Email Report 2022. litmus.com
• Email on Acid (2023): Email Design Best Practices. emailonacid.com
• Taxi for Email (2022): The Email Design Handbook. taxiforemail.com
• Schwarz, Torsten (2017): Leitfaden E-Mail-Marketing. marketing-BÖRSE GmbH.