Dark mode ble lansert for bare noen få år siden, og adopsjonen fortsetter å vokse. Mørk modus er nå tilgjengelig på tvers av macOS, iOS og Android, samt en rekke apper, inkludert Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail og Reddit. Det er ikke alltid full støtte på tvers av hver, skjønt.
Mørk modus reduserer skjermens energiforbruk og øker fokus. Noen brukere oppgir også at de føler en reduksjon i belastningen i øynene, men det er blitt avhørt.
Nylig utviklet vi en Marketing Cloud-mal som inkorporerte mørk modus i koden som virkelig gjør e-postdelene dramatisk kontrasterte når de vises i en e-postklient. Det er en innsats som kan øke ekstra engasjement og klikkfrekvenser for abonnentene dine.
Det er ikke ofte det er fremskritt innen e-postteknologi, så det er hyggelig å se adopsjonen av denne opplevelsen i hele bransjen. Forståelse av beste praksis, kode som skal implementeres, samt kundestøtte er avgjørende for at implementeringen din lykkes i mørk modus. Av den grunn publiserte teamet hos Uplers denne guiden til e-poststøtte for mørk modus.
Dark Mode e-postkode
Trinn 1: Inkluder metadata for å aktivere mørk modus i e-postklienter - Det første trinnet er å aktivere mørk modus i e-posten for abonnenter som har innstillingene for mørk modus slått på. Du kan gjøre det ved å inkludere disse metadataene i stikkord.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Trinn 2: Inkluder mørke modusstiler for @media (foretrekker fargevalg: mørkt) - Skriv dette mediespørsmålet i det innebygde tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) og Outlook App (iOS). Hvis du ikke vil ha en skissert logo i e-posten din, kan du bruke .dark-img og .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; }
}Trinn 3: Bruk [data-ogsc] prefiks for å duplisere mørke modusstiler - Inkluder disse kodene for at e-postmeldingen skal være kompatibel med mørk modus i Outlook-appen for 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; }Trinn 3: Inkluder mørke modus-bare stiler til kroppens HTML - HTML-kodene dine må ha de riktige klassene i mørk modus.
<!-- 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 -->Send tips og tilleggsressurser om mørk modus
Jeg har jobbet med Martech Zone daglige og ukentlige nyhetsbrev for å støtte mørk modus, sørg for å abonnere her. Som med de fleste e-postkoder, er det ikke en enkel prosess på grunn av de forskjellige e-postklientene og deres proprietære kodingsmetoder. Et problem jeg kom inn på var unntak ... for eksempel vil du ha hvit tekst på en knapp uavhengig av mørk modus. Mengden kode er litt latterlig ... Jeg måtte ha følgende unntak:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Noen ekstra ressurser:
- Lakmus - den ultimate guiden for mørk modus for e-postmarkedsførere.
- CampaignMonitor - utviklerne guider til mørk modus for e-post.
Se Uplers Interactive Infographic
