E-mail marketing og automatisering

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.

mørk tilstand i e-mails
kilde: Uplers

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.