Mørk tilstand til e-mail er ved at blive vedtaget... Sådan understøtter du det
Mørk tilstand reducerer skærmens energiforbrug og øger fokus. Nogle brugere angiver også, at de føler en reduceret belastning af øjnene, men det er det blevet afhørt.
Brugen af mørk tilstand fortsætter med at vokse. Mørk tilstand er nu tilgængelig på tværs af macOS, iOS, Android og en lang række apps, herunder Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail og Reddit. Der er dog ikke altid fuld støtte på tværs af hver. Det er ikke ofte, der er fremskridt inden for e-mail-teknologi, så det er rart at se vedtagelsen af mørk tilstandssupport i e-mail også.
Vi så 28 % af brugerne, der så i mørk tilstand i august 2021. I august 2022 var dette antal steget til næsten 34 %.
Lakmus
Forståelse af bedste praksis, kode til implementering og klientsupport er afgørende for din implementeringssucces af mørk tilstand. Af den grund udgav teamet hos Uplers denne guide til mørk tilstand e-mail-support.
For nylig, DK New Media udviklet en Salesforce Marketing Cloud-skabelon til en klient, der inkorporerede Dark Mode, der dramatisk kontrasterede e-mailsektionerne, når de ses i en e-mailklient. Det er en indsats, der kan skabe yderligere engagement og klikrater for dine abonnenter.
E-mail-kode i mørk tilstand
Trin 1: Inkluder metadata for at aktivere mørk tilstand i e-mail-klienter – Det første trin er at aktivere mørk tilstand i e-mailen for abonnenter med indstillinger for mørk tilstand slået til. Du kan inkludere disse metadata i tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Trin 2: Inkluder mørke tilstandsformater til @media (foretrækker farveskema: mørk) - Skriv denne medieforespørgsel i din integrerede tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) og Outlook App (iOS). Hvis du ikke ønsker et skitseret logo i din e-mail, kan du bruge .dark-img
, .light-img
klasser som vist nedenfor.
@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; }
}
Trin 3: Brug [data-ogsc] -præfikset til at duplikere stilarter i mørk tilstand - Inkluder disse koder, så e-mailen er kompatibel med mørk tilstand i Outlook-appen til Android.
[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; }
Trin 3: Inkluder kun mørke mode-stilarter til body-HTML'en - Dine HTML-tags skal have de korrekte klasser i mørk tilstand.
<!-- 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 Tips om mørk tilstand og yderligere ressourcer
Jeg har arbejdet på Martech Zone daglige og ugentlige nyhedsbreve for at understøtte mørk tilstand... sørg for at tilmeld dig her. Som med de fleste e-mail-kodninger, er det ikke nemt på grund af de forskellige e-mail-klienter og deres proprietære kodningsmetoder. Et problem, jeg stødte på, var undtagelser ... for eksempel vil du have hvid tekst på en knap uanset mørk tilstand. Mængden af kode er lidt latterlig... Jeg var nødt til at have følgende undtagelser:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Nogle yderligere ressourcer:
- Lakmus - den ultimative guide til mørk tilstand for e-mail-marketingfolk.
- CampaignMonitor – udviklerens guide til mørk tilstand til e-mail.
Hvis du vil have dine e-mail-skabeloner konverteret til understøttelse af mørk tilstand, så tøv ikke med at kontakte DK New Media.