Donker modus vir e-pos: wat is dit? Watter kliënte ondersteun dit? Watter kode word benodig?

Donker modus is 'n paar jaar gelede van stapel gestuur en die aanneming groei steeds. Donker af is nou beskikbaar op macOS, iOS en Android, sowel as 'n aantal programme, waaronder Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail en Reddit. Daar is egter nie altyd volle ondersteuning nie.

Donker modus verminder die energieverbruik van die skerm en verhoog die fokus. Sommige gebruikers sê ook dat hulle 'n vermindering in die oogdruk het, maar dit is ondervra is.

Onlangs het ons 'n Marketing Cloud-sjabloon ontwikkel wat Dark Mode in sy kode opgeneem het wat die e-posgedeeltes dramaties laat kontrasteer as dit in 'n e-poskliënt gesien word. Dit is 'n poging wat addisionele betrokkenheid en klik-deur tariewe vir u intekenare kan verhoog.

Daar is nie gereeld vooruitgang in e-postegnologie nie, dus dit is lekker om hierdie ervaring in die bedryf te aanvaar. Die begrip van beste praktyke, kode wat u moet implementeer, sowel as kliëntondersteuning, is van kardinale belang vir die sukses van die implementering van die donker modus. Om die rede het die span by Uplers hierdie gids gepubliseer donkermodus-e-posondersteuning.

Donker modus e-poskode

Stap 1: Sluit metadata in om die donker modus by e-poskliënte in te skakel - Die eerste stap is om die donker modus in die e-pos aan te skakel vir intekenare wat hul donker modus instellings aangeskakel het. U kan dit doen deur hierdie metadata in die tag.

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

Stap 2: Sluit donkermodusstyle in vir @media (verkies kleurskema: donker) - Skryf hierdie media-navraag in u ingebedde tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) en Outlook App (iOS). As u nie 'n uitgestippelde logo in u e-pos wil hê nie, kan u .dark-img- en .light-img-klasse gebruik soos hieronder getoon.

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

Stap 3: Gebruik die voorvoegsel [data-ogsc] om donkermodusstyle te dupliseer - Sluit hierdie kodes in sodat die e-pos versoenbaar is met die donker modus in die Outlook-app vir 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; }

Stap 3: Sluit slegs donkermodusstyle by die hoof-HTML in - U HTML-etikette moet die regte donkermodusklasse hê.

<!-- 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-pos wenke en addisionele bronne vir die donker modus

Ek het gewerk aan die Martech Zone daaglikse en weeklikse nuusbriewe om die donker modus te ondersteun, maak seker dat Teken hier in. Soos met die meeste e-poskoderinge, is dit nie 'n eenvoudige proses nie as gevolg van die verskillende e-poskliënte en hul eie koderingsmetodologieë. Een probleem wat ek raakgeloop het, was uitsonderings ... byvoorbeeld, u wil wit teks op 'n knoppie hê, ongeag die donker modus. Die hoeveelheid kode is 'n bietjie belaglik ... Ek moes die volgende uitsonderings hê:

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

Enkele bykomende bronne:

• lakmoes - die beste gids vir donker modus vir e-posbemarkers.
• CampaignMonitor - die ontwikkelaars lei na die donker modus vir e-pos.

Bekyk Uplers Interaktiewe Infografiese