Dark Mode in HTML E-Mails: alles, was Sie wissen müssen.

Schon seit einigen Monaten existiert er und mehr und mehr nutzen ihn auch bei mobilen E-Mail Clients: den Dark Mode. Erfahren Sie, wie es funktioniert und wie Sie HTML-E-Mails erstellen, die für den Dark Mode geeignet sind.

Mit dem neuen iOS 13-Update erhielt Apple Mail ein Dark Mode und wird zum ersten großen E-Mail-Client, der CSS-Medienabfragen mit bevorzugten Farbschemata unterstützt. Dies bedeutet, dass Sie E-Mails jetzt speziell für dunkle und helle Themen entwerfen können. Natürlich ergeben sich aus jeder neuen Technologie auch neue Herausforderungen für die Marketeers. Natürlich gibt es auch wieder einiges für Outlook zu beachten. Wenn Sie Fragen zum Dark Mode in HTML E-Mails haben und Ihre E-Mail Templates für den Dark Mode optimieren möchten, unterstützen wir Sie gerne.

Was ist das prefers-color-scheme?
Die CSS-media query mit dem prefers-color-scheme wird verwendet, um festzustellen, ob der Benutzer ein helles oder ein dunkles Theme bevorzugt, sodass E-Mails speziell für beide entworfen werden können. Mit dem iOS 13-Update stieg der Support in den meisten beliebten E-Mail-Clients von 2,3% auf 38,4%! Ein großer Schritt dank der Popularität von Apple Mail. Überraschenderweise war Outlook der einzige E-Mail-Client, der dies vor Apple Mail unterstützte.

Funktionsweise des Dark Mode in gängigen E-Mail-Clients

Um die E-Mails dunkel zu machen, kehren E-Mail-Clients die Farben der E-Mails automatisch um. Bei normalen E-Mails funktioniert dies in allen E-Mail-Clients gut und konsistent. Für benutzerdefinierte HTML-E-Mails ist dies jedoch nicht so einfach. Hier sind die Unterschiede, die beim Umgang mit E-Mail-Renderings im Dark Mode beachtet werden müssen:
Dark Mode E-Mail Client Übersicht

Quelle für Client Popularität: Litmus 2019

HTML E-Mails für den Dark Mode optimieren

Achten Sie darauf, dass Apple Mail nur Farben invertiert, wenn die Hintergrundfarbe transparent oder nicht angegeben ist – weißer Hintergrund reicht nicht aus. Der einfachste Weg, um sicherzustellen, dass Ihre E-Mails richtig dargestellt werden, besteht darin, zu überprüfen, ob eine Hintergrundfarbe angegeben ist. Für mehr Kontrolle über das Design ist das „prefers-color-scheme“ nützlich.

Syntax (@media prefers-color-scheme):

Ein Designtipp: Vermeiden Sie reines Weiß #fff als Textfarbe. Das Kontrastverhältnis um 11,5 ist für den Haupttext ein guter Kompromiss zwischen nicht zu hell und nicht zu dunkel. Überprüfen Sie das Kontrastverhältnis hier: https://contrast-ratio.com oder verwenden Sie die Chrome dev tools.

Dark Mode Logo Verwendung

Umschalten zwischen hellem und dunklem Logo

Ein dunkler Text auf einem dunklen Hintergrund ist so gut wie unsichtbar. Genau das passiert mit einem Logo, wenn es in einem E-Mail-Client mit aktiviertem Dunkelmodus angezeigt wird.

Heutzutage hat ein typisches Logo normalerweise einen transparenten Hintergrund, ein buntes Symbol und einen dunkle Schriftzug. Sehen Sie das Problem? Da E-Mail-Clients die Bildfarben nicht invertieren, müssen Sie dies selbst tun.

Es gibt verschiedene Methoden um dies umzusetzen:
– Der einfachste Weg, dies zu beheben, besteht darin, das Logo mit einem weißen Hintergrund anstelle eines transparenten Hintergrunds zu speichern. Wir würden diesen Ansatz jedoch nicht empfehlen – Benutzer im Dark Mode werden nicht zufrieden sein
-Setzen Sie ein helles Logo auf einen dunklen Hintergrund, der Rest der E-Mail befindet sich auf weißem Hintergrund (so macht es Litmus)
– Machen Sie den Dark Mode zu Ihrer Standardeinstellung. Ähnlich wie Spotify, die ihre Apps nur im Dark Mode anbieten
– Fügen Sie sowohl helle als auch dunkle Versionen Ihres Logos hinzu und switchen Sie mit der prefers-color-scheme media query

Tipp: Einfach „display: none“ auf dem dunklen Logo funktioniert in allen modernen E-Mail-Clients einwandfrei, allerdings nicht in Outlook und Windows 10 Mail.

Um das Logo in E-Mails optimal darzustellen, kombinieren Sie die Methoden 1) und 4) von oben. Methode 1) deckt alle E-Mail-Clients ab, die den Dunkelmodus unterstützen, jedoch nicht das prefers-colors-scheme. Und Methode 4) deckt Apple Mail, Outlook unter macOS und Outlook.com ab, die beide unterstützen.

Anstatt das Logo auf einem weißen Hintergrund zu speichern, fügen Sie zB. einen 3 Pixel breiten, mit dem Hintergrund übereinstimmenden Rand hinzu und speichern es wie gewohnt auf einem transparenten Hintergrund.

Fazit

Der Dark Mode ist stark im Kommen und mehr und mehr Nutzer aktivieren ihn auf ihren Mobiltelefonen. Einerseits zum Sparen der Batterielaufzeit und zum anderen zum Schonen der Augen. Bislang unterstützen nur wenige Clients den magischen neuen „prefers-color-scheme“ Befehl. Daher ist kontinuierliches Testing und Optimieren Ihrer E-Mail Templates gefragt. Vor allem das Setzen der Hintergrundfarbe sowie die Logo Varianten sind hier wichtige Grundlagen zur Optimierung.

Falls Sie Unterstützung beim Optimieren Ihrer E-Mail Templates benötigen, stehen wir gerne zur Verfügung.

BREAKING NEWS

Jetzt auch Niederlassung in Österreich

ÖSTERREICH WEBSITE

About Us

performancewerk ist ein Team aus Spezialisten im Direktmarketing.
Wir haben uns auf performance orientierte Kampagnen spezialisiert. E-Mail Marketing, Lead Generierung, Telemarketing und Webservices. Wir bauen Ihnen performante und responsive designte Kampagnen.

vertrieb@performance-werk.de

KONTAKT

OFFICE FÜRTH / NÜRNBERG
Flößaustrasse 22
90763 Fürth
Deutschland

TEL +49 (911) 979569-200
FAX +49 (911) 979569-299

NACHRICHT HINTERLASSEN