E-postmarkedsføring og automatisering

Mørk modus for e-post er i ferd med å bli tatt i bruk... Her er hvordan du støtter det

Mørk modus reduserer skjermens energiforbruk og øker fokus. Noen brukere oppgir også at de føler en redusert belastning på øynene, men det er det blitt avhørt.

Mørk modus-adopsjon fortsetter å vokse. Mørk modus er nå tilgjengelig på tvers av macOS, iOS, Android og en rekke apper, inkludert Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail og Reddit. Det er imidlertid ikke alltid full støtte på tvers av hver. Det er ikke ofte det er fremskritt innen e-postteknologi, så det er hyggelig å se bruken av mørk modus-støtte i e-post også.

Vi så 28 % av brukerne som så i mørk modus i august 2021. I august 2022 hadde dette tallet økt til nesten 34 %.

Lakmus

Å forstå beste fremgangsmåter, kode som skal implementeres og klientstøtte er avgjørende for at du skal lykkes med implementeringen av mørk modus. Av den grunn publiserte teamet hos Uplers denne guiden til mørk modus e-poststøtte.

Nylig, DK New Media utviklet en Salesforce Marketing Cloud-mal for en klient som inkorporerte mørk modus, og kontrasterte e-postdelene dramatisk når de ble vist i en e-postklient. Det er en innsats som kan øke engasjement og klikkfrekvens for abonnentene dine.

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 med mørk modus-innstillinger slått på. Du kan 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-appen (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 å gjøre det abonnere her. Som med de fleste e-postkoding, er det ikke enkelt på grunn av de forskjellige e-postklientene og deres proprietære kodingsmetoder. Et problem jeg møtte 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 – utviklerveiledningen til mørk modus for e-post.

Hvis du vil at e-postmalene dine skal konverteres til støtte for mørk modus, ikke nøl med å ta kontakt DK New Media.

mørk modus i e-post
kilde: Uplers

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.