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, Google Mail 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 es wurde befragt.
Kürzlich haben wir eine Marketing Cloud-Vorlage entwickelt, die den Dark Mode in ihren Code integriert, wodurch die E-Mail-Abschnitte bei der Anzeige in einem E-Mail-Client einen dramatischen Kontrast bilden. Dies ist eine Anstrengung, die zu zusätzlichen Engagement- und Klickraten für Ihre Abonnenten führen kann.
Es kommt nicht oft vor, dass Fortschritte in der E-Mail-Technologie erzielt werden. Daher ist es schön zu sehen, dass diese Erfahrung in der gesamten Branche angewendet wird. Das Verständnis der Best Practices, des zu implementierenden Codes sowie der Clientunterstützung ist entscheidend für den Erfolg Ihrer Implementierung im Dark Mode. Aus diesem Grund veröffentlichte das Team von Uplers diesen Leitfaden für 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 an der 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 Vorgang. Ein Problem, auf das ich gestoßen bin, waren Ausnahmen. Sie möchten beispielsweise weißen Text auf einer Schaltfläche, unabhängig vom Dunkelmodus. 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
