Dark Mode: Die neue Herausforderung für E-Mail-Marketer

Komm auf die dunkle Seite!

Es ist die Woche nach Black Friday – und worüber schreiben wir: Richtig, über den Dark Mode.

Was ist das überhaupt? Dark Mode ist ein umgekehrtes Farbschema, das helle Typografie, UI-Elemente und Icons auf dunklen Hintergründen verwendet. Der Dark Mode ist einer der heißesten digitalen Designtrends des letzten Jahres, und jetzt erreicht er mit aller Macht das E-Mail-Marketing.

Immer mehr Menschen stellen ihr Mobile Device (Ab iOS 11 oder Android 10) oder auch ihren Apple-Laptop (ab MacOS Mojave) auf Dark Mode um. Und warum tun sie das?

1. Heller Text auf dunklem Hintergrund ist viel besser, um die Belastungen der Augen zu minimieren, besonders in Situationen mit wenig Licht.

2. Die Akku-Laufzeit wird verlängert, weil dunkle Bildschirme weniger Strom verbrauchen.

3. Für viele Menschen ist eine helle Schrift auf einem dunklen Hintergrund besser lesbar.

4. Last but not least: Es sieht irgendwie stylish aus. Nicht das schlechteste Argument.

Womit wir – das letzte Argument vor Augen – beim E-Mail-Marketing wären. Denn HTML-Mails sehen im Dark Mode meist nicht gerade stylish aus – das Gegenteil ist richtig.

Ist das denn relevant? Oh ja, und es wird immer relevanter: Jeder Apple Desktop-Nutzer mit dem neuesten Betriebssystem-Update hat den Dark Mode als STANDARD eingestellt, und alle Erfahrung lehrt, dass sich die wenigsten Menschen vom Standard entfernen. Bei den Mobiltelefonen sieht das anders aus, die Standard-Einstellung ist unverändert. Meine Einschätzung (subjektiv, basierend auf Expertengesprächen mit in meinem Haushalt lebenden Teenagern): Vor allem jüngere Nutzer finden den Dark Mode schlicht „cool“, und stellen darauf um.

Aus meiner Sicht stellen sich für E-Mail-Marketer zwei Herausforderungen, wie Sie dem Dark Mode am besten begegnen:

1. Das optimale Rendering einer E-Mail, so dass sie auch im Dark Mode gut angezeigt wird.

2. Ein möglicher grundsätzlicher Shift im generellen Design von E-Mailings hin zu „mehr Schwarz“

E-Mail-Rendering

Die HTML-Programmierung von E-Mails ist reichlich komplex: Es gibt Hunderte von Varianten an Endgeräten und der entsprechenden E-Mail-Software: Wenn eine Mail zum Beispiel in Gmail für iOS richtig angezeigt wird, muss das für Gmail auf einem Windows-Desktop überhaupt nicht gelten. E-Mails so zu programmieren, dass sie wirklich (fast) überall hinreichend gut angezeigt werden, ist eine hohe Kunst.

Aktuell sehen wir bei der Anzeige von Mails auf Apple unter Mojave die größten Probleme. Das iPhone rendert Mails vergleichsweise gut. In Outlook.com (dem früheren Hotmail) hingegen gibt es einige Anzeigefehler. Und auch etliche andere E-Mail-Clients machen Probleme. Wer selbst programmieren will, findet bei Patrik Krupar von Sidemail eine ganz gute Übersicht mit einer sehr ausführlichen Tabelle zu den einzelnen Clients: https://sidemail.io/articles/dark-mode-in-html-email/

Die wichtigsten Tipps (vor allem für outlook.com, aber dieses werden hier kurz zusammengefasst:

1. In der Regel ist es besser, transparente Bilder zu verwenden.

2. Man sollte sicherstellen, dass man schwarze Bestandteile eines Bildes (z.B. eines Logos) mit einem weißen Rahmen umgibt. Für den Fall, dass Transparenz durch Schwarz ersetzt wird, hat man dann nämlich kein „schwarz auf schwarz“

3. Mische keine Bilder und Hintergrundfarben. Hintergrundfarben werden im Dark Mode geändert, Bilder aber nicht – damit kann es zu Inkonsistenzen kommen. Im folgenden Beispiel ist der Call to Action ziemlich seltsam, weil seine abgerundeten Ecken mit Bildern erstellt werden.

Die gute Nachricht: Seit dem aktuellsten iOS 13 unterstützt Apple (neben Outlook.com) die Abfrage „Dark Mode ja/nein“ über Media Queries. Was bedeutet das? Dazu muss man zunächst Media Queries erklären. Diese sind ein wichtiger Bestandteil beim Responsive Webdesign. Sie sind dafür zuständig, die spezifischen Eigenschaften eines Ausgabemediums bzw. Displays abzufragen. So wird jedem Gerät das genau passende Stylesheet zugeordnet und die Webseite wird damit immer optimal angezeigt. Diese Media Queries sorgen auch dafür, dass ein E-Mailing auf einem Mobiltelefon anders angezeigt als auf einem Desktop. Nun gibt es also auch eine passende Abfrage „Dark Mode oder nicht?“ Damit kann jemandem, der den Dark Mode eingestellt hat, ein völlig anderes Mailing angezeigt werden als jemandem, der den „hellen Modus“ bevorzugt. In der Praxis bedeutet das: Künftig sollten Unternehmen, die ihr E-Mail-Marketing ernst nehmen, sich nicht nur Gedanken darüber machen, wie ihre Mails auf dem Desktop und wie auf dem Mobiltelefon angezeigt wird – sondern auch unterschiedliche Varianten für Light und Dark Mode bereitstellen.

E-Mail-Design: Schafft mehr Schwarzraum 😉

Der „Weißraum“ ist ja bekanntermaßen der heilige Gral des Designers. Alles so clean, viel Platz, schön reduziert …. so mögen viele Designer das. Nebenbei erwähnt: Der Weißraum ist des E-Mail-Marketers Alptraum – vor allem wenn es um die ersten paar Zentimeter der E-Mail geht. Da muss es nämlich „knallen“, mit möglichst vielen Klickmöglichkeiten.

Nun also der Dark Mode. Die ganz grundsätzliche Design-Frage die dahinter steht ist folgende: Natürlich kann ein guter Programmierer mit Geduld und ein paar Tricks Mails so anpassen, dass sie auch im Dark Mode gut zu lesen sind. Auf dem iPhone sehen viele Mails auch im Dark Mode aus „wie immer“.

Und genau das ist der Fehler: Schließlich will der Empfänger seine Inhalte in dem eleganten, augenfreundlichen Schwarz haben. Und plötzlich schreit ihm wieder eine große weiße Fläche entgegen – muss das sein? Perfekt wäre es doch, den Wunsch des mündigen Empfängers zu akzeptieren und seine Inhalte entsprechend den individuellen Präferenzen auszuliefern.

Was sollten E-Mail-Designer also tun:

1. Mailings generell so erstellen, dass – rein technisch betrachtet – vernünftig auch auf Black Mode optimiert werden können. Das macht sich vor allem bei verschiedenen Hintergrundfarben bemerkbar.

2. Eine „Dark Mode“ Version ihrer Mailings erstellen, um diese (sofern über Media Queries steuerbar) individuell den Nutzerpräferenzen entsprechend auszusteuern.

3. Styleguides entwickeln, um ein konsistentes E-Mail-Design über alle E-Mailing-Strecken sicherzustellen. Es ist jetzt schon vorhersehbar, dass dafür in vielen Unternehmen einige harte Nüsse mit der zuständigen CI-Abteilung geknackt werden müssen.

Und was man dabei niemals vergessen sollte: Werbe-Mails haben einen Zweck: Sie sollen verkaufen. Vor allem bei großen Verteilern lohnen also auch Tests, in welcher Darstellungsform die besten Conversions erzielt werden können.

Zusammengefasst: Der Dark Mode ist eine neue Herausforderung im E-Mail-Marketing, aber keine völlig neue. Optimierung der Anzeige auf verschiedene Endgeräte und E-Mail-Clients begleitet die Branche seit über 15 Jahren. Wie immer gilt: Umfangreich testen, technisch am Ball bleiben (oder es Agenturen überlassen, die wissen wie es geht), und einen nicht nur oberflächlichen Blick auf die Statistiken und relevanten KPI werfen. Dann wird der Dark Mode auch nicht zur Last, sondern zu einer neuen spannenden Möglichkeit, mit „coolen, stylishen“ E-Mails state-of-the-art zu kommunizieren.

In einem Block, wenn es geht!

Willst Du wissen, wie Deine E-Mailings im Black Mode aussehen? Meister Lampe und Freunde checkt Deine aktuellen Mails und gibt konkrete Tipps zum optimieren zu einem günstigen Pauschalpreis.

Willst Du mehr wissen? E-Mail an sparringspartner@meisterlampe-und-freunde.de