Der ultimative Dark Mode Guide für Email Marketer

Dark Mode for Email

Immer mehr Apps und Anwendungen ermöglichen es ihren Usern, im coolen, stylischen Dark Mode zu surfen. Doch die Verwendung des Dark Modes beeinflusst auch die Email-Anzeige: Die gewohnte Farbgebung des klassischen Light Modes wird umgekehrt und stattdessen weiße Schrift auf schwarzem Hintergrund verwendet. Vor allem bei HTML-Emails ist die Darstellung häufig nicht wie gewünscht. Dies fügt für Email Marketer und Programmierer eine weitere Ebene der Komplexität in Bezug auf Email Design und Template Programmierung hinzu, um für Newsletter-Abonnenten das beste Ergebnis sowohl im Light- als auch im Dark Mode zu garantieren. In diesem Artikel haben wir deshalb alles Wissenswerte zum Dark Mode gebündelt und unsere Learnings sowie Tipps & Tricks festgehalten.

Julia

29.03.2021

Wissen

Der ultimative Dark Mode Guide für Email Marketer

Noch ein letztes Mal vor dem Einschlafen durch Instagram scrollen, News-Seiten scannen, Twitter oder das Email-Postfach checken…Wir alle wissen: Das ist nicht gut für Augen und Schlaf. Aber wir tun es trotzdem. 

Die good news? Der digitale Designtrend Dark Mode nimmt sich der Sache an: Er vereinfacht die Bildschirmroutine in dunkler Umgebung und macht sie weniger anstrengend für die Augen. Kein Wunder also, dass der Dark Mode sich zunehmend verbreitet – und unter Email-Marketern, -Entwicklern und -Designern oft diskutiert wird. Denn ganz ohne ist der Designtrend nicht. Es braucht schon etwas Know how, um ihn richtig zu nutzen und sicherzustellen, dass Email-Abonnenten das beste Dark-Mode-Ergebnis erhalten. Lohnt es sich also, Mailing-Kampagnen extra für Dark Mode  zu optimieren? Welche Probleme können dabei auftreten? Und welche Tipps können wir anderen Email-Marketern für den Umgang mit dem Thema Dark Mode mit auf den Weg geben?

In diesem Artikel haben wir alles Wissenswerte zum Dark Mode gebündelt und unsere Learnings aufgeschrieben.

Wir erklären:

  • was genau der Dark Mode ist und wie er funktioniert,
  • welche Email-Clients den Dark Mode unterstützen und wie sie ihn jeweils ausspielen,
  • was zu tun ist, um für Email-Abonnenten das beste Dark-Mode-Ergebnis zu erzielen. 
"Come to the dark side, we have cookies"

Inhalt

  1. Was ist Dark Mode und wie funktioniert er?

  2. Vor – und Nachteile des Dark Modes

  3. Welche Email-Clients unterstützen den Dark Mode?

  4. Email Rendering im Dark Mode

  5. Customized HMTL-Emails für Dark Mode

  6. Tipps für das beste Dark-Mode-Ergebnis

  7. Fazit: Dark Mode lohnt sich

1. Was ist der Dark Mode und wie funktioniert er?

Grundsätzlich handelt es sich beim Dark Mode um einen Anzeigemodus mit umgekehrtem Farbschema: helle Typografie und andere Elemente werden also auf dunklem Hintergrund angezeigt. Oder ganz einfach gesagt: Es wird weiße Schrift auf schwarzem Hintergrund verwendet. Der Dark Mode kehrt also die gewohnte Farbgebung um. Nichts anderes machen auch die Email-Clients im Dark Mode. Bei normalen Emails funktioniert dies in allen Clients gut und konsistent, doch für benutzerdefinierte HTML-Emails leider nicht.

Funktionsweise des Dark Modes in HTML-Emails

Wenn Hintergrund und Schriftfarbe einer Email in den Dark Mode wechseln, passiert folgendes: Jede beliebige Farbe oder Hintergrundfarbe mit einer CSSEigenschaft von background, color, background-color oder einem HTML-Attribut von bgcolor oder color wird geprüft. Sobald eine Text- oder Hintergrundfarbe definiert ist, zielt der Dark Mode über interne oder Inline-Styles auf diese HTML-Attribute und CSS-Eigenschaften ab. Er passt sie dann an, um sie heller oder dunkler zu machen. 

Nicht immer ist das Ergebnis dabei wie gewünscht.

 

E-Mail Darstellung im Dark Mode

2. Vor- und Nachteile des Dark Modes

Zwei positive Effekte werden immer wieder genannt, wenn der Dark Mode zum Einsatz kommen soll – was ist dran?

Schont die Verwendung des Dark Modes tatsächlich den Akku?

