Die Grundlagen des E-Mail-Dunkelmodus

Wir alle wissen, dass das Licht meistens über die Dunkelheit siegt. Denken Sie nur an Star Wars, Der Herr der Ringe … oder auch an Die Göttliche Komödie. Die Popkultur – oder eigentlich die Kultur im Allgemeinen – hat uns gelehrt, dass man sich besser nicht auf der dunklen Seite aufhalten sollte. Und lange Zeit haben wir das auch geglaubt. Doch in den letzten Jahren ist die dunkle Seite unserer Apps für viele Nutzer zur bevorzugten Wahl geworden. Nicht nur bei Discord oder Twitter – der Dunkelmodus ist fast überall zu finden, auch in E-Mails. 

Wir wissen das. Die E-Mail-Entwicklung ist ohnehin schon schwer genug. Aber vor diesem Trend können Sie sich nicht verstecken. Schnallen Sie sich also an und machen Sie sich bereit. Sie erfahren nun, was den Dunkelmodus in E-Mails so beliebt macht, wie er Ihre Zustellbarkeit verbessern kann und wie Sie Ihre E-Mails für den Dunkelmodus optimieren. 

Hier gibt es keine komplizierten Definitionen – der E-Mail-Dunkelmodus ist genau das, wonach er klingt. Der Dunkelmodus ist eine Einstellung, die Nutzer aktivieren können, damit der Text einer App auf einem schwarzen statt auf dem üblichen hellen Hintergrund angezeigt wird. Nicht jede Website oder App verfügt über einen Dunkelmodus. Er ist jedoch häufig bei textlastigen Social-Media-Tools mit weißem Hintergrund (Twitter, Instagram) und natürlich bei E-Mail-Clients anzutreffen.

Die Fangemeinde des Dunkelmodus ist Grund genug, um sicherzustellen, dass Ihre E-Mails für diese Funktion optimiert sind. Fast 82 % der von Android Authority befragten Nutzer nutzen die Dunkelmodus-Einstellungen allein auf ihren Apps und Smartphones.  Ursprünglich wurde der Dunkelmodus eher von einer technikaffinen Zielgruppe genutzt und gefördert. Aktuelle iPhone-Statistiken zeigen jedoch, dass Nutzer gerade einmal über 50 % weniger Zeit mit ihren Geräten verbringen, wenn der Dunkelmodus aktiviert ist. Dies zeigt, wie der Dunkelmodus das Nutzererlebnis effizienter macht. Es gibt viele Gründe, warum der Dunkelmodus überlegen sein soll (worauf wir noch genauer eingehen werden), aber hier sind die wichtigsten Argumente:

• Geringere Belastung für die Augen
• Reduzierung von blauem Licht
• Energieeinsparung (schont den Akku)
• Mehr individuelle Designoptionen

 Unabhängig von den Gründen zeigen die Statistiken deutlich, dass der Dunkelmodus auf Geräten ein Muss ist. Aber wie sieht das speziell für E-Mails aus?

Der Dunkelmodus verdunkelt die Hintergrundfarben. Zudem verwandelt er dunklen Text in hellen Text, damit die Wörter auf dem neuen Hintergrund gut lesbar bleiben. Wie sieht das also in einem Posteingang aus?

Nehmen wir unseren eigenen Mailgun-Newsletter als Beispiel. Nicht nur die Hintergrundfarbe und der Fließtext ändern sich, sondern auch unser Logo und unsere Social-Media-Symbole.  

Ein weiteres Beispiel ist der Gmail-Posteingang und die Möglichkeit, zwischen dem Dunkelmodus und dem klassischen „Hell“- oder „Tag“-Modus zu wechseln.

Quelle: Green Eye IT

Der „Nacht“-Modus von Gmail ändert nichts an den Tabs, der Seitenleiste oder dem allgemeinen Layout von Gmail. Die einzigen Änderungen sind die Hintergrund- und Schriftfarben innerhalb der Anzeige. 

Quelle: TechBlogBox

Der Wechsel in den Dunkelmodus ändert nichts an den Tabs von Gmail oder an dessen allgemeinem Layout und der Bedienbarkeit. Die einzigen Änderungen sind die Hintergrund- und Schriftfarben innerhalb der Anzeige.

Diese kleinen Änderungen mögen vielleicht unspektakulär wirken – was bringt der Dunkelmodus dann überhaupt?

Es gibt ein paar einfache Gründe für die Existenz des Dunkelmodus: Viele empfinden ihn buchstäblich als angenehm für die Augen. Auch wenn es widersprüchliche Forschungsergebnisse darüber gibt, ob der Dunkelmodus die Augenbelastung und die Belastung durch blaues Licht wirklich reduziert, bevorzugen einige den dunkleren Hintergrund. Außerdem kann der Dunkelmodus die Akkulaufzeit Ihres Smartphones oder Laptops verlängern, indem er möglicherweise weniger Energie verbraucht.

Das größte stichhaltige Argument für den Dunkelmodus ist wahrscheinlich seine Rolle bei der E-Mail-Barrierefreiheit. Die hohen Farbkontraste und die geringere Helligkeit des Dunkelmodus gelten im Allgemeinen als besser lesbar für Personen mit Sehbehinderungen wie Lichtempfindlichkeit.  

Zwar hat jeder seine eigenen Gründe für die Nutzung des Dunkelmodus, doch seine wachsende Beliebtheit in den letzten Jahren ist kaum von der Hand zu weisen. Das geht so weit, dass die meisten großen E-Mail-Clients Dunkelmodus-Einstellungen für ihre Nutzer unterstützen.

Es wäre vielleicht einfacher aufzulisten, welche E-Mail-Clients keine Art von Dunkelmodus-Oberfläche anbieten. Als kurze Orientierungshilfe finden Sie hier die wichtigsten E-Mail-Clients, die E-Mail-Einstellungen für den Dunkelmodus nutzen:

• Gmail (via Webbrowser, Android-Mobile-App und iOS-Mobile-App)
• Outlook (via Outlook.com-Webbrowser, Mac-Desktop-App, Windows-Desktop-App, Android-Mobile-App und iOS-Mobile-App)
• Apple-Mail-Plattformen (via Apple-Mail-Desktop-App, iPhone-Mail-App und iPad-Mail-App)
• Yahoo (via Webbrowser, Android-Mobile-App und iOS-Mobile-App)

Laut unserer 2021 E-Mail-Engagement -Bericht ist es so gut wie sicher, dass ein Großteil Ihrer Kontakte mindestens einen dieser Anbieter nutzt. Die Herausforderung besteht jedoch darin, dass all diese Clients E-Mails im Dunkelmodus etwas anders darstellen. Einige invertieren die Farben automatisch, andere nicht. Einige unterstützen @media (prefers-color-scheme), andere wiederum nicht (ja, wir meinen dich, Gmail). Für ein maximales Engagement beim Versand von E-Mails sollten Sie daher sicherstellen, dass diese sowohl im hellen Modus als auch im Dunkelmodus hervorragend aussehen. Sie fragen sich vielleicht: Wie? Und warum? Sehen wir uns genauer an, wie sich der Dunkelmodus auf Ihre Zustellbarkeit auswirken kann und was Sie tun können, um beim Dunkelmodus auf der sicheren Seite zu sein.

Beachten Sie, dass Dunkelmodus-Einstellungen in erster Linie eine von der Nutzerschaft gesteuerte Präferenz sind. Jeder E-Mail-Client, jedes Gerät und jeder Dienst verfügt über eigene Prozesse und Designoptionen für all jene, die diese Funktion nutzen möchten.

Allerdings sind nicht alle E-Mail-Clients gleich, wenn es um die Optimierung für den Dunkelmodus geht. Der Großteil der aufwendigen Designarbeit und Optimierung sollte bei der E-Mail-Entwicklung stattfinden. Zudem sollten Ihre E-Mails getestet und in der Vorschau geprüft werden, um Probleme bei der Zustellbarkeit zu vermeiden.

Es gibt einen Hauptgrund, warum der Dunkelmodus Ihre Zustellbarkeit beeinträchtigen kann: Die E-Mail-Leserschaft ist sehr anspruchsvoll. Viele E-Mail-Clients optimieren E-Mail-Bildelemente (Logos, Bilder usw.) nicht automatisch für den Dunkelmodus. Nicht optimierte Inhalte können dazu führen, dass Ihre E-Mails unordentlich und schwer lesbar wirken.

Die wenigsten Abonnentinnen und Abonnenten, die den Dunkelmodus nutzen, werden sich die Zeit nehmen, Ihre schlecht formatierten E-Mails zu entziffern. Und warum sollten sie auch? Stattdessen werden sie sie ignorieren, löschen oder als Spam markieren – was sich allesamt negativ auf Ihre Zustellbarkeit auswirkt.

Wenn Sie sich hingegen die Zeit nehmen, um sicherzustellen, dass Ihre E-Mails auch im Dunkeln optimal aussehen, ist die Wahrscheinlichkeit viel größer, dass sie gelesen werden und positive Interaktionen hervorrufen. Und denken Sie daran: Bewährte E-Mail-Praktiken und gute Engagement-Metriken bedeuten eine gute Zustellbarkeit.

Welche schnellen Anpassungen können Sie also an Ihrem E-Mail-Design vornehmen, um Ihre Nachrichten für den Dunkelmodus zu optimieren?

Sie haben Fragen, wir haben die Antworten. Wir haben einige der besten und einfachsten Methoden zusammengestellt, damit Ihre E-Mails auch im Dunkelmodus noch ansprechend aussehen.

Die Optimierung Ihrer E-Mails und Vorlagen für den Dunkelmodus muss gar nicht schwer sein. Nachfolgend haben wir einige unserer besten Design-Tipps zusammengestellt, um helle E-Mails an den Dunkelmodus anzupassen.

Bilder transparent machen

E-Mail-Bilder transparent zu machen ist so einfach wie die Auswahl von Bildern ohne farbigen oder weißen Hintergrund. Transparente Bilder ermöglichen es Ihnen, Logos, Bilder und mehr auf jedem E-Mail-Hintergrund zu platzieren, ohne dass sich die Farben beißen. Transparente Hintergrundbilder, die Sie online finden, haben oft ein weiß-grau kariertes Muster, wie im Beispiel unseres alten Logos unten.

Bilder mit dunklen Hintergrundfarben behalten diese Hintergründe jedoch bei, unabhängig davon, wie die E-Mail aussieht.

Achten Sie darauf, dass Sie Bilder wählen, die auf jedem Hintergrund gleich aussehen, und speichern Sie diese als transparente PNG-Dateien. Wenn Ihre E-Mail im Dunkelmodus geöffnet wird, wirken Ihre Bilder nahtlos und sauber. So kann das Publikum sie betrachten, ohne von einem unordentlichen oder störenden Layout abgelenkt zu werden. Denken Sie auch daran, den Kontrast Ihres Logos auf einem hellen und dunklen Hintergrund zu testen – wenn sich Ihr Logo nicht abhebt, wird die Leserschaft nicht erkennen, dass Sie der Absender sind.

Dunkle Bilder und Schriftarten mit einer weißen Kontur versehen

Während Sie bestimmte Bildhintergründe vermeiden sollten, damit sich Ihre Grafiken in den Dunkelmodus einfügen, möchten Sie manchmal auch die Aufmerksamkeit auf dunkle Schriftarten und Bilder lenken, um deren Sichtbarkeit zu verbessern. In Bildbearbeitungsprogrammen wie Photoshop können Sie Ihren Bildern und Texten ganz einfach eine weiße Kontur hinzufügen. 

Auf diese Weise sehen Ihre Bilder genauso aus wie immer im hellen Modus. Gleichzeitig heben sie sich im Dunkelmodus ab und bleiben für alle lesbar. E-Mails, die nicht gelesen werden können, werden schnell wieder verworfen. Konturen sind jedoch eine einfache Möglichkeit, sowohl die Lesbarkeit als auch die visuelle Wirkung zu erhalten.

Reine Text-E-Mails in Betracht ziehen

Reine Text-E-Mails sind keineswegs zu verachten. Sie verleihen Authentizität und verzichten auf unnötigen, ablenkenden Schnickschnack – einfachere Designs sind dieses Jahr sogar im Trend. Vielleicht verwenden Sie in Ihrem E-Mail-Programm nicht viele Bilder oder aufwendige Logos, oder Sie möchten sich diesen Aufwand lieber ersparen. Der Vorteil von reinen Text-E-Mails besteht darin, dass sie im Dunkelmodus immer problemlos angezeigt werden – ein heller Hintergrund wird dunkel, schwarzer Text wird zu weißem Text, und schon sind Sie fertig. 

Wenn Sie wissen, dass Ihre Kontaktliste schnörkellose E-Mails ohne viel Schnickschnack bevorzugt, könnten reine Text-E-Mails genau das Richtige für Sie sein. Sie sehen gut aus, Ihr Publikum bekommt genau das, was es will, und Ihre Zustellbarkeit bleibt in Topform.

Das E-Mail-Rendering ist ein Albtraum für die Entwicklung. Und natürlich ist das beim Dunkelmodus nicht anders. Da jeder Client E-Mails im Dunkelmodus anders darstellt, ist es schwer, eine Nachricht zu erstellen, die bei allen Anbietern gleich aussieht.

Neben diesen universellen Designempfehlungen gibt es einige Coding-Tricks, mit denen Sie das Dunkelmodus-Erlebnis für Ihre E-Mails individuell anpassen können. 

Dunkelmodus mit Meta-Tags und dem :root-Selektor aktivieren

Verwenden Sie im -Tag, um dem E-Mail-Client mitzuteilen, dass Ihre E-Mail sowohl den hellen als auch den Dunkelmodus unterstützt.

Wenn diese Einstellung in der E-Mail-App der lesenden Person aktiviert ist, sorgen die unten stehenden Meta-Tags dafür, dass der Dunkelmodus aktiviert wird:  

                                

                                    <meta name="color-scheme" content="light dark">rnrn<meta name="supported-color-schemes" content="light dark">
                                
                            

Der :root-Selektor ermöglicht es dem E-Mail-Client, nach dem benötigten Farbschema-Stil zu suchen, ohne alle Stile durchlesen zu müssen.

                                

                                    <style type="text/css">rn:root {rn  color-scheme: light dark;rn  supported-color-schemes: light dark;rn}rn</style>
                                
                            

Dunkelmodus-Stile über eine Media Query hinzufügen

Sie können benutzerdefinierte CSS-Stile erstellen, um festzulegen, wie verschiedene Elemente wie Logos, Schriftfarbe, Hintergrund oder Linktext im Dunkelmodus aussehen sollen.

Fügen Sie diese Media Query zu Ihrem -Block hinzu, um diese Elemente mit den bevorzugten Farbwerten Ihrer Marke zu personalisieren:

                                

                                    @media (prefers-color-scheme: dark ) {rn   /* Shows dark mode logo */rn.dark-logo-wrapper,.dark-logo {rn       display: block !important;rn}rn   /* Hides light mode logo */rn       .light-logo {rn         display: none !important;rn}rnrn   /* Creates a custom dark mode background color */rn  .body {rn    background-color: #282828 !important;rn    color: #ffffff  !important;rn}rnrn /* Sets the font color */rn  h1, h2, h3, p, td {rn    color: #ffffff !important;rn}rnrn/* Sets the text link color */  rn  a { rncolor: #43D6B7 !important;rn}rnrn/* More styles here */  rn}
                                
                            

Sie können dies im Abschnitt  Ihrer E-Mail einfügen, um benutzerdefinierte Dunkelmodus-Stile für iOS, Apple Mail und einige Versionen von Outlook zu erstellen.

Dunkelmodus-spezifischen Elementen die richtigen Klassen und Stile zuweisen

Wenn Sie helle und dunkle Versionen bestimmter Elemente (z. B. Bilder) haben, müssen Sie sicherstellen, dass die von Ihnen erstellten Stile für den Dunkelmodus und den hellen Modus auch dann angezeigt werden, wenn sie sollen. Dies ist besonders wichtig, wenn Sie eine helle und eine dunkle Option für Ihr Logo haben und zwischen diesen wechseln möchten, je nachdem, ob beim Öffnen der E-Mail der Dunkelmodus genutzt wird oder nicht.

 Ein Beispiel dafür, wie das in Ihrem HTML-Code aussehen würde, finden Sie unten:

                                

                                    <!-- start HEADER_LOGO -->rn<a href="https://mailgun.com/" target="_blank">rnrn<img src="https://www.yoursite.com/images/mailgun-light.png" class="light-logo" />rnrn<!-- Hide the dark logo in Outlook and Windows 10 Mail with conditional code but it will be revealed if dark mode is triggered -->rn<div class="dark-logo-wrapper" style="mso-hide: all; display: none;">rn   <img src="https://www.yoursite.com/images/mailgun-dark.png" class="dark-logo" style="display: none;" />rn</div> rnrn</a>rn<!-- end HEADER_LOGO -->rn
                                
                            

Nicht alle diese Lösungen funktionieren in allen Clients. Egal, wie sehr wir uns auch bemühen – unsere E-Mails im Dunkelmodus können in verschiedenen Apps und bei verschiedenen Anbietern leicht unterschiedlich aussehen. Wenn Sie auf Nummer sicher gehen wollen, testen Sie das E-Mail-Rendering vor dem Versand.

Der E-Mail-Dunkelmodus hat sich seit seiner Einführung zu einer beliebten Funktion entwickelt. Sie sollten bereit sein, Ihre E-Mails für Ihre Kontaktliste zu optimieren, wenn Sie Interaktionen mit Ihren E-Mails erzielen und Ihre Zustellbarkeit auf einem gesunden Niveau halten möchten.

Hier sind ein paar einfache Tipps, die Sie beim Versand im Dunkelmodus beachten sollten:

1. Wählen Sie Bilder und Logos, die sich sowohl im hellen Modus als auch im Dunkelmodus abheben.
2. Verwenden Sie nach Möglichkeit transparente Bilder ohne Hintergrund.
3. Fügen Sie eine weiße Kontur hinzu, um dunkle Schriftarten, Logos und Bilder hervorzuheben.
4. Wenn es zu Ihren Kontakten passt, können Sie in Erwägung ziehen, reine Text-E-Mails an Ihre Liste zu senden, um eine automatische und problemlose Anzeige zu gewährleisten.

Am wichtigsten ist jedoch, dass Sie Ihre E-Mails vor dem Versand testen. Die Welt der E-Mails verändert sich ständig – und das gilt auch für den Dunkelmodus. Stellen Sie also sicher, dass Sie Ihre E-Mails auf den beliebtesten E-Mail-Clients in Ihren Listen testen. Sie können dies manuell tun oder E-Mail-Test-Tools nutzen, wie zum Beispiel Litmus oder Email on Acid. 

Seien wir ehrlich. Es mag Ihnen vielleicht etwas Kopfzerbrechen bereiten und kann chaotisch werden, aber die dunkle Seite wird nicht verschwinden. Der E-Mail-Dunkelmodus hat definitiv seine Vorteile in Bezug auf Zustellbarkeit und Barrierefreiheit. Es ist also an der Zeit, ihn einfach anzunehmen. Außerdem brauchen Sie nicht wirklich Darth Vader, Sauron oder einen Besuch im neunten Kreis der Hölle, um alles richtig zu machen.

Autor: Mary Dolan Mary Dolan is a former Community Marketing Manager and Copywriter at Sinch Mailgun. She was our social media guru and community leader. She was dialed into the email network and writes about the email topics and trends you're probably talking about.