E-postmarknadsföring och automation

Mörkt läge för e-post börjar bli populärt... Så här stöder du det

Mörkt läge minskar skärmens energianvändning och ökar fokus. Vissa användare uppger också att de känner en minskad ansträngning på ögonen, men så är det har ifrågasatts.

Användningen av mörkt läge fortsätter att växa. Mörkt läge är nu tillgängligt för macOS, iOS, Android och en mängd appar, inklusive Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail och Reddit. Det finns dock inte alltid fullt stöd för var och en. Det är inte ofta som det sker framsteg inom e-postteknik, så det är trevligt att se antagandet av stöd för mörkt läge i e-post också.

Vi såg 28 % av användarna som tittade i mörkt läge i augusti 2021. I augusti 2022 hade den siffran ökat till nästan 34 %.

Litmus

Att förstå bästa praxis, kod att implementera och klientsupport är avgörande för din implementeringsframgång av mörkt läge. Av den anledningen publicerade teamet på Uplers den här guiden till mörkt läge e-postsupport.

Nyligen, DK New Media utvecklat en Salesforce Marketing Cloud-mall för en klient som inkorporerade mörkt läge, vilket dramatiskt kontrasterar e-postsektionerna när de visas i en e-postklient. Det är ett försök som kan leda till ytterligare engagemang och klickfrekvenser för dina prenumeranter.

E-postkod för mörkt läge

Steg 1: Inkludera metadata för att aktivera mörkt läge i e-postklienter – Det första steget är att aktivera mörkt läge i e-postmeddelandet för prenumeranter med mörkt lägesinställningar aktiverade. Du kan inkludera denna metadata i märka.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Steg 2: Inkludera stilar för mörkt läge för @media (föredrar färgschema: mörk) - Skriv den här mediefrågan i din inbäddade tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) och Outlook App (iOS). Om du inte vill ha en designad logotyp i din e-post kan du använda .dark-img och .light-img klasser enligt nedan.

@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; } 
}

Steg 3: Använd prefixet [data-ogsc] för att duplicera stilar i mörkt läge - Inkludera dessa koder för att e-postmeddelandet ska vara kompatibelt med mörkt läge i Outlook-appen för 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; }

Steg 3: Inkludera endast mörka lägen stilar till body HTML - Dina HTML-taggar måste ha rätt klasser i mörkt läge.

<!-- 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 -->

Skicka tips om mörkt läge via e-post och ytterligare resurser

Jag har jobbat med Martech Zone dagliga och veckovisa nyhetsbrev för att stödja mörkt läge... se till att göra det prenumerera här. Som med de flesta e-postkodningar är det inte enkelt på grund av de olika e-postklienterna och deras proprietära kodningsmetoder. Ett problem jag stötte på var undantag ... till exempel vill du ha vit text på en knapp oavsett mörkt läge. Mängden kod är lite löjlig... Jag var tvungen att ha följande undantag:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

Några ytterligare resurser:

  • Litmus - den ultimata guiden för mörkt läge för e-postmarknadsförare.
  • CampaignMonitor – utvecklarens guide till mörkt läge för e-post.

Om du vill att dina e-postmallar konverteras för stöd för mörkt läge, tveka inte att kontakta DK New Media.

mörkt läge i e-postmeddelanden
källa: Uplers

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.