Pauschal lässt sich nicht bestätigen, dass im Dark Mode ein geringerer Akkuverbrauch stattfindet. Denn: Der Dark Mode hat nur auf bestimmte Bildschirm-Technologien einen positiven Effekt, und zwar auf sog. OLEDs. Die Abkürzung OLED steht für organic light-emitting diode (organische Leuchtdiode). Bei dieser Technologie leuchtet jeder Pixel für sich, sprich: Alle Stellen auf dem Bildschirm, die dunkel sind, verbrauchen keine oder nur sehr wenig Energie. Dadurch wirkt sich der Dark Mode hier positiv auf die Akkulaufzeit aus. Allerdings finden sich OLED-Bildschirme aufgrund höherer Kosten bislang vor allem in Premium Smartphones. Die meisten günstigeren Modelle verwenden LC-Displays. Bei ihnen strahlt im Hintergrund immer Licht. Hier hat der Dark Mode also keine Vorteile in Bezug auf  Energieeinsparung.

 

Hat der Dark Mode wirklich einen positiven Effekt auf die Augengesundheit?

Wird das Smartphone in dunkler Umgebung genutzt, also abends oder nachts, kann der Dark Mode tatsächlich angenehmer wirken. Das dunkle Design blendet weniger und das Lesen erscheint nicht so anstrengend für die Augen. Wissenschaftlich belegt ist der positive Effekt im Vergleich zum Light Mode bislang allerdings noch nicht. Und: Wer allgemein viel Zeit vor dem Bildschirm verbringt, dem hilft auch der Dark Mode nicht. Einen viel entscheidenderen Einfluss auf die Augengesundheit hat hier die Nähe zum Bildschirm, die langfristig sogar zu Kurzsichtigkeit führen kann. Hier noch einmal die wesentlichen Vor- und Nachteile zur Verwendung des Dark Modes zusammengefasst:

 

Gründe für den Dark Mode:

  • heller Text auf dunklem Untergrund ist in dunkler Umgebung einfacher zu lesen, da angenehmer für die Augen 
  • reduziert die Bildschirmhelligkeit und schont so die Akkulaufzeit (gilt jedoch nur für OLEDs)
  • “neues” und “cooles” Design, das schlicht, elegant und zeitlos wirkt

 

Gründe gegen den Dark Mode:

  • nicht alle Email-Clients unterstützen den Dark Mode und stellen ihn unterschiedlich dar
  • keine Studie, die einen positiven Effekt auf die Sehfähigkeit belegt
  • lange, textlastige E-Mails können im Dark Mode schwieriger zu lesen sein
  • überwiegende Mehrheit der Emails ist nicht für Dark Mode konzipiert und können daher nicht korrekt dargestellt werden

3. Welche Email-Clients unterstützen den Dark Mode?

Immer mehr Apps und Anwendungen bieten die Möglichkeit, den Dark Mode zu verwenden. Die folgenden Email-Clients unterstützen den Dark Mode:

Auflistung: Clients, die den Dark Mode unterstützen

4. Email Rendering im Dark Mode

Aber: Nur, weil diese Clients den Dark Mode unterstützen, heißt das nicht, dass sie den Dark Mode auf Emails auch auf die gleiche Art und Weise anwenden. Was das bedeutet? Während eine Email in einem Client vielleicht schön ausgespielt wird, sieht sie in einem anderen wiederum weniger gelungen aus. Der Dark Mode fügt nun für Email Marketer und Programmierer eine weitere Ebene der Komplexität hinzu, was das Email Design sowie die Template Programmierung angeht und letztendlich die korrekte Ausspielung in allen Clients.

Wie wenden Email-Clients den Dark Mode auf Emails an?

Aktuell gibt es 3 verschiedene Arten, wie Email Clients den Dark Mode auf Emails anwenden. 

1. Keine Farbänderung

Ja, richtig gehört! Bei einigen Email-Clients kann die Benutzeroberfläche zu Dark Mode geändert werden, ohne dass dies einen Einfluss darauf hat, wie die HTML-Email gerendert wird. Unabhängig davon, ob die Anwendung auf Light- oder Dark Mode eingestellt ist, wird die Email also genau gleich aussehen.

Das ist z.B. bei Apple Mail, iPhone, iPad oder Hey.com der Fall. Vorausgesetzt natürlich, es sind im Code keine speziellen Definitionen enthalten, die den Dark Mode triggern. Dazu an späterer Stelle mehr.

Keine Farbänderung

2. Partial Color Invert (teilweise Farbumkehrung)

