print logo

Dark-Mode-Guide für E-Mails

Tipps zur Anpassung von E-Mails für Dark Mode, inklusive CSS-Tricks und Tests für verschiedene E-Mail-Clients zur Optimierung der Darstellung.
15.08.24
© freepik / rawpixel
 

- 35 % der E-Mail-Öffnungen 2022 waren im Dark Mode
- Unterschiedliche E-Mail-Clients handhaben Dark Mode sehr variabel
- Testen Sie Ihre E-Mails regelmäßig für Dark Mode-Kompatibilität

Der Artikel von litmus „Ultimate Guide to Dark Mode“ bietet einen umfassenden Überblick darüber, wie Dark Mode in E-Mails implementiert werden kann und welche Herausforderungen dabei auftreten können. Er deckt verschiedene Aspekte von Dark Mode ab, darunter die technische Umsetzung, die unterschiedlichen Farbschemata der E-Mail-Clients und Best Practices für eine optimale Darstellung.

Bedeutung und Herausforderungen von Dark Mode
Dark Mode, eine beliebte Funktion, die 2018 in Apples Desktop-E-Mail-Client eingeführt wurde, hat sich schnell auf weitere Plattformen ausgeweitet. Er reduziert die Augenbelastung bei schwachem Licht und spart Akku. Im Jahr 2022 nutzten etwa 35 % der E-Mail-Empfänger Dark Mode. Trotz seiner Beliebtheit stellt Dark Mode E-Mail-Marketer vor Herausforderungen, da die Darstellung von E-Mails in Dark Mode von E-Mail-Clients unterschiedlich gehandhabt wird. Manche Clients, wie Apple Mail, zeigen E-Mails unverändert, während andere, wie Gmail oder Outlook, Farben invertieren, was zu unvorhersehbaren Ergebnissen führen kann.

Techniken zur Optimierung von Dark Mode
E-Mail-Marketer können verschiedene Methoden verwenden, um ihre E-Mails für Dark Mode anzupassen. Die Verwendung von CSS-Medienabfragen wie @media (prefers-color-scheme: dark) ermöglicht es, spezifische Dark Mode-Stile zu definieren, die in unterstützten Clients wie Apple Mail und Outlook angewendet werden. Für Clients wie Outlook App oder Gmail können spezifische Hacks wie das Hinzufügen von data-ogsc-Attributen zur Verbesserung der Darstellung verwendet werden. Ein wichtiger Schritt ist die Anwendung von Meta-Tags im <head>-Tag der E-Mail, um sicherzustellen, dass Dark Mode aktiviert wird, wenn er von den Empfängern genutzt wird.

Best Practices und Werkzeuge
Zur Gestaltung von E-Mails im Dark Mode sollten Marketer auf einige Best Practices achten. Dazu gehört die Optimierung von Logos und Bildern für unterschiedliche Farbschemata, die Implementierung von speziellen Dark Mode-Stilen und regelmäßige Tests mit Tools, um die Kompatibilität mit verschiedenen E-Mail-Clients sicherzustellen. Die Nutzung von vorab getesteten Code-Snippets und Tools, die von der E-Mail-Community empfohlen werden, kann ebenfalls helfen, die Herausforderungen von Dark Mode zu meistern und die Lesbarkeit sowie Benutzerfreundlichkeit zu gewährleisten.