Däischter Modus fir E-Mail kritt Adoptioun ... Hei ass wéi Dir et ënnerstëtzen
Däischter Modus reduzéiert Écran Energieverbrauch a erhéicht de Fokus. E puer Benotzer soen och datt se eng reduzéiert Aenbelaaschtung fillen, awer dat ass gefrot ginn.
Däischter Modus Adoptioun wiisst weider. Däischter Modus ass elo verfügbar iwwer macOS, iOS, Android, an eng ganz Partie Apps, dorënner Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail a Reddit. Et gëtt awer net ëmmer voll Ënnerstëtzung iwwer all. Et ass net dacks datt et Fortschrëtter an der E-Mail-Technologie sinn, also ass et flott d'Adoptioun vun der Donkelmodus Support an der E-Mail och ze gesinn.
Mir hunn 28% vun de Benotzer gesinn am Dark Mode am August 2021. Bis August 2022 ass dës Zuel op bal 34% eropgaang.
Litmus
Best Practices verstoen, Code fir ëmzesetzen, a Client Ënnerstëtzung ass kritesch fir Ären Implementéierungssuccès vum Dark Mode. Aus deem Grond huet d'Equipe vun Uplers dëse Guide fir däischter Modus publizéiert E - Mail ënnerstëtzen.
viru kuerzem, DK New Media entwéckelt eng Salesforce Marketing Cloud Schabloun fir e Client deen Dark Mode integréiert huet, dramatesch kontrastéiert d'E-Mail Sektiounen wann se an engem E-Mail Client gekuckt ginn. Et ass en Effort deen zousätzlech Engagement a Klickraten fir Är Abonnente fuere kann.
Däischter Modus E-Mail Code
Schrëtt 1: Maacht Metadaten fir den Däischteren Modus an E-Mail Clienten z'aktivéieren - Den éischte Schrëtt ass den Däischter Modus an der E-Mail z'aktivéieren fir Abonnente mat Däischter Modus Astellungen ageschalt. Dir kënnt dës Metadaten an der tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Schrëtt 2: Gitt donkel Modus Stiler fir @media (léiwer Faarf-Schema: donkel) - Schreift dës Medieufro an Ärem agebett tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS), an Outlook App (iOS). Wann Dir net e skizzéierte Logo an Ärer E-Mail wëllt, kënnt Dir benotzen .dark-img
an .light-img
Klassen wéi ënnendrënner gewisen.
@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; }
}
Schrëtt 3: Benotzt de [data-ogsc] Präfix fir de Dark Mode Stiler ze duplizéieren - Gitt dës Coden fir d'E-Mail mat dem Däischtere Modus an der Outlook App fir Android kompatibel ze sinn.
[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; }
Schrëtt 3: Füügt däischter Modus nëmmen Stiler op de Kierper HTML an - Är HTML Tags mussen déi richteg Dark Mode Klassen hunn.
<!-- 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 -->
Email Dark Mode Tipps an zousätzlech Ressourcen
Ech hunn un der Martech Zone alldeeglech a wëchentlech Newslettere fir däischter Modus z'ënnerstëtzen ... gitt sécher abonnéieren. Wéi mat de meeschte E-Mail Kodéierung, ass et net einfach wéinst de verschiddenen E-Mail Clienten an hir propriétaire Kodéierungsmethodologien. Een Thema, op deem ech gerannt sinn, war Ausnahmen ... zum Beispill, Dir wëllt wäiss Text op engem Knäppchen onofhängeg vum donkelen Modus. D'Quantitéit vum Code ass e bësse lächerlech ... Ech hu missen déi folgend Ausnahmen hunn:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
E puer zousätzlech Ressourcen:
- Litmus - den ultimative Guide fir Däischtermodus fir E-Mail Marketing.
- CampaignMonitor - Den Entwéckler Guide fir däischter Modus fir E-Mail.
Wann Dir wëllt datt Är E-Mail-Templates fir däischter Modus-Ënnerstëtzung ëmgewandelt ginn, zéckt net fir z'erreechen DK New Media.