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.