Es gibt jedoch einige Email-Clients, die automatisch ihren Standard Dark Mode auf HTML-Emails anwenden, und zwar, wenn keine konkreten Definitionen und Tags im Code für die Anzeige im Dark Mode hinterlegt sind. Hierbei werden nur Bereiche mit hellem Hintergrund erkannt und umgekehrt:  Der helle Hintergrund erscheint also dunkel, während der dunkle Text hell wird. Bereiche mit bereits dunklem Hintergrund bleiben dagegen bestehen. Das führt zu einem vollständig dunklen Modus. Diese Standard-Umkehrung kann jedoch mit einem Customized Dark Mode überschrieben werden. Die partielle Farbumkehrung wird übrigens beispielsweise bei Outlook.com angewendet.

Litmus light mode vs Dark Mode E-Mail Darstellung

3. Full Color Invert (Vollfarbumkehrung)

Bei der sog. Vollfarbumkehrung wird die Email durch den Dark Mode am drastischsten verändert: Es werden nicht nur die Bereiche mit hellem Hintergrund umgekehrt, sondern die  Vollfarbumkehrung wirkt sich auch auf dunkle Hintergründe aus. 

Dies ist besonders ärgerlich, wenn das Email Design bereits ursprünglich einen dunklen Hintergrund hat, da dieser nun ironischerweise hell wird. Dies ist z.B. bei der Gmail-App (iOS13) und Outlook 2019 (Windows) der Fall.

Im folgenden Beispiel ist zu erkennen, wie die hellen Hintergründe in dunkle Versionen der ursprünglichen Farben umgewandelt werden und Bereiche, die vorher einen dunklen Hintergrund mit hellem Text hatten, nun hell mit dunklem Text erscheinen.

Litmus Dark Mode

Hinzu kommt, dass bei der Vollfarbumkehrung nicht nur die Email am radikalsten verändert wird, sondern die Clients, die diese Logik verwenden, derzeit kein Dark Mode Targeting zulassen.

5. Customized HTML-Emails für Dark Mode

Was können Email-Marketer also tun, um eine unversehrte Anzeige der eigenen Newsletter auch im Dark Mode zu garantieren und einer Farb-Umkehrung entsprechend dem Standard-Farbschemata der Email-Clients zu umgehen?  Bislang hilft da ausschließlich ein eigens programmiertes Template mit Definitionen für Dark Mode.

Das Beispiel zeigt zwei speziell auf den Light- sowie Dark Mode zugeschnittene HTML Templates, die für beide Themes optimiert sind und in beiden Modes gut dargestellt werden.

Litmus Vollfarbumkehrung

Dark Mode Styles – Email-Hacks für Dark Mode

Hier zeigen wir  einige Schritte auf für Customized Dark Mode Styles in HTML-Emails, sog. „Hacks“ oder Targeting Methoden für Dark Mode, basierend auf Meta Tags und CSS Media Queries. Mit den Definitionen für eigene Dark Mode Styles kann einer automatischen Änderung nach dem Standard Farbschemata entgegengewirkt werden. 

Hierfür gibt es aktuell 2 Methoden auf Basis von Meta Tags und CSS Media Queries:

Option A: prefers-color-scheme 

Generell können CSS Media Queries (@media) genutzt werden, um beispielsweise unterschiedliche Bildschirmgrößen, Auflösungen oder Browser eines Benutzers zu erkennen, sodass Emails an verschiedene Geräte angepasst werden können. Die CSS Media Query mit dem prefers-color-scheme 

@media (prefers-color-scheme: dark):

im Speziellen wird verwendet, um festzustellen, ob der Benutzer Light- oder Dark Mode verwendet, sodass Emails speziell für beide Themes entworfen werden können.

Mit Hilfe der Dark Mode Media Queries können beispielsweise:

  • die Farben von Texten, Hyperlinks und Hintergründen im bzw. für den Dark Mode verändert werden,
  • bestimmte Teile einer Email ein- oder ausgeblendet werden, je nachdem, ob der Empfänger den Dark Mode verwendet,
  • Bilder für eine optimale Anzeige in allen Email-Clients ausgetauscht oder angepasst werden.

Um Dark Mode Queries zu nutzen, wird folgender Meta-Tag in der Email eingefügt:

Meta Tag:

Meta Tag

So sieht das Ganze dann im Beispiel von CSS aus:

CSS Meta Tag

Example CSS :

CSS Beispiel

Hier gibt es also spezielle Inhalte, die nur jeweils im Light- bzw. Dark Mode ein- oder ausgeblendet werden.

Option B: [data-ogsc]

Diese Methode funktioniert genau wie bereits beschrieben, nur dass sie gezielt auf die Anwendung für Outlook ausgerichtet ist. Hierfür werden die bereits angewendeten @media (prefers-color-scheme: dark) Styles dupliziert und einfach die entsprechenden [data-ogsc] Präfixe zu jeder CSS-Regel hinzugefügt.

Example CSS – Outlook Support:

CSS Beispiel Outlook Support

So sieht dann die komplette Einbindung im HTML-Body aus, in diesem Beispiel für die unterschiedliche Anzeige des Logos, je nach Light -oder Dark Mode:

Komplette Einbindung in HTML-Body

Das Problem: Es gibt keine einheitliche Unterstützung für diese Targeting Methoden!

Die folgende Tabelle zeigt, nach welchem Schema die verschiedenen Email-Clients die HTML-Emails im Dark Mode anwenden.

Tabelle: HTML-Behandlung im Dark Mode

6. Was ist zu tun, um für Email-Abonnenten das beste Dark-Mode-Ergebnis zu erzielen? Unsere Tipps:

Die Anwendung der beschriebenen Methoden für gelungene Emails im Light- als auch im Dark-Mode sind noch ziemlich neu und zudem zeitaufwendig. Und trotz der ganzen Mühe ist nicht hundertprozentig sicher, dass Emails in beiden Themes, auf allen Geräten und in allen Email-Clients wie gewünscht dargestellt werden. Deshalb sind hier unsere wichtigsten Tipps, wie Emails auch ohne „Hacks“ möglichst gelungen im Dark Mode dargestellt werden!

  1. Bilder als PNGS mit transparentem Hintergrund einsetzen: So können unschöne weiße Ränder im Dark Mode vermieden werden.
  2. Bilder für Light UND Dark Mode optimieren, z.B. indem Bildern mit dunklem Hintergrund, die im Dark Mode quasi „verschwinden“ würden, ein heller Schlagschatten hinzugefügt wird.
  3. Hintergrundfarben nicht mit Bildern vermischen: Während die Hintergrundfarbe nämlich im Dark Mode verändert wird, bleibt die Farbe des Bildes gleich. Es kommt also zu unterschiedlicher Darstellung und unschönen Farb-Absätzen bzw. Übergängen.

Grundsätzlich wichtig ist die Frage, welche Zielgruppe adressiert werden soll. Sind unter den Abonnenten vor allem junge Leute oder Entwickler? Dann ist die Wahrscheinlichkeit hoch, dass ein großer Teil Emails im Dark Mode lesen wird und es lohnt sich die Mühe, den Dark Mode einzuplanen.  Anders sieht das bei älterem, wenig technikaffinem Publikum aus. Die Wahrscheinlichkeit ist hier höher, dass Emails im klassischen Light Mode gelesen werden. 

Und zu guter Letzt nicht vergessen: Testen, Testen und… Testen! Mit speziellen Tools wie etwa Litmus oder Email on Acid kann jede Email vor dem Versand überprüft werden, auch im Hinblick auf die Darstellung im Dark Mode.

 

Hier nochmal gesammelt: alle Pros für den Dark Mode:

  • heller Text auf dunklem Untergrund ist in dunkler Umgebung einfacher zu lesen, da angenehmer für die Augen wodurch die Augen geschont werden
  • reduziert die Bildschirmhelligkeit und schont so die Akkulaufzeit (gilt jedoch nur für OLEDs)
  • “neues” und “cooles” Design, das schlicht, elegant und zeitlos wirkt

und alle Cons:

  • nicht alle Email-Clients unterstützen den Dark Mode und stellen ihn unterschiedlich dar
  • keine Studie, die einen positiven Effekt auf die Sehfähigkeit belegt
  • lange, textlastige E-Mails können im Dark Mode schwieriger zu lesen sein
  • überwiegende Mehrheit der Emails ist nicht für Dark Mode konzipiert und werden daher nicht korrekt dargestellt

7. Dark Mode lohnt sich – deshalb: immer mitdenken!

Zurzeit fehlen zwar noch aussagekräftige Daten zur Nutzung des Dark Modes in Emails. Was wir aber wissen, ist: Immer mehr Email-Anwendungen, Apps, Betriebssysteme und Browser ermöglichen es ihren Usern, im coolen, stylischen Dark Mode zu surfen. Die User, das sind in diesem Fall meistens junge Menschen, gern technikaffin, mit gutem Smartphone unterwegs und lange wach – außerdem oft Zielgruppe von Newslettern und Mailing-Kampagnen. 

Wir sind uns also sicher: Bei der Nutzung des Dark Modes handelt es sich nicht nur um einen kurzlebigen Designtrend, sondern bald schon um eine Selbstverständlichkeit im Web-Design. Das gilt auch für unsere Branche.

Wir sollten also nicht zu viel Mühen scheuen. Das heißt konkret: mindestens alle Bilder einer Email für die Darstellung im Dark Mode optimieren, vielleicht sogar “Hacks” für die verschiedenen Email-Clients anwenden. Und weiter kreativ bleiben, um optimalere, standardisierte Lösungen für die richtige Darstellung im Dark Mode zu finden.