09. März 2020

    Wie der Dark Mode zum Dauer Mode wurde

    Warum nochmal Dark Mode? Hier die Fakten, die den Dark Mode zum Dauer Mode gemacht haben: 

    • Es schont die Augen. Heller Text auf dunklem Hintergrund ist wesentlich geeigneter, um die Belastung der Augen zu minimieren. Insbesondere in Situationen mit geringen Lichtquellen – wie beispielsweise abends im Bett, wenn man nochmal die E-Mails und Instagram durchgeht, oder einfach an düsteren Tagen, wie sie in Deutschland derzeit ab und an ja doch vorzufinden sind. 
    • Es reduziert die Bildschirmhelligkeit. Das schont nicht nur tagsüber den Akku des Laptops, der Handys oder der Tablets, sondern hat auch langfristig positive Auswirkungen auf deren Lebensdauer.
    • Es verbessert die Lesbarkeit von Inhalten. Somit wird es dem Leser leichter gemacht, Inhalte sowohl auf der mobilen als auch auf der Desktop-Version zu konsumieren. 
    • Und vielleicht bevorzugen Leser auch einfach eine schwarze Bildschirmoberfläche. Objektivität bei der Verfassung von Artikeln hin oder her, in einer Zeit, in der Coolness, Minimalismus und Diversität an erster Stelle stehen, sieht ein schwarzer Hintergrund einfach gut aus.

    Welche E-Mail Clients unterstützen zum derzeitigen Standpunkt den Dark Mode? 

     

    E-Mail Client
         		Dark UI
         		Automatische Konvertierung der E-Mail Farben
    Apple Mail iPhone + iPad Ja Ja (bei transparentem Hintergrund)
    Gmail Android Ja Ja
    Gmail iOS Nein Nein
    Gmail Webmail Ja Nein
    Outlook iOS Ja Ja
    Outlook Windows Ja Ja
    Outlook macOS Ja Ja
    Apple Mail macOS Ja Ja (bei transparentem Hintergrund)
    Yahoo webmail Ja Nein
    AOL webmail Nein Nein
    Outlook.com Ja Ja
    Windows 10 Mail Ja Ja
    Zoho Mail webmail Ja Ja
    Mozilla Thunderbird Ja Nein
    Spark macOS Ja Ja (bei transparentem Hintergrund)
    Spark iOS Ja Ja (bei transparentem Hintergrund)
    Spark Android Ja Ja (bei transparentem Hintergrund)

    Quelle: https://sidemail.io/articles/dark-mode-in-html-email/ (Abruf: 06.02.2020) 

     

     

    Wie wenden die E-Mail Clients den Dark Mode im E-Mail-System an?

     

    Dark Mode möglich? Ja. Gleiche Handhabung der Anzeige von E-Mails? Nein. Auch wenn viele der oben genannten E-Mail Clients die Möglichkeit bieten die in einem User Interface in ein dunkles Farbschema zu versetzen, bringt dies keine generelle, gleichsame Handhabung von E-Mails. Eine E-Mail kann somit in dem einen Client herausragend, einzigartig, komplett innovativ, dem Black Mode perfekt adaptiert aussehen, während sie in einem anderen Client völlig zerpflückt aussehen kann. Für den Umgang von Clients mit der Einstellung des Dark Modes haben sich drei fundamentale Stufen des Farbschemas etabliert:

     

    1. Keine Farbabänderung
      Sie haben richtig gelesen - auch das ist möglich. Einige E-Mail Clients lassen den Nutzer zwar die Benutzeroberfläche in den Dark Mode umändern, lassen dies allerdings keinen Einfluss auf die Anzeige Ihrer E-Mail. Ob die Einstellungen auf Dark Mode gesetzt sind oder nicht – die E-Mail sieht gleich aus. Lediglich die UI um die E-Mail herum kann zwischen Black Mode und Light Mode verändert werden. 
    1. Partielle Farbinvertierung
      Diese Version des Dark Modes erkennt lediglich die Bereiche mit hellem Hintergrund und verändert diese in einen dunklen Hintergrund um. Im Zuge dessen werden dementsprechend dunkle Textpassagen in hellen Text umgewandelt. In der Regel werden Bereiche, die bereits einen dunklen Hintergrund haben in Ruhe gelassen, was letztlich zusammen mit der Adaptierung der anderen Bereiche zu einem vollständig dunklen Design führt.
    2. Volle Farbinvertierung
      Vermutlich wenig überraschend kommen nun die Neuigkeiten der letzten möglichen Option: der kompletten Farbinvertierung eines E-Mail Clients. Das mit Abstand aufwendigste Farbschema ändert nicht nur die als hell erkannten Bereiche in dunkle Bereiche, sondern hat noch eine zusätzliche Wirkung auf dunkle Hintergründe selbst. Wenn Sie also Ihre E-Mail bereits in einem dunklen Farbschema versandt haben, wird das System es ironischerweise wieder in einen hellen Hintergrund umwandeln. Das ist die derzeit unglücklicherweise häufigste Taktik einiger beliebter E-Mail Clients wie Gmail iOS oder Outlook Windows.  

     

    Invertieren (Bildbearbeitung)

    In der Bildbearbeitung wird mit Invertieren ein Verfahren zur „Umkehr der Farben“ bezeichnet. Konkret bedeutet dies, dass die „gegenteilige Farbe“ des jeweiligen Farbraumes bestimmt wird. So wird zum Beispiel aus schwarz weiß und umgekehrt.

    Quelle: https://de.wikipedia.org/wiki/Invertieren_(Bildbearbeitung) (Abruf: 06.02.2020) 

     

     

    Jetzt mal Butter bei die Fische – was tun für einen reibungslosen Black Mode? 

     

    Auch wenn die Tabelle durch herrlich viele ‚Ja‘-Antworten brilliert, heißt das leider noch lange nicht, dass alle Clients unsere E-Mails gleichbehandeln. Die Darstellung von E-Mails ist eine hoch komplexe Angelegenheit, weshalb sich hier bisher noch keine einheitliche Lösung gefunden hat. Daher hier eine komprimierte Version über die bestehenden Möglichkeiten einer Implementierung des Black Modes in Ihre E-Mails. 

     

    • Optimieren Sie Ihre Logos und alle anderen Bilder für alle Stile, indem Sie transparenten PNGs mit dunklem Text einen durchsichtigen Umriss hinzufügen. So wird die Lesbarkeit auch in E-Mail Clients, die nicht auf den Dark Mode ausgerichtet sind, gewährleistet. Dies hilft, Probleme zu vermeiden bei denen der E-Mail Client entscheiden muss ob die partielle oder die volle Farbinvertierung vorgenommen werden muss. Wenn Ihre Bilder nicht transparent sind und Hintergründe enthalten, stellen Sie sicher, dass sich genug Füllmaterial um den Fokus befindet, um unangenehme Nebeneinanderdarstellungen zu vermeiden.
    • Indem Sie die unten aufgeführten Metadaten in Ihrem <head> Tag aufnehmen, können Sie sicherstellen, dass der Dark Mode in Ihrer E-Mail für Abonnenten, die ihn eingestellt haben, aktiviert wird. Um die Metadaten zu unterstützen, müssen Sie zusätzlich die darunter angezeigten CSS hinzufügen:
    1. Die .dark-img und .light-img classes sind besonders nützlich, um ein Dark Mode-spezifisches Logo anzuzeigen, wenn ein umrissenes Logo nicht unbedingt ideal ist. Stellen Sie also letztendlich immer sicher, dass alle HTML Tags die entsprechenden Dark Mode classes eingefügt haben.
    2. Nicht zu vergessen aber leicht zu vergessen: E-Mail Clients stehen unter stetiger Veränderung. Gerade mit der Einführung neuer Funktionen wie dem Dark Mode, kommen auch Änderungen an der Rendering-Logik. Um hier den Überblick zu bewahren, heißt es testen - testen - testen!   

     

    Respect your Client. Eine charmante, aber auffordernde Pointe unseres Artikels, soll noch einmal darauf hinweisen, dass letztlich vor allem zählt, die Bedürfnisse und Wünsche des Kunden zu respektieren. Die Entscheidung der Einstellungsänderung zum Dark Mode wird von den meisten Nutzern nicht nur aus Versehen getätigt, sondern mit dem Bewusstsein, dass sie es schöner, angenehmer, trendiger oder auch gesünder finden. Nun gilt es dem Kunden zu zeigen, dass wir diesem Wunsch auch nachgehen wollen. Genauso wie wir es als äußerst angemessen empfinden, wenn der Zahnarzt uns die partielle Narkose kurz vor dem Eingriff anbietet.