E-Mail-Marketing & Automatisierung

Der dunkle Modus für E-Mails wird immer beliebter … Hier erfahren Sie, wie Sie ihn unterstützen können

Der Dunkelmodus reduziert den Energieverbrauch des Bildschirms und erhöht den Fokus. Einige Benutzer geben auch an, dass sie eine geringere Augenbelastung verspüren, aber das stimmt wurde befragt.

Die Akzeptanz des Dark Mode nimmt weiter zu. Der Dunkelmodus ist jetzt für macOS, iOS, Android und eine Vielzahl von Apps verfügbar, darunter Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail und Reddit. Allerdings gibt es nicht immer die volle Unterstützung für alle. Es kommt nicht oft vor, dass es Fortschritte in der E-Mail-Technologie gibt, daher ist es schön zu sehen, dass die Unterstützung des Dunkelmodus auch in E-Mails eingeführt wird.

Im August 28 sahen wir 2021 % der Nutzer, die Inhalte im Dunkelmodus sahen. Bis August 2022 war diese Zahl auf fast 34 % gestiegen.

Lackmus

Das Verständnis von Best Practices, zu implementierendem Code und Client-Support ist entscheidend für den Implementierungserfolg des Dunkelmodus. Aus diesem Grund hat das Team von Uplers diesen Leitfaden zum Dunkelmodus veröffentlicht email Unterstützung.

Kürzlich wurde gezeigt, dass DK New Media entwickelte eine Salesforce Marketing Cloud-Vorlage für einen Kunden, die den Dunkelmodus enthielt und die E-Mail-Abschnitte bei der Anzeige in einem E-Mail-Client dramatisch kontrastierte. Dies ist eine Maßnahme, die möglicherweise zu mehr Engagement und Klickraten für Ihre Abonnenten führt.

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 mit aktivierten Dunkelmoduseinstellungen zu aktivieren. Sie können diese Metadaten in die einfügen 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 wünschen, können Sie es verwenden .dark-img und .light-img Klassen wie unten gezeigt.

@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 … unbedingt tun Abonnieren Sie hier. Wie bei den meisten E-Mail-Codierungen ist dies aufgrund der unterschiedlichen E-Mail-Clients und ihrer proprietären Codierungsmethoden nicht einfach. Ein Problem, auf das ich gestoßen bin, waren Ausnahmen … Sie möchten beispielsweise unabhängig vom Dunkelmodus weißen Text auf einer Schaltfläche haben. Die Menge an Code ist etwas lächerlich ... Ich musste die folgenden Ausnahmen machen:

@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 – der Entwicklerleitfaden zum Dunkelmodus für E-Mail.

Wenn Sie möchten, dass Ihre E-Mail-Vorlagen für die Unterstützung des Dunkelmodus konvertiert werden, wenden Sie sich bitte an DK New Media.

dunkler Modus in E-Mails
Quelle: Obermaterial

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.