Best Practices für das E-Mail-Design im Dark Mode

Übersicht

Hier erfährst du mehr über den Dark Mode, eine Geräteeinstellung, die manche Nutzer*innen aktivieren, um ihre Displays abzudunkeln. Diese Einstellung wirkt sich darauf aus, wie E-Mails angezeigt werden. Der Dark Mode ist eine Endnutzer*innen-Einstellung, die auf Geräteebene ausgewählt wird, und Klaviyo hat keine direkte Kontrolle darüber, wie der Dark Mode auf den einzelnen Geräten implementiert wird.

Warum verwenden Menschen den Dunkelmodus?

Der Dunkelmodus ist beliebt geworden, weil ihm eine Vielzahl von Vorteilen zugeschrieben wird. Nutzer*innen können den Dunkelmodus auswählen, um:

• Augenbelastung minimieren.
• Gesündere Schlafgewohnheiten unterstützen.
• Die Akkulaufzeit eines Geräts verlängern.
• Barrierefreiheit verbessern.

Laut Litmus ist die Anzahl der Personen, die E-Mails im Dark Mode ansehen, von 28 % im Jahr 2021 auf 34 % im Jahr 2022 gestiegen.

Dunkelmodus und dein Branding

Der Dark Mode wirkt sich auf dein E-Mail-Branding aus, indem das HTML angepasst wird, das zum Rendern im Posteingang verwendet wird. Diese Anpassungen können so gering sein wie das Invertieren von Farben in reinen Text-E-Mails (während HTML-E-Mails unverändert bleiben) oder so umfangreich wie das Anpassen jeder Farbe in deiner vollständig gestalteten E-Mail-Vorlage.

Wenn du beim Design deiner E-Mails den Dunkelmodus nicht berücksichtigst, kann das zu schwer lesbarem Text, Farben führen, die nicht zu deinen Markenstilen passen, und mehr.

Sieh dir das Logo von SWAK Cosmetics an. Auf weißem Hintergrund sieht es großartig aus.

Aber wenn es auf einem Gerät im Dunkelmodus angezeigt wird, ist es unmöglich zu lesen.

Beachte die Änderungen in dieser E-Mail-Kopfzeile zwischen dem hellen und dem dunklen Modus. Die Hintergrundfarbe der E-Mail, die Textfarbe und die Farbe der Linkleiste wurden alle invertiert.

Geräte und Betriebssysteme, die den Dunkelmodus anbieten

Die Details der Dark-Mode-Änderungen variieren je nach Gerät und Betriebssystem. Litmus bietet eine Ressource zu den Geräten, die Dark Mode anbieten, und dazu, wie sie HTML-E-Mails behandeln.

Im Allgemeinen fallen Posteingänge in 1 von 2 Kategorien: solche, die minimale oder gar keine Änderungen vornehmen, und solche, die E-Mail-Farben invertieren.

Minimale Änderungen

Einige Posteingänge, wie Apple Mail für Desktop, nehmen keine Änderungen direkt an deinem E-Mail-Inhalt vor (es sei denn, du fügst Dark-Mode-Metadaten-Tags hinzu). In diesem Posteingang ist der einzige Unterschied, den du zwischen einer Nachricht im Dark Mode oder Light Mode siehst, die Farbe hinter deinen Absenderinformationen.

Farbumkehrung

Andere Posteingänge, wie Outlook auf dem Desktop, invertieren deine Farben teilweise. Das bedeutet, dass einige hellere Farben durch dunklere Töne ersetzt werden und einige dunklere Farben durch hellere (z. B. dunkler Text, der zuvor auf einem hellen Hintergrund stand). Das Endergebnis ist eine E-Mail, die deutlich dunkler ist als das Original.

Strategien zur Risikominderung

Es gibt mehrere Strategien, um dein Branding beizubehalten und gleichzeitig für den hellen und dunklen Modus zu optimieren. Wähle die Option aus, die am besten zur Kapazität deines Teams und zu deinen Branding-Anforderungen passt.

Designs unter Berücksichtigung von hellem und dunklem Modus entwickeln

Wenn du Klaviyos Drag-and-drop-Editor verwendest, um deine E-Mails zu versenden, ist diese Strategie am besten. Entwickle deine E-Mail-Vorlagen und behalte dabei im Hinterkopf, welche Änderungen sie auf Geräten im Dark Mode durchlaufen:

• Verwende Logos und Bilder, die auf hellen und dunklen Hintergründen gut aussehen, wie dieses für Bolas Backwaren.
  

• Oder füge einem dunklen Logo mit transparentem Hintergrund einen hellen Schatten hinzu, damit es im dunklen Modus besser hervorsticht.
  

• Alternativ kannst du Bilddateien verwenden, die Hintergrundfarben enthalten, statt einen transparenten Hintergrund zu verwenden. Wenn du diese Option wählst, stelle sicher, dass dein Bild den gesamten Platz ausfüllt, den es einnimmt (z. B. 600 px breit für Bilder in voller Breite).
  

• Verwende nach Möglichkeit Text, statt Bilder zu verwenden, die Text enthalten. Damit ist eine vollständige Farbumkehr möglich (außerdem ist das besser für die Barrierefreiheit).

Benutzerdefinierter Code: dunkle und helle Versionen

Wenn du ein Entwicklerteam hast, das deine HTML-E-Mails von Grund auf individuell programmieren kann, kannst du CSS bereitstellen, das erkennt, ob jemand den Dunkel- oder Hellmodus verwendet, und das Design entsprechend anpasst. Dadurch können bestimmte Dunkelmodus-Standards in einigen Posteingängen überschrieben werden, sodass du mehr Kontrolle hast.

Du kannst @media (prefers-color-scheme: dark) und [data-ogsc] um Benutzer*innen im Dunkelmodus gezielt im Code deiner E-Mail anzusprechen. Erfahre mehr darüber , welche E-Mail-Clients diese Tags unterstützen und welchen Code du in deinen eigenen Designs verwenden solltest.

Verwende E-Mails nur mit Bildern

Wir empfehlen aus verschiedenen Gründen nicht, E-Mails zu verwenden, die nur aus Bildern bestehen:

• Ohne Alternativtext kann deine E-Mail für Posteingänge verdächtig aussehen und im Spam-Ordner landen.
• E-Mails nur mit Bildern sind keine Best Practice für Barrierefreiheit, da sie für viele Menschen und Screenreader schwer zu lesen sind.
• Die Verwendung von E-Mails mit nur Bildern, um ein Erscheinungsbild im Light-Mode zu erzwingen, umgeht die Einstellungen deiner Abonnent*innen.

Viele Marken verwenden diese Strategie, daher lohnt es sich jedoch, sie hier zu erwähnen. E-Mails, die nur aus Bildern bestehen, verlassen sich nicht auf HTML für Farben, Schriftarten, Abstände und mehr. Das bedeutet, dass sie nicht invertiert werden können, sodass Posteingänge eine E-Mail anzeigen, die im Allgemeinen mit deinem ursprünglichen Design übereinstimmt.