Newsletter Design on Dark Mode
[:de]
Vielleicht ist Ihnen der Dark Mode bereits von Ihrem iOS oder Android Smartphone geläufig. Neben der standardisierten Einstellungen in der aktuellen Apple Software haben Sie dazu unter anderem in Apps wie WhatsApp, Facebook oder Instagram aber beispielsweise auch in der Windows-Umgebung die Möglichkeit den Dark Mode zu aktivieren. Doch was genau verbirgt sich dahinter und wie lässt sich diese Einstellung in Online Marketing und Newsletter Design stilsicher und ansprechend umsetzen?
Was ist der Dark Mode?
Der Dark Mode (Dunkel Modus) ist zu einem starken Trend avanciert. Dabei werden die Hintergründe dunkel, Texte und Icons beispielsweise hell dargestellt. Der Dark Modus ermöglicht ein innovatives und einzigartiges Design, dass sich aufgrund des Farbschemas deutlich abhebt und von vielen Usern beim Betrachten als angenehm empfunden wird. Aber warum ist das so? Wie lässt sich der positive Eindruck, den der Dark Modus beim Nutzer hinterlässt, erklären und sinnvoll für das unternehmenseigene E-Mail Marketing nutzen?
Welche Vorteile bietet der Dark Mode?
Der Dark Mode bringt gleich eine ganze Reihe von Vorzügen mit sich. Dank weißem Text auf dunklem Hintergrund lassen sich beim Lesen unsere Augen schonen. Dieser Vorteil macht sich auch dann bemerkbar, wenn wir nur bei geringem Lichteinfall unsere technischen Geräte nutzen. So können wir Inhalte nicht nur einfacher lesen, sondern auch die Helligkeit des Bildschirms wird reduziert. Das trägt insgesamt zur Schonung des Akkus von mobilen Endgeräten bei. Ein weiterer Pluspunkt des Dark Mode ist der von vielen Nutzern damit verbundene Minimalismus und somit ein modernes Design, das dem aktuellen Zeitgeist entspricht.
Warum ist der Dark Mode in der Newslettergestaltung schwierig?
In the Online Marketing sind Unternehmen immer wieder auf der Suche nach kreativen Optionen, die im Rahmen von E-Mail Marketing eine individuelle Newsletter-Gestaltung ermöglichen und so die Aufmerksamkeit der Adressaten sichern.
Online Marketing und Newslettergestaltung im Dark Modus bringen jedoch einige Tücken mit sich. Grundsätzlich wird der Dunkelmodus zwar von zahlreichen Mobile-Apps (z.B. Google Mail App oder Outlook für Android und iOS), Desktop Clients (z. B. Apple Mail Outlook 2019 für Mac OS und Windows) sowie Web Clients (z.B. outlook.com) unterstützt, in der Praxis kann eine E-Mail aber je nach Client ganz unterschiedlich aussehen. Eine Ursache dafür liegt im komplexen Rendering von E-Mails und dem Problem, das eine E-Mail im Client des Adressaten unter Umständen nicht so aussieht, wie Sie sie ursprünglich gestaltet haben. Umso entscheidender ist es, dass Sie Ihre Newsletter im Dark Mode so optimieren, dass gängige E-Mail-Clients sie korrekt darstellen.
Auf welche Besonderheiten muss man bei der Gestaltung von Newslettern im Dark Mode achten?
Berücksichtigen Sie für eine optimale Darstellung die Farbschemata, die E-Mail Clients für den Dunkel Modus von E-Mails nutzen. Aktuell setzen die gängigen Clients auf folgende 3 Varianten bei der Verarbeitung im Dunkelmodus.
Verzicht auf Farbänderung
In einer Reihe von E-Mail-Clients lässt sich die Benutzeroberfläche in den Dark Modus wandeln. Ganz gleich, ob Hell- oder Dunkel Modus, die Darstellung Ihrer HTML E-Mail bleibt unverändert. Davon ausgenommen sind reine Text E-Mails. Hier ist ein 2×1 Bild erforderlich um den Dark Modus auszulösen. Das lässt sich ganz einfach mit einem 1×1 Tracking Pixel und der Nutzung eines “Nur Text Styles” realisieren.
Invertieren von Teilfarbe
Dabei werden helle Hintergrundbereiche erkannt und invertiert und damit dunkel. Dunkle Schrift hingegen wird hell. Elemente mit dunklem Hintergrund bleiben erhalten.
Volle Farbumkehr
Hier kommt das invasive Farbschema zum Einsatz. Anders als beim Invertieren von Teilfarbe werden hier helle und dunkle Hintergründe invertiert.
Es ist aber auch möglich eigene Dark Mode Styles anzuwenden. Hier kommen die “@media (prefers-color-scheme: dark)” oder die “[data-ogsc] und/oder [data-ogsb]” Methoden zum Einsatz.
Bei beiden Methoden ist es u. a. entscheidend, das transparente PNG auf dunklem Text einen hellen Schlagschatten erhalten. So können Sie Problemstellungen in E-Mail Clients, die nicht auf den Dark Modus ausgerichtet sind, reduzieren. Darüber hinaus ist es möglich mit ausgewählten Metadaten im Newsletter zu gewährleisten, dass die Empfänger, die E-Mail auch entsprechend im Dunkelmodus lesen können.
Unser Tipp: Sie wollen gerne mehr über Dark Mode Styles für @media (prefers-color-scheme: dark) und doppelte Dark Mode Styles mit [data-ogsc] und / oder [data-ogsb] Präfix erfahren? Oder sich überhaupt nicht um die technischen Details kümmern, aber dennoch Onlinemarketing und Newslettergestaltung im Dark Mode realisieren? Dann kontaktieren Sie unsere Full Service Agentur München. Füllen Sie einfach das Kontaktformular aus, wir melden uns schnellstmöglich bei Ihnen.