Dunkler Modus für E-Mail-Content 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 Marketo Optimizer-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 email-client-considerations
Die Art und Weise, wie verschiedene E-Mail-Clients und Apps den Dunkelmodus anwenden, ist sehr unterschiedlich. Beachten Sie daher die Erwartungen an das Rendering im Dunkelmodus mit Vorsicht. 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 im Dunkelmodus an, und 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 Marketo Optimizer definieren.
Viele der beliebtesten E-Mail-Clients unterstützen das benutzerdefinierte Dark-Mode-Rendering mit der @media (prefers-color-scheme: dark)-Abfrage, bei der es sich um die von den Marketo Optimizer E-Mail-Stilen verwendete Methode handelt. 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, die Sie in Marketo Optimizer definieren, gerendert. 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.
Design für den Dunkelmodus
Der Marketo Optimizer visuelle Design-Bereich bietet zwei Arten von Tools zum Formatieren von E-Mail-Inhalten im Dunkelmodus:
-
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.
Anzeigen des standardmäßigen dunklen Modus in der Vorschau 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.
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.
Festlegen der benutzerdefinierten Einstellungen für den dunklen Modus custom-dark-mode
Nach dem Wechsel in den Dunkelmodus können Sie bestimmte Stilelemente Ihres Inhalts bearbeiten, die nur angezeigt werden, wenn der Dunkelmodus im E-Mail-Client des Empfängers aktiviert ist (sofern er diese Funktion unterstützt).
Der benutzerdefinierte Dunkelmodus-Stil verwendet die @media (prefers-color-scheme: dark) CSS-Abfrage, um zu erkennen, ob der E-Mail-Client auf den Dunkelmodus eingestellt ist, und um Ihr definiertes Dunkelmotiv-Design anzuwenden.
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 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 in der Asset-Auswahl von Marketo Design Studio ein anderes Bild-Asset aus.
Weitere zur Auswahl eines Bild-Assets finden Sie „Einfügen eines Bildes aus Marketo Design Studio“.
-
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, um die Vorschau- und Proofing-Tools zum Testen Ihres E-Mail-Designs zu verwenden.
-
Wenn Sie über ein Litmus Enterprise-Konto verfügen, wählen Sie E-Mail rendern, um das endgültige Dark-Mode-Rendering für verschiedene E-Mail-Clients in der Litmus-Integration anzuzeigen.
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 die Akzeptanz des Dunkelmodus in den wichtigsten E-Mail-Clients zunimmt, ist es wichtig zu berücksichtigen, wie Ihre E-Mails in hellen und dunklen Umgebungen gerendert werden - unabhängig davon, ob Sie benutzerdefinierten Dunkelmodus 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 kritischem Content 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 im dunklen Modus eine fette Variante.
- Überspringen Sie reines Weiß auf reinem Schwarz, was zu Augenbelastungen führen kann und in einigen E-Mail-Clients automatisch invertiert werden könnte.
- Stellen Sie barrierefreie Fallback-Stile bereit, wenn der dunkle Modus nicht unterstützt wird.
Checkliste:
- Verwenden Sie die Dunkelmodusvorschau im E-Mail-Design-Bereich, der invertierte Farbschemata verwendet, um Probleme frühzeitig zu erkennen.
- Wenn Sie über ein Litmus Enterprise-Konto verfügen, verwenden Sie die Option E-Mail rendern, um Ihre Designs auf wichtigen E-Mail-Clients (wie Apple Mail, Gmail und Outlook) zu simulieren und zu sehen, wie sich Farben und Bilder im Dunkelmodus verhalten.