Du wirst lernen
Erfahre mehr über den Dunkelmodus, eine Geräteeinstellung, die manche Nutzer/innen aktivieren, um ihr Display abzudunkeln. Diese Einstellung hat Einfluss darauf, wie E-Mails angezeigt werden. Der dunkle Modus ist eine Einstellung des Endnutzers, die auf Geräteebene ausgewählt wird, und Klaviyo hat keine direkte Kontrolle darüber, wie der dunkle Modus auf jedem Gerät implementiert wird.
Warum benutzen die Leute den dunklen Modus?Warum benutzen die Leute den dunklen Modus?
Der dunkle Modus ist populär geworden, weil ihm eine Reihe von Vorteilen zugeschrieben wird. Die Nutzer können den dunklen Modus wählen, um:
- Minimiere die Belastung der Augen.
- Support gesündere Schlafgewohnheiten.
- Verlängere die Batterielebensdauer deines Geräts.
- Verbessere die Zugänglichkeit.
Laut Litmus ist die Anzahl der Personen, die E-Mails im dunklen Modus betrachten, von 28% im Jahr 2021 auf 34% im Jahr 2022 gestiegen.
Dunkler Modus und dein BrandingDunkler Modus und dein Branding
Der dunkle Modus wirkt sich auf dein E-Mail-Branding aus, indem er den HTML-Code anpasst, mit dem die E-Mail im Posteingang dargestellt wird. Diese Anpassungen können so klein 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 aller Farben in deiner vollständig gestalteten E-Mail-Vorlage.
Wenn du den dunklen Modus bei der Gestaltung deiner E-Mail nicht berücksichtigst, kann dies zu schwer lesbarem Text, Farben, die nicht zu deinem Markenstil passen, und vielem mehr führen.
Betrachte das Logo von SWAK Cosmetics. Auf einem weißen Hintergrund sieht es toll aus.
Aber wenn du sie auf einem Gerät mit dunklem Modus anschaust, ist es unmöglich, sie zu lesen.
Beachte die Änderungen in dieser E-Mail-Kopfzeile zwischen hellem und dunklem Modus. Die Hintergrundfarbe der E-Mail, die Textfarbe und die Farbe der Linkleiste wurden alle invertiert.
Geräte und Betriebssysteme, die den Dark Mode anbietenGeräte und Betriebssysteme, die den Dark Mode anbieten
Die Einzelheiten der Änderungen im dunklen Modus variieren je nach Gerät und Betriebssystem. Litmus bietet eine Ressource zu den Geräten, die den Dark Mode anbieten und wie sie HTML-E-Mails behandeln.
Im Allgemeinen lassen sich Posteingänge in 2 Kategorien einteilen: solche, die nur minimale oder gar keine Änderungen vornehmen, und solche, die die E-Mail-Farben umkehren.
Minimale ÄnderungenMinimale Änderungen
Einige Posteingänge, wie Apple Mail für den Desktop, nehmen keine direkten Änderungen an deinem E-Mail-Inhalt vor (es sei denn, du fügst Metatags für den dunklen Modus hinzu). In diesem Posteingang ist die einzige Änderung, die du zwischen einer Nachricht im dunklen und hellen Modus siehst, die Farbe hinter deinen Absenderinformationen.
Farbinvertierung
Andere Posteingänge, wie Outlook auf dem Desktop, invertieren teilweise deine Farben. Das bedeutet, dass einige hellere Farben durch dunklere Farbtöne und einige dunklere Farben durch hellere ersetzt werden (z. B. dunkler Text, der vorher auf hellem Hintergrund stand). Das Ergebnis ist eine E-Mail, die deutlich dunkler ist als das Original.
Minderungsstrategien
Es gibt verschiedene Strategien, wie du dein Branding beibehalten kannst, während du für den hellen und dunklen Modus optimierst. Wähle diejenige, die am besten zu den Kapazitäten deines Teams und zu deinen Anforderungen an das Branding passt.
Entwürfe mit Blick auf den hellen und dunklen Modus entwickelnEntwürfe mit Blick auf den hellen und dunklen Modus entwickeln
Wenn du den Drag-and-Drop-Editor von Klaviyoverwendest, um deine E-Mail zu versenden, ist diese Strategie die beste. Entwickle deine E-Mail-Vorlage und bedenke dabei, welche Veränderungen sie auf Geräten mit dunklem Modus erfahren wird:
- Verwende Logos und Bilder, die auf hellen und dunklen Hintergründen gut aussehen, wie dieses für Bola's Backwaren.
- Oder füge einem dunklen Logo mit transparentem Hintergrund einen hellen Schatten hinzu, damit es im dunklen Modus auffällt.
- Alternativ kannst du auch Bilddateien verwenden, die Hintergrundfarben enthalten, anstatt einen transparenten Hintergrund zu verwenden. Wenn du diese Option wählst, musst du sicherstellen, dass dein Bild den gesamten Platz ausfüllt (z. B. 600 Pixel Breite für Bilder mit voller Breite).
- Verwende, wo immer möglich, Text und nicht Bilder, die Text enthalten. Dies ermöglicht eine vollständige Farbumkehrung (und ist außerdem besser für die Barrierefreiheit).
Benutzerdefinierter Code dunkle und helle Versionen
Wenn du ein Entwicklerteam hast, das deine HTML-E-Mail von Grund auf neu programmieren kann, kannst du CSS bereitstellen, das erkennt, ob ein Betrachter den dunklen oder hellen Modus verwendet und das Design entsprechend anpasst. Damit kannst du bestimmte Voreinstellungen für den dunklen Modus in einigen Posteingängen außer Kraft setzen, sodass du mehr Kontrolle hast.
Jeder Posteingang, jedes Gerät und jedes Betriebssystem ist anders. Deshalb musst du eine Vielzahl von E-Mail-Empfängern berücksichtigen, wenn du eine dunkle und eine helle Version einer E-Mail gestaltest.
Du kannst @media (prefers-color-scheme: dark) und [data-ogsc] verwenden, um im Code deiner E-Mail gezielt Nutzer/innen des dunklen Modus anzusprechen. Erfahre mehr darüber, welche E-Mail-Clients diese Tags unterstützen und welchen Code du in deinen eigenen Designs verwenden kannst.
E-Mail nur mit Bildern verwenden
Wir raten aus verschiedenen Gründen davon ab, reine Bild-E-Mails zu verwenden:
- Ohne Alttext kann deine E-Mail im Posteingang verdächtig aussehen und im Spam-Ordner landen.
- E-Mails, die nur aus Bildern bestehen, sind keine Best Practice für Barrierefreiheit, da sie für viele Menschen und Screenreader schwer zu lesen sind.
- Wenn du eine reine Bild-E-Mail verwendest, um einen Lichtmodus zu erzwingen, umgehst du die Einstellungen deines Abonnenten.
Aber viele Marken nutzen diese Strategie, deshalb ist sie hier erwähnenswert. Reine Bild-E-Mails verlassen sich nicht auf HTML für Farben, Schriftarten, Abstände und mehr. Das bedeutet, dass sie nicht umgedreht werden können, sodass im Posteingang eine E-Mail angezeigt wird, die im Allgemeinen mit deinem ursprünglichen Design übereinstimmt.
Zusätzliche Ressourcen