Tume režiim e-kirjadele: mis see on? Millised kliendid seda toetavad? Mis koodi on vaja?

Tume režiim käivitati vaid paar aastat tagasi ja lapsendamine kasvab jätkuvalt. Tume režiim on nüüd saadaval nii macOS-is, iOS-is ja Androidis kui ka paljudes rakendustes, sealhulgas Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail ja Reddit. Kõiki ei toetata alati täielikult.

Tume režiim vähendab ekraani energiakasutust ja suurendab fookust. Mõned kasutajad väidavad ka, et tunnevad silmade koormuse vähenemist, kuid see on nii küsitletud.

Hiljuti töötasime välja Marketing Cloudi malli, mis integreeris oma koodi Dark Mode, mis muudab e-posti jaotised e-posti kliendis vaadatuna dramaatiliselt kontrastseks. See on pingutus, mis võib teie tellijatele suurendada seotust ja klikkimise määra.

E-posti tehnoloogia valdkonnas pole sageli arengut, nii et on tore näha selle kogemuse kasutuselevõttu kogu tööstuses. Parimate tavade, rakendatava koodi ja klienditoe mõistmine on pimedas režiimis edukaks rakendamiseks ülioluline. Sel põhjusel avaldas Uplersi meeskond selle juhendi pimedas režiimis e-posti tugi.

Tumeda režiimi e-posti kood

1. samm: kaasake metaandmed e-posti klientide pimerežiimi lubamiseks - Esimene samm on e-posti aadressi lubamine tellijatele, kelle tumeda režiimi seaded on sisse lülitatud. Selleks saate lisada need metaandmed silt.

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

2. samm: lisage pimedas režiimis stiilid @ media jaoks (eelistab värviskeemi: tume) - Kirjutage see meediumipäring manustatud manusesse tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) ja Outlook App (iOS). Kui te ei soovi oma e-kirjas ülevaatlikku logo, võite kasutada .dark-img ja .light-img klasse, nagu allpool näidatud.

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

3. samm: pimeda režiimi stiilide dubleerimiseks kasutage eesliidet [data-ogsc] - Lisage need koodid, et e-post ühilduks pimedas režiimis Androidi rakenduses Outlook.

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

3. samm: kaasake keha HTML-i ainult pimedas režiimis kasutatavad stiilid - Teie HTML-märgenditel peavad olema õiged tumeda režiimi klassid.

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

Saada e-posti teel pimedas režiimis näpunäited ja lisaressursid

Olen selle kallal töötanud Martech Zone pimeda režiimi toetamiseks tuleb kindlasti teha iga päev ja nädalas infolehti tellige siia. Nagu enamiku e-posti kodeerimise puhul, pole see erinevate e-posti klientide ja nende varaliste kodeerimismetoodikate tõttu lihtne. Üks probleem, millega kokku puutusin, oli erandid ... näiteks soovite nupule valget teksti, hoolimata tumedast režiimist. Koodi maht on natuke naeruväärne ... Mul pidid olema järgmised erandid:

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

Mõned täiendavad ressursid:

• Lakmus - ülim pimedas režiimis juhend e-posti turundajatele.
• CampaignMonitor - arendajate juhend pimedas režiimis e-posti jaoks.

Kuva Uplersi interaktiivne infograafik