Verwalten von Inhalten für den dunklen Modus dark-mode
Beim Gestalten Ihrer E-Mails können Sie mit dem Journey Optimizer E-Mail-Designer zur Ansicht Dunkler Modus wechseln.
In der Ansicht „Dunkler Modus“ von können Sie auch spezifische benutzerdefinierte Einstellungen definieren, die von den unterstützenden E-Mail-Clients angezeigt werden, wenn ihr dunkler Modus aktiviert ist.
Was ist der dunkle Modus? what-is-dark-mode
Das Rendering des dunklen Modus in den verschiedenen E-Mail-Clients ist komplex. Definieren wir zunächst den dunklen Modus.
Der dunkle Modus ermöglicht es unterstützenden E-Mail-Clients und Anwendungen, E-Mails mit dunkleren Hintergründen und helleren Farben für Text, Schaltflächen und andere UI-Elemente anzuzeigen. Dadurch werden die Augen entlastet, die Akkulaufzeit verlängert und die Lesbarkeit in schwach beleuchteten Umgebungen verbessert – für ein angenehmeres Seherlebnis.
Da der dunkle Modus zunehmend von führenden Betriebssystemen und Anwendungen unterstützt wird, ist er zu einem wichtigen Bestandteil des modernen E-Mail-Designs geworden, um sicherzustellen, dass Inhalte für alle Nutzenden lesbar und visuell ansprechend bleiben.
Leitlinien guardrails
Die Erwartungen hinsichtlich des Renderings im dunklen Modus sollten unter Vorbehalt betrachtet werden, da die Umsetzung je nach E-Mail-Client stark variieren kann.
Bevor Sie den dunklen Modus im E-Mail-Designer von Journey Optimizer verwenden, müssen Sie wissen, wie die wichtigsten E-Mail-Clients damit umgehen. Es sind drei Fälle zu unterscheiden:
Clients, die keinen dunklen Modus unterstützen not-supporting
Einige E-Mail-Clients unterstützen diese Funktion überhaupt nicht, z. B.:
- Yahoo!Mail
- AOL
Unabhängig davon, ob Sie im E-Mail-Designer benutzerdefinierte Einstellungen für den dunklen Modus festlegen oder nicht, zeigen diese E-Mail-Clients niemals ein Rendering im dunklen Modus an.
Clients, die ihren eigenen dunklen Modus anwenden default-support
Einige E-Mail-Clients wenden systematisch ihren eigenen standardmäßigen dunklen Modus auf alle empfangenen E-Mails an. Farben, Hintergründe, Bilder usw. werden automatisch mit den für den E-Mail-Client spezifischen Einstellungen für den dunklen Modus angepasst, was bedeutet, dass keine externe Änderung möglich ist.
Zu diesen Clients gehören zum Beispiel:
- Gmail (Desktop-Webmail, iOS, Android, Mobile-Webmail)
- Outlook Windows
- Outlook Windows Mail
In diesem Fall werden benutzerdefinierte Einstellungen, die Sie im E-Mail-Designer für den dunklen Modus festlegen, durch die Einstellungen des E-Mail-Clients überschrieben.
Es ist wichtig zu verstehen, dass diese E-Mail-Clients zwar den dunklen Modus unterstützen, Ihr spezifisches Design für den dunklen Modus jedoch nicht gerendert wird.
Clients, die den benutzerdefinierten dunklen Modus unterstützen custom-support
Andere E-Mail-Clients bieten die Option, den benutzerdefinierten dunklen Modus mit der Abfrage @media (prefers-color-scheme: dark) zu rendern. Diese Methode wird auch vom E-Mail-Designer von Journey Optimizer verwendet.
Im Folgenden finden Sie eine Liste der wichtigsten Clients, die diese Option unterstützen:
- Apple Mail für macOS
- Apple Mail für iOS
- Outlook für macOS
- Outlook.com
- Outlook für iOS
- Outlook für Android
In diesem Fall sollten die spezifischen Einstellungen angezeigt werden, die im E-Mail-Designer festgelegt wurden.
Je nach E-Mail-Client können jedoch einige Einschränkungen gelten. Beispielsweise erzeugen einige Clients wie Apple Mail 16 (macOS 13) keinen dunklen Modus, wenn im E-Mail-Content Bilder vorhanden sind.
Um optimale Ergebnisse zu erzielen, testen Sie Ihre Inhalte mit den beabsichtigten E-Mail-Clients. Um eine Simulation anzuzeigen, die dem Endergebnis für jeden Client so nahe wie möglich kommt, verwenden Sie die Option E-Mail-Rendering im E-Mail-Designer.
Dunkler Modus im E-Mail-Designer dark-mode-email-designer
Beim dunklen Modus im E-Mail-Designer sind zwei Aspekte zu berücksichtigen:
-
Sie können eine Vorschau anzeigen, wie der standardmäßige dunkle Modus in den meisten unterstützenden E-Mail-Clients gerendert wird. Weitere Informationen
-
Wenn Sie die Standardeinstellungen unterstützender E-Mail-Clients überschreiben möchten, können Sie benutzerdefinierte Einstellungen für den dunklen Modus definieren, die auf die E-Mail angewendet werden, die Sie bearbeiten. Weitere Informationen
Vorschau des standardmäßigen dunklen Modus preview-dark-mode
Gehen Sie wie folgt vor, um auf den dunklen Modus im E-Mail-Designer zuzugreifen und eine Vorschau der Einstellungen für den standardmäßigen dunklen Modus zu erhalten.
-
Wählen Sie auf der Startseite des E-Mail-Designers die Option Inhalte von Grund auf neu erstellen aus. Weitere Informationen
-
Fügen Sie Ihrem Inhalt Strukturen und Inhaltskomponenten hinzu.
-
Schalten Sie oben rechts auf der zentralen Arbeitsfläche den Umschalter in den dunklen Modus.
-
Die Vorschau des standardmäßigen dunklen Modus wird angezeigt.
Standardmäßig wendet die Vorschau des dunklen Modus im E-Mail-Designer das Farbschema „Vollfarbinvertierung“ auf alle Elemente außer auf Bilder und Symbole an.
Das bedeutet, dass Bereiche mit hellen und dunklen Elementen erkannt und invertiert werden, sodass helle Hintergründe dunkel und dunkler Text hell werden, während dunkle Hintergründe hell und heller Text dunkel werden.
Definieren des benutzerdefinierten dunklen Modus define-custom-dark-mode
Nach dem Wechsel in den dunklen Modus können Sie bestimmte Stilelemente Ihres Inhalts bearbeiten, die nur angezeigt werden, wenn der dunkle Modus im E-Mail-Client der Empfängerin bzw. des Empfängers aktiviert ist, sofern diese Funktion unterstützt wird.
Um den Stil des E-Mail-Designers für den benutzerdefinierten dunklen Modus zu nutzen, verwendet Journey Optimizer die CSS-Abfrage @media (prefers-color-scheme: dark), die erkennt, ob der E-Mail-Client der Benutzerin oder des Benutzers auf den dunklen Modus eingestellt ist, und wendet das in Ihrer E-Mail definierte dunkle Design an.
Gehen Sie wie folgt vor, um die Einstellungen für den benutzerdefinierten dunklen Modus zu definieren.
-
Stellen Sie sicher, dass Sie im E-Mail-Designer in den Dunklen Modus wechseln. Weitere Informationen
-
Bearbeiten Sie alle Stilattribute wie Text, Hintergrund, Schaltflächen usw.
-
Sie können die Farben von Bildern und Symbolen nicht ändern, Sie können jedoch bestimmte Assets nur für den dunklen Modus definieren. Wählen Sie dazu ein Bild aus. Wechseln Sie über den entsprechenden Umschalter im Bereich Einstellungen zu Dunkler Modus und wählen Sie ein anderes Asset aus.
-
Sie können jederzeit die Option Zur Live-Ansicht wechseln wählen, um zu überprüfen, wie Ihre Inhalte auf verschiedenen Gerätegrößen gerendert werden. Wählen Sie in dieser Ansicht den Umschalter für den dunklen Modus oben auf dem Bildschirm aus, um eine Vorschau der Version Ihres Inhalts im dunklen Modus auf den verschiedenen Geräten anzuzeigen.
note caution CAUTION Die Live-Ansicht ist eine allgemeine Vorschau, die vergleicht, wie das Rendering über verschiedene Gerätegrößen hinweg aussehen könnte. Das endgültige Rendering kann je nach E-Mail-Client der Empfängerinnen und Empfänger variieren. -
Wenn Sie mit den Änderungen für den dunklen Modus zufrieden sind, klicken Sie auf Inhalt simulieren.
-
Wählen Sie E-Mail rendern und verbinden Sie sich mit Ihrem Litmus-Konto. Sie können das endgültige Rendering des dunklen Modus für verschiedene E-Mail-Clients sehen. Erfahren Sie mehr zum E-Mail-Rendering.
note warning WARNING Auch wenn die Simulation dem Aussehen von E-Mails im dunklen Modus sehr nahe kommt, kann das tatsächliche Rendering aufgrund von Variationen bei E-Mail-Service-Anbietern oder Einstellungen auf Geräteebene unterschiedlich sein.
Best Practices best-practices
Da der dunkle Modus in den wichtigsten E-Mail-Clients immer beliebter wird, müssen Sie berücksichtigen, wie Ihre E-Mails in hellen und dunklen Umgebungen gerendert werden – unabhängig davon, ob Sie einen benutzerdefinierten dunklen Modus verwenden oder nicht.
Der dunkle Modus kann Farben, Hintergründe und Bilder verändern – und manchmal bestimmte Design-Entscheidungen überschreiben. Befolgen Sie die unten aufgeführten Best Practices, um visuelle Konsistenz, Barrierefreiheit und Markenintegrität sicherzustellen.
Optimieren Ihrer Bilder und Logos
-
Speichern Sie Logos und Symbole als PNGs mit transparentem Hintergrund, um sichtbare weiße Felder im dunklen Modus zu vermeiden.
-
Vermeiden Sie Bilder mit hartcodierten weißen oder hellen Hintergründen.
-
Wenn Transparenz nicht möglich ist, platzieren Sie Bilder in Ihrem Design auf einem einfarbigen Hintergrund, um unangenehme Farbinversionen zu verhindern.
Beachten Ihrer Hintergründe
-
Stellen Sie einen ausreichenden Kontrast zwischen Text- und Hintergrundfarben sicher, damit die Lesbarkeit sowohl im hellen als auch im dunklen Modus gewahrt bleibt.
-
Vermeiden Sie es, sich bei kritischen Inhalten allein auf Hintergrundfarben zu verlassen. Einige Clients überschreiben Hintergrundfarben im dunklen Modus, sodass Sie sicherstellen müssen, dass wichtige Informationen weiterhin sichtbar sind.
Entwerfen barrierefreier Inhalte im dunklen Modus
-
Verwenden Sie Farbkombinationen, die für Menschen mit Farbenblindheit leicht zu unterscheiden sind.
-
Verwenden Sie eine Mitteltonpalette, um sowohl vor hellen als auch vor dunklen Hintergründen einen Kontrast sicherzustellen.
-
Verwenden Sie barrierefreie Farbkombinationen mit hohem Kontrast, um die Lesbarkeit zu verbessern und die WCAG-Standards (Web Content Accessibility Guidelines) zu erfüllen. Verwenden Sie Tools wie die Kontrastprüfung von WebAIM, um den Farbkontrast zu überprüfen.
-
Vermeiden Sie dünne Schriftarten, da sie die Lesbarkeit beeinträchtigen können. Wenn für Ihre Marke eine dünne Schriftart erforderlich ist, verwenden Sie sie für den dunklen Modus eine Fettformatierung.
-
Vermeiden Sie reines Weiß auf reinem Schwarz, da dies die Augen belasten kann und von einigen E-Mail-Clients möglicherweise automatisch invertiert wird.
-
Wenn der dunkle Modus nicht unterstützt wird, können Sie barrierefreie Fallback-Stile bereitstellen.
Testen Ihrer E-Mails in einer Umgebung im dunklen Modus
-
Nutzen Sie die Vorschau des dunklen Modus im E-Mail-Designer. Diese verwendet invertierte Farbschemata, sodass Sie Probleme frühzeitig erkennen.
-
Verwenden Sie die Option E-Mail-Rendering, die Litmus zur Simulation Ihrer Designs in wichtigen E-Mail-Clients (Apple Mail, Gmail, Outlook) nutzt, damit Sie sehen, wie sich Farben und Bilder im dunklen Modus verhalten.