16. Dezember 2021

· Tipps & Tricks

Dark Mode: Schattenseiten & Lichtblick fürs Design

Ein Beitrag von Julia Breitenfellner

Egal ob Browser, Programm oder App – der Dunkelmodus erobert beinahe alles, was eine Benutzeroberfläche besitzt und macht die optimale Darstellung von Newslettern zu einem kompexen Thema. 

Dark Mode Nutzung: Wie viele sind auf die dunkle Seite übergelaufen? 

Der Dunkelmodus hat sich also zum State-of-the-Art im UX-Design entwickelt. Und weiter? Warum sollte Sie das kratzen? Von meinen Kollegen oder Freunden verwendet das kein einziger. Da kommt nach wie vor Schwarz auf Weiß, so wie es sich gehört … 

Ein berechtigter Einwand. Hat sich der Dark Mode bei den Nutzern überhaupt durchgesetzt? Wie viele haben das umgekehrte Farb-Schema tatsächlich im Einsatz? 

Es ist gar nicht so einfach, gutes Zahlenmaterial zu finden, das diese Frage realtiätsnah beantworten würde. Glaubt man der Umfrage, die Anfang 2020 von der Android Authority durchgeführt wurde, so präferieren nicht weniger als 82 % den Dunkelmodus. Die Zahlen scheinen etwas hochgegriffen, was daran liegen könnte, dass sich unter den Befragten wohl viele Entwickler und Early Adopter befanden. 

Viel plausibler erscheint dagegen die Auswertung von Litmus (Ende 2020), welche die Dark Mode Nutzung exemplarisch für Apple Mail ermittelt hat: Von den Litmus Abonnenten bevorzugen etwa 12 % den Dark Mode. Interessant ist hierbei die Differenzierung zwischen Desktop- und mobilen Betriebssystemen: Während auf dem Mac nur 7,5 % der E-Mails im Dunkelmodus betrachtet wurden, sind es bei Smartphone Usern bereits um die 36 %! 

Dunkel in Mode? Wer den „Trend“ mitmacht und vorgibt. 

Außerdem gibt es noch Folgendes zu bedenken: Selbst, wenn der viel beschriebene Hype um den Dark Mode letztendlich doch nicht bei der Mehrheit der Nutzer angekommen ist, kann sich für Ihr Newsletter-Design dennoch Handlungsbedarf ergeben. 

Tatasache ist nun einmal, dass uns dieser Trend ein Stück weit von den Machern von Betriebssystemen oder Apps vorgegeben wird. Derzeit werden die meisten Programme und Anwendungen noch im gewohnten Farb-Schema ausgeliefert, doch es gibt auch Ausnahmen. Bei neueren Versionen der Adobe Creative Suite beispielsweise ist die dunkle Benutzerorfläche bereits der voreingestellte Standard. Es ist nicht unwahrscheindlich, dass andere hier nachziehen werden. 

Was also tun? Kann man überhaupt etwas tun? 

Dark Mode Szenarios: Das „Dunkel“ hat viele Schattierungen

Es kommt darauf an. Zwar gibt es einige Möglichkeiten, wie Sie Ihre Newsletter Vorlage für den Dark Mode optimieren können, jedoch greifen diese nicht bei allen E-Mail Clients. Außerdem handelt es sich beim Dark Mode um einen Überbegriff für ein Farbschema, das jedoch im konkreten Einzelfall ganz unterschiedlich gestaltet sein kann.

Im Wesentlichen lassen sich folgende 3 Szenarios differenzieren:

  • Szenario 1: E-Mail Design bleibt von Dark Mode unberührt 

    Obwohl die Benutzeroberfläche im Dark Mode angezeigt wird, wird die E-Mail wie gewohnt dargestellt. Es ergeben sich aufgrund dessen keine Änderungen für das Newsletter Design (z.B. Apple Mail (MacOS)).

  • Szenario 2: Teilweise Farbumkehrung 

    Diese beschränkt sich in der Regel auf die Konvertierung von Text- und Hintergrundfarben von dunkel auf hell bzw. umgekehrt, wirkt sich aber nicht weiter auf das Newsletterdesign aus (z.B. Outlook.com).

  • Szenario 3: Vollständige Farbumwandlung 

    Um das bestmögliche Nutzererlebnis zu schaffen, werden sämtliche Farben im E-Mail nach Gutdünken des Anbieters umgewandelt (z.B. Gmail App (iOS), Outlook 2019 (Windows)). Ob das Endergebnis stimmig ist, fragt keiner. So kann es vorkommen, dass auf dunkel getrimmte Newsletter nach der vollständigen Farbumwandlung plötzlich hell sind. Interessant 🤔

Apple Mail 13 Dark

Keine Konvertierung – Apple Mail 13 Dark

Office 365 Dark

Vollständige Farbumwandlung – Office 365 Dark

Newsletter Design: Muss man sich den Zwängen des Dark Modes unterwerfen? 

Um einer Verschandelung Ihrer schönen, durchdachten Newsletter entgegenzuwirken, können im Code des E-Mail Templates Fallbacks vorgesehen werden. 

Zwei Beispiele für relativ häufig vorkommende Problemfälle: 

Fall 1: Die Farben sehen nach der Konvertierung absolut scheußlich aus! 

Um ein Konvertieren der ursprünglichen Farben zu verhindern, können Sie auch alternative Farben für Hintergrund-, Button- und Schriftfarben (also ein Dark-Mode-Schema) definieren. Einige E-Mail Clients lassen es nämlich zu, dass ihre Vorgaben durch entsprechenden Code übersteuert werden. 

Sagen Sie dabei am besten den allzu satten Farben aus Ihrer Corporate Design Palette Sayonara! Im Dark Mode sind eher gedeckte Farben gefragt – diese sind auch seltener von Umwandlungen betroffen. 

Fall 2: Man kann die Texte über den Hintergrundbildern nicht mehr lesen! 

Für diesen Fall gibt es sogar zwei Lösungsansätze: Zum einen können Sie vorgeben, dass Hintergrundbilder im Dark Mode ausgeblendet werden sollen, wodurch der Text dann einfach auf einem farbigen Hintergrund stehen würde. Zum anderen können Sie hier auch mit Overlay-Elementen arbeiten. Anstatt den Text unmittelbar über das Bild zu stellen, sind Designs mit farbigen Textfeldern auf einem Hintergrundbild zu bevorzugen. 

Hintergrundbild
Hintergrundbild Dark

Diese Stylingvorgaben (oder zumindest Teile davon) werden von einigen E-Mail Clients akzeptiert, von anderen wiederum nicht. 

Newsletter Befüllung: Wie Sie Ihre Inhalte an den Dark Mode anpassen 

Wenn wir auch nicht immer Einfluss auf die Farbkonvertierung unserer Newsletter haben, so gibt es dennoch einige Punkte, die Sie bei der Befüllung berücksichtigen sollten, um die Darstellung im Dark Mode zu verbessern. 

  • png- oder gif-Format für freigestellte Bilder verwenden 

    Im Dark Mode springen die Freisteller auf weißem oder färbigem Hintergrund ansonsten unangenehem ins Auge. 

  • Kontur bei dunklen Logos oder Elementen 

    Legen Sie eine Kontur oder einen dezenten hellen Schein um das Element, um es im Dark Mode sichtbar zu machen. 

  • Bilder mit ausreichend Rand zuschneiden 

    Wenn kein png oder gif verwendet werden kann oder soll, lassen Sie unbedingt ausreichend Rand, damit das Bild im Dark Mode nicht zu knapp zugeschnitten wirkt. 

Zuschnitt

Beispiel: Hier sollte besser ein png zum Einsatz kommen oder der weiße Rand um einige Pixel vergrößert werden. 

Und am Ende hilft nur noch testen, testen, testen, um grobe Fehler zu vermeiden! 

Sie sind unsicher, ob Ihre Vorlage für den Dark Mode gerüstet ist, oder möchten Ihren Newsletter dahingehend optimieren? Unsere Vorlagen-Experten beraten Sie gerne! Wir freuen uns auf Ihre Anfrage!

_______

Artikel weiterempfehlen

Weitere Artikel
aus unserem Blog