Dunkler Modus für E-Mail-Inhalte dark-mode
Dunkler Modus ermöglicht es einem unterstützenden E-Mail-Client oder einer unterstützenden App, E-Mails mit dunkleren Hintergründen und helleren Farben für Text, Schaltflächen und andere visuelle Elemente anzuzeigen. Diese Art von Display reduziert die Belastung der Augen, spart Akkulaufzeit und verbessert die Lesbarkeit in schwach beleuchteten Umgebungen für ein angenehmeres Betrachtungserlebnis. Aufgrund des wachsenden Trends bei den wichtigsten Betriebssystemen und Apps ist es jetzt eine wichtige Überlegung im modernen E-Mail-Design, sicherzustellen, dass Inhalte für alle Benutzer lesbar und visuell ansprechend bleiben.
Wenn Sie E-MailInhalt erstellen) im visuellen Journey Optimizer B2B Edition-Design-Bereich wechseln Sie zur Ansicht Dunkelmodus . In dieser Ansicht können Sie auch spezifische benutzerdefinierte Einstellungen für unterstützende E-Mail-Clients definieren, wenn deren Dunkelmodus aktiviert ist.
Überlegungen zum E-Mail-Client
Die Art und Weise, wie verschiedene E-Mail-Clients und Apps den Dunkelmodus anwenden, ist sehr unterschiedlich. Daher sollten Sie die Erwartungen an das Rendering im Dunkelmodus mit Vorsicht überlegen. Bevor Sie den Dunkelmodus im E-Mail-Design-Bereich verwenden, sollten Sie die folgenden Anwendungsfälle für E-Mail-Clients berücksichtigen:
Einige E-Mail-Clients unterstützen diese Funktion überhaupt nicht, z. B.:
- Yahoo! Mail
- AOL
Wenn Sie benutzerdefinierte Einstellungen für den Dunkelmodus im E-Mail-Design definieren, können diese E-Mail-Clients keinen Dark-Mode-Rendering anzeigen.
Einige E-Mail-Clients wenden ihren eigenen standardmäßigen Dunkelmodus systematisch auf alle empfangenen E-Mails an. Sie passen Farben, Hintergründe, Bilder und andere Elemente automatisch an die Einstellungen für den Dunkelmodus an. Externe Einstellungen sind nicht möglich. Zu diesen Clients gehören:
- Gmail (Desktop-Webmail, iOS, Android™, mobile Webmail)
- Outlook Windows
- Outlook Windows Mail
In diesem Fall überschreiben die Client-Einstellungen für den Dunkelmodus die benutzerdefinierten Einstellungen für den Dunkelmodus, die Sie in Journey Optimizer B2B Edition definieren
Viele der beliebtesten E-Mail-Clients bieten die Option, den benutzerdefinierten Dunkelmodus mit der @media (prefers-color-scheme: dark)-Abfrage zu rendern, was die Methode ist, die von den Journey Optimizer B2B Edition E-Mail-Stilen verwendet wird. Diese Kundenliste umfasst:
- Apple Mail für macOS
- Apple Mail für iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In diesem Fall werden die spezifischen Einstellungen gerendert, die Sie im Journey Optimizer B2B Edition definieren. Je nach E-Mail-Client können jedoch einige Einschränkungen gelten. Einige Clients (z. B. Apple Mail 16 (macOS 13)) generieren beispielsweise keinen Dunkelmodus, wenn im E-Mail-Inhalt Bilder vorhanden sind.
Um optimale Ergebnisse zu erzielen, testen Sie Ihren Inhalt mit den E-Mail-Clients, auf die Sie abzielen. Um eine Simulation anzuzeigen, die dem Endergebnis für jeden Client so nahe kommt wie möglich, verwenden Sie die Integration Litmus Email Test Rendering im E-Mail-Design-Bereich.
Design für den Dunkelmodus
Wenn Sie Ihre E-Mail-Inhalte für den Dunkelmodus in Journey Optimizer B2B Edition gestalten, bietet der visuelle Design-Bereich zwei Arten von Tools:
-
Verwenden Sie die Vorschaufunktion, um das standardmäßige Dark-Mode-Rendering für die meisten unterstützenden E-Mail-Clients zu überprüfen.
-
Wenn Sie die Standardeinstellungen unterstützender E-Mail-Clients überschreiben möchten, definieren und wenden Sie benutzerdefinierte Einstellungen für den Dunkelmodus auf Ihren E-Mail-Inhalt an. Weitere Informationen
Vorschau des standardmäßigen dunklen Modus preview-dark-mode
-
Öffnen Sie den E-Mail-Inhalt im E-Mail-Design-Bereich.
Oben rechts auf der Arbeitsfläche gibt es einen Hell-Dunkel-Selektor, der die Inhaltsanzeige zwischen Hell- (Standard) und Dunkelmodus umschaltet.
-
Ändern Sie den Selektor in Dunkelmodus (
Auf der Arbeitsfläche wird der Inhalt mit der standardmäßigen Vorschau des dunklen Modus angezeigt.x
Standardmäßig wendet die Dunkelmodusvorschau das
full color invertFarbschema auf alle Elemente außer Bildern und Symbolen an. Dieses Farbschema erkennt Bereiche mit hellen und dunklen Elementen und invertiert sie. Helle Hintergründe werden dunkel und dunkler Text wird hell, oder dunkle Hintergründe werden hell und heller Text wird dunkel.
Definieren benutzerdefinierter Einstellungen für den Dunkelmodus 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 des Empfängers aktiviert ist (sofern er diese Funktion unterstützt).
Der benutzerdefinierte Dunkelmodus-Stil im E-Mail-Design verwendet die @media (prefers-color-scheme: dark) CSS-Abfrage, die erkennt, ob der E-Mail-Client auf den Dunkelmodus eingestellt ist, und das dunkle Design anwendet, das in Ihrer E-Mail definiert ist.
So definieren Sie benutzerdefinierte Einstellungen für den Dunkelmodus :
-
Verschieben Sie bei Bedarf die Auswahl in Dunkelmodus (
-
Bearbeiten Sie alle Stilattribute wie Text, Hintergrund oder Schaltflächen.
-
Definieren Sie für die Bilder und Symbole bestimmte Assets nur für den Dunkelmodus.
Sie können die Farben von Bildern und Symbolen nicht ändern, aber Sie können alternative Assets definieren, die für den Dunkelmodus verwendet werden sollen. Sie können mit verschiedenen Farbkombinationen für Ihre Symbole experimentieren oder Anpassungen für Farbe und Sättigung für fotografische Bilder vornehmen.
Wählen Sie ein beliebiges Bild aus und wechseln Sie Dunkelmodus mithilfe des entsprechenden Umschalters im Bereich Einstellungen. Wählen Sie dann ein anderes Bild-Asset aus.
Weitere Informationen Auswahl eines Bild-Assets finden unter „Hinzufügen von Bild-Assets“.
-
Wählen Sie zu einem beliebigen Zeitpunkt während der Designänderungen Zur Live-Ansicht wechseln, um zu überprüfen, wie Ihre Inhalte möglicherweise auf verschiedenen Gerätegrößen gerendert werden.
Ändern Sie in dieser Ansicht den Selektor in Dunkelmodus (
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 des Empfängers variieren. -
Wenn die Änderungen am Dunkelmodus abgeschlossen sind, klicken Sie auf Inhalt simulieren.
Testen Sie Ihr E-Mail-Design mit den Vorschau- und Proofing-Tools. Weitere finden Sie unter „Vorschau und Test E-Mail-Inhalts“.
-
Wenn Sie über ein Litmus Enterprise-Konto verfügen, wählen Sie E-Mail rendern aus, um das endgültige Rendering des Dunkelmodus für verschiedene E-Mail-Clients in Litmus anzuzeigen.
Weitere Informationen finden unter „Testen von EMail-Rendering mit Litmus“.
note caution CAUTION Während die Simulation der Darstellung von E-Mails im Dunkelmodus sehr nahe kommt, kann das tatsächliche Rendering aufgrund von Variationen bei E-Mail-Dienstanbietern 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 folgenden Best Practices, um visuelle Konsistenz, Barrierefreiheit und Markenintegrität sicherzustellen:
Checkliste:
- Speichern Sie Logos und Symbole als PNG-Dateien mit transparentem Hintergrund, um sichtbare weiße Kästchen im Dunkelmodus 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.
Checkliste:
- 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 Dunkelmodus, sodass wichtige Informationen weiterhin sichtbar sind.
Checkliste:
- 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 Web Content Accessibility Guidelines (WCAG) Standards zu erfüllen. Verwenden Sie Tools wie WebAIM Contrast Checker, 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.
- Überspringen Sie reines Weiß auf reinem Schwarz, was zu Augenbelastungen führen kann und in einigen E-Mail-Clients automatisch invertiert werden könnte.
- Wenn der dunkle Modus nicht unterstützt wird, können Sie barrierefreie Fallback-Stile bereitstellen.
Checkliste:
- Verwenden Sie die Dunkelmodusvorschau im E-Mail-Design-Bereich, der invertierte Farbschemata verwendet, um Probleme frühzeitig zu erkennen.
- Verwenden Sie ein Litmus Enterprise-Konto mit der Option E-Mail rendern, um Ihre Designs für gängige E-Mail-Clients (wie Apple Mail, Gmail und Outlook) zu simulieren und zu sehen, wie sich Farben und Bilder im Dunkelmodus verhalten.