Der Dark-Modus wurde erst vor wenigen Jahren gestartet und die Akzeptanz nimmt weiter zu. Dunkler Modus ist jetzt für macOS, iOS und Android sowie für eine Vielzahl von Apps verfügbar, darunter Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail und Reddit. Es gibt jedoch nicht immer die volle Unterstützung für alle.
Der Dunkelmodus reduziert den Energieverbrauch des Bildschirms und erhöht den Fokus. Einige Benutzer geben auch an, dass sie eine Verringerung der Augenbelastung spüren, aber das ist wurde befragt.
Vor kurzem haben wir eine Marketing Cloud-Vorlage entwickelt, die den Dark Mode in ihren Code integriert hat, wodurch die E-Mail-Abschnitte bei der Anzeige in einem E-Mail-Client wirklich dramatisch kontrastiert werden. Dies ist eine Anstrengung, die möglicherweise zu zusätzlichen Interaktionen und Klickraten für Ihre Abonnenten führt.
Es kommt nicht oft vor, dass es Fortschritte in der E-Mail-Technologie gibt, daher ist es schön zu sehen, dass diese Erfahrung in der gesamten Branche übernommen wird. Das Verständnis der Best Practices, des zu implementierenden Codes sowie des Client-Supports ist entscheidend für den Erfolg Ihrer Implementierung des Dunkelmodus. Aus diesem Grund hat das Team von Uplers diesen Leitfaden veröffentlicht an E-Mail-Unterstützung im dunklen Modus.
E-Mail-Code im dunklen Modus
Schritt 1: Fügen Sie Metadaten hinzu, um den Dunkelmodus in E-Mail-Clients zu aktivieren - Der erste Schritt besteht darin, den Dunkelmodus in der E-Mail für Abonnenten zu aktivieren, deren Dunkelmoduseinstellungen aktiviert sind. Sie können dies tun, indem Sie diese Metadaten in die Etikett.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Schritt 2: Fügen Sie dunkle Modusstile für @media hinzu (bevorzugt Farbschema: dunkel) - Schreiben Sie diese Medienabfrage in Ihr Embedded tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) und Outlook App (iOS). Wenn Sie kein umrissenes Logo in Ihrer E-Mail haben möchten, können Sie die Klassen .dark-img und .light-img wie unten gezeigt verwenden.
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}Schritt 3: Verwenden Sie das Präfix [data-ogsc], um Stile im dunklen Modus zu duplizieren - Fügen Sie diese Codes ein, damit die E-Mail mit dem Dunkelmodus in der Outlook-App für Android kompatibel ist.
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }Schritt 3: Fügen Sie dem Text-HTML nur Stile im dunklen Modus hinzu - Ihre HTML-Tags müssen die richtigen Dunkelmodusklassen haben.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->E-Mail-Tipps für den dunklen Modus und zusätzliche Ressourcen
Ich habe daran gearbeitet Martech Zone Tägliche und wöchentliche Newsletter zur Unterstützung des Dunkelmodus Abonnieren Sie hier. Wie bei den meisten E-Mail-Codierungen ist dies aufgrund der unterschiedlichen E-Mail-Clients und ihrer proprietären Codierungsmethoden kein einfacher Prozess. Ein Problem, auf das ich gestoßen bin, waren Ausnahmen … zum Beispiel möchten Sie unabhängig vom Dunkelmodus weißen Text auf einer Schaltfläche. Die Menge an Code ist ein bisschen lächerlich… Ich musste die folgenden Ausnahmen haben:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Einige zusätzliche Ressourcen:
- Lackmus - der ultimative Leitfaden für den Dark-Modus für E-Mail-Vermarkter.
- Kampagnenmonitor - Die Entwickleranleitung zum dunklen Modus für E-Mails.
Uplers Interactive Infographic anzeigen
