Dark Mode E-Mail: Welche Auswirkungen hat dieser auf Ihre Kampagnen (und wie können Sie darauf reagieren)?

Ohne Zweifel: Der „Dunkelmodus“ setzt sich immer mehr in den Anwendungen durch… auch in denen, in denen Ihre Empfänger Ihre E-Mails lesen. Jedoch, wie verändert der Dunkelmodus das Aussehen Ihrer E-Mails und welche Auswirkungen hat er auf Ihre Kampagnen? 

Unsere Bildschirme sind zunehmend „dunkel“. Anwendungen (Twitter, Google Maps, Slack, Instagram), Browser (Chrome, Firefox) und Betriebssysteme (Android 10, iOS 13 und macOS ab Mojave)… ein Großteil der digitalen Umgebungen, die wir täglich nutzen, hat auf den „Dunkelmodus“ umgeschaltet… einschließlich der wichtigsten E-Mail-Clients und Webmail-Dienste. Hier ist, was Sie wissen müssen, um die grafische Gestaltung Ihrer E-Mail-Kampagnen an diese neue Realität anzupassen.

Wenn Ihr Empfänger den Dunkelmodus aktiviert hat, wie reagieren Ihre E-Mails? Unsere Tests haben drei Hauptverhaltensweisen ergeben:

* Im Negativmodus wird ein heller Hintergrund dunkel und ein dunkler Text wird hell, zum Beispiel.

In Outlook 2019 (Desktop-Mailclient) und Gmail (iOS- oder Android-Mobilanwendung) wird der Code und damit die Darstellung Ihrer Kampagnen  beeinträchtigt, wenn der Nutzer in der Anwendung den Dunkelmodus aktiviert hat. Das „abweichende“ Verhalten ist auf älteren Betriebssystemen zu beobachten (und scheint nach und nach behoben zu werden). 

Alle Anwendungen mit einem Dark Mode lassen dem Benutzer die Wahl zwischen einem „hellen“ (dunkle Schrift auf weißem Hintergrund) und einem „dunklen“ Modus (dunkler Hintergrund, helle Schrift). Dies hat eine Reihe von Vorteilen:

• Angenehmeres Lesen bei geringerer Helligkeit (der Bildschirm „blendet“ weniger);
• Eine weniger beanspruchte Batterie, die länger durchhält (eine Tatsache, die sowohl von Google als auch von Apple bestätigt wird);
• eine geringere Ermüdung der Augen (auch wenn dieser Punkt noch wissenschaftlich belegt werden muss).

Innerhalb eines Monats waren 50 % der iPhone-Nutzer auf iOS13 umgestiegen, ein Betriebssystem, bei dem Apple die Einführung des Dark Mode stark vorantreibt.

Die Auswirkungen auf das E-Mail-Marketing sollten nicht unterschätzt werden! Warum? Weil 6 von 10 E-Mails auf Mobilgeräten geöffnet werden – und die beiden am häufigsten genutzten Betriebssysteme über einen Dark Mode verfügen. Das macht dieses Thema zu einer unvermeidbaren Herausforderung für erfolgreiches E-Mail-Marketing.

Aber auch, weil die Leseumgebungen selbst (Mail-Clients und Webmailer) immer häufiger Dunkelmodi anbieten. Dies ist bei Outlook mittlerweile auf Mobilgeräten, macOS und Office.com der Fall, Gmail folgte kurz darauf (auf Android, iOS und als Webmail über Chrome). Zweifellos wird sich diese Option nach und nach in den meisten großen Umgebungen, in denen Ihre Kampagnen gelesen werden, durchsetzen...

Die Frage ist also nicht mehr, ob Sie Ihre zukünftigen E-Mails so gestalten sollten, dass sie auch im dunklen Modus gelesen werden können. Sondern wie.

Theoretisch ist die Auswirkung des Dark Mode auf einen Inhalt recht einfach: Der Bildschirmhintergrund wird von hell (weiß oder annähernd weiß) nach dunkel (schwarz, dunkelgrau) wechseln. Und die Schriftarten werden den umgekehrten Weg gehen. Unsere Hypothese ist, dass der Dark Mode die Farben der einzelnen Elemente auf der Farbpalette „umkehrt“:

• schwarz wird zu weiß
• dunkelgrau wird hellgrau
• und ein blauer Link wird zu Orange.

Aber wie immer ist die E-Mail-Umgebung ein etwas komplizierteres Umfeld als das Web. Unsere verschiedenen Tests in mobilen und Desktop-Umgebungen haben uns drei Fälle aufgezeigt.

Die Leseumgebung wechselt in den dunklen Modus (das Menü, die Seitenleiste, die Vorschau des Posteingangs), aber die E-Mail selbst „bewegt“ sich nicht. Dies war der häufigste Fall in unseren Tests.

Hier passt sich die E-Mail an den Dark Mode an, ihr Hintergrund wird dunkel, die Schriftarten und einige andere CSS-Stile (wie Netze) werden hell. Ein Verhalten, das zunächst vor allem bei der Outlook-App unter iOS13 zu beobachten war, aber auch bei Outlook 365 Mac, wenn der Empfänger die Option „Hintergrund ändern“ aktiviert hat. In jüngerer Zeit (Mai 2020) hat die Gmail-App (auf iOS13 und Samsung) das gleiche Verhalten an den Tag gelegt: Die Dinge ändern sich also ziemlich schnell, und Sie sollten Ihre E-Mails regelmäßig testen...

Nachdem Sie nun die möglichen Veränderungen erfahren haben, die der Dunkelmodus in Ihren E-Mails bewirken wird, bleibt also die wichtigste Frage: Wie passen Sie sich an? Und wie können Sie sicherstellen, dass die Erfahrung Ihrer Empfänger immer optimal ist?

Um diese Frage zu beantworten, gibt es drei mögliche Antworten.

Dies ist die erste mögliche Einstellung: Sie möchten, dass Ihre E-Mails so angezeigt werden, wie Sie sie entworfen haben, ohne jegliche Änderungen. Wie kann man das verhindern? Das ist (theoretisch) recht einfach: Sie müssen einen hellen Hintergrund „erzwingen“, indem Sie ein weißes Pixel über die gesamte „Fläche“ der Nachricht als Hintergrund wiederholen.

Wenn Sie Dartagnan verwenden, kann dies ganz einfach mithilfe einer Textur erreicht werden. Wenn Sie unseren E-Mail-Builder nicht (oder besser, noch nicht...) verwenden, werden Sie ein wenig CSS codieren müssen.

In beiden Fällen haben Sie also eine „stabile“ E-Mail, die sich nicht verschlechtert, wenn Sie sie in einem dunklen Modus lesen. Gut, aber ist das die beste Lösung?

Wenn Ihr Empfänger sich für einen dunklen Modus entscheidet, kann es kontraproduktiv sein, gegen diese Entscheidung zu verstoßen: Ihre „helle“ E-Mail könnte ihn verärgern. Und er wird wahrscheinlich :

• die E-Mail schließen
• sie löschen
• seinen Posteingang verlassen.

In jedem Fall wird das Ziel nicht erreicht und Ihre Botschaft kommt nicht an.

Ein besserer Ansatz ist es, Ihre E-Mail-Kampagnen so zu gestalten, dass sie sowohl im hellen als auch im dunklen Modus gut lesbar sind. Dazu gibt es ein paar kleine Tipps:

• übergeben Sie möglichst viele Bildmotive mit transparenten Hintergründen (.PNG-Format), um weiße „Plakate“ zu vermeiden, wenn der Hintergrund dunkel ist.
• vermeiden Sie Visualisierungen mit schwarzen oder dunklen Vollflächen.
• wenn Ihr Logo (wie es oft der Fall ist) auf einer dunklen Schriftart basiert, umgeben Sie es mit einer hellen Umrandung (in der Farbe Ihres Hintergrunds im hellen Modus), damit es sich im dunklen Modus richtig abhebt.

Eine weitere Möglichkeit, die aber von Ihrem Corporate Design unterstützt werden muss: Gestalten Sie Ihre Kampagnen „nativ“ im Dark Mode. Das macht z. B. Adobe Creative Cloud... 

Das „echte“ responsive Layout (das Dartagnan auf Ihre E-Mails anwendet) besteht darin, das Layout einer E-Mail je nach Leseumgebung zu optimieren (indem man wählt, ob Elemente angezeigt werden oder nicht, ob sie je nach Bildschirm in einer Zeile oder Spalte angeordnet werden...), um dem Empfänger ein perfektes Erlebnis zu bieten.

Der „echte“ Dark-Mode-E-Mail besteht in ähnlicher Weise darin, eine Kampagne in dem Zustand anzuzeigen, der dem vom Empfänger gewählten Modus am besten entspricht. 

• Dann sollte auch Ihre E-Mail einen hellen Hintergrund und dunkle Schriftarten und andere dunkle Elemente enthalten.
• Dann muss Ihre E-Mail (unbeschadet) auf einen dunklen Hintergrund und ausreichend kontrastierende Schriften umschalten.

Klingt das wie Science-Fiction? Nicht unbedingt! Denn es gibt eine Media Query (ein CSS3-Modul, das den Inhalt einer Webseite an die Eigenschaften des Geräts des Nutzers anpasst), mit der die Benutzeroberfläche des Nutzers „abgefragt“ werden kann. Somit kann in Erfahrung gebracht werden, ob sich der E-Mail-Client im Dark Mode befindet oder nicht.

Wie lautet die Syntax dieser Media Query?

@media (prefers-color-scheme: dark) {
/*  Ihre anwendbaren CSS-Stile in Dark Fashion */
}

Sind Sie bereit, Kampagnen zu entwerfen, die bei "Tag" genauso gut aussehen wie bei "Nacht"?