Tsjustere modus foar e-post wurdt oannommen ... Hjir is hoe't jo it kinne stypje
Tsjustere modus ferleget skerm enerzjyferbrûk en fergruttet fokus. Guon brûkers jouwe ek oan dat se in fermindere eachspanning fiele, mar dat is binne ûnderfrege.
Oanname fan donkere modus bliuwt groeie. Tsjustere modus is no beskikber foar macOS, iOS, Android, en in gasthear fan apps, ynklusyf Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail en Reddit. D'r is lykwols net altyd folsleine stipe oer elk. It is net faak dat d'r foarútgong binne yn e-posttechnology, dus it is moai om de oanname fan tsjustere modus-stipe ek yn e-post te sjen.
Wy seagen 28% fan brûkers yn 'e Dark Mode yn augustus 2021. Tsjin augustus 2022 wie dat oantal tanommen nei hast 34%.
Litmus
Begryp fan bêste praktiken, koade om te ymplementearjen, en kliïntstipe is kritysk foar jo ymplemintaasje súkses fan donkere modus. Om dy reden publisearre it team by Uplers dizze hantlieding foar tsjustere modus e-post stipe.
koartlyn, DK New Media ûntwikkele in Salesforce Marketing Cloud-sjabloan foar in klant dy't Dark Mode opnaam, dramatysk kontrastearjende de e-postseksjes as se wurde besjoen yn in e-postkliïnt. It is in poging dy't ekstra belutsenens en trochklikraten foar jo abonnees kin driuwe.
E-postkoade foar donkere modus
Stap 1: Meitsje metadata yn om donkere modus yn te skeakeljen yn e-postkliïnten - De earste stap is om tsjustere modus yn te skeakeljen yn 'e e-post foar abonnees mei ynstellingen foar tsjustere modus ynskeakele. Jo kinne dizze metadata opnimme yn 'e tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Stap 2: Inkludearje donkere modusstilen foar @media (foarkar-kleurskema: tsjuster) - Skriuw dizze mediafraach yn jo ynbêde tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS), en Outlook App (iOS). As jo gjin omskreaun logo yn jo e-post wolle, kinne jo gebrûk meitsje fan .dark-img
en .light-img
klassen lykas werjûn hjirûnder.
@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: Brûk [data-ogsc] foarheaksel om dûbele modusstilen te duplisearjen - Befetsje dizze koades foar de e-post om kompatibel te wêzen mei donkere modus yn Outlook app foar 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: Slút allinich stilen yn tsjustere modus op oan it HTML fan it lichem - Jo HTML-tags moatte de juste lessen yn 'e donkere modus hawwe.
<!-- 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-post tips en oanfoljende boarnen foar donkere modus
Ik haw wurke oan 'e Martech Zone deistige en wyklikse nijsbrieven om tsjustere modus te stypjen ... wês der wis fan abonnearje hjir. Lykas by de measte e-postkodearring, is it net ienfâldich fanwegen de ferskate e-postkliïnten en har proprietêre kodearringmetoaden. Ien probleem dat ik tsjinkaam wie útsûnderingen ... jo wolle bygelyks wite tekst op in knop nettsjinsteande donkere modus. De hoemannichte koade is in bytsje bespotlik ... ik moast de folgjende útsûnderingen hawwe:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Guon ekstra boarnen:
- Litmus - de ultime gids foar donkere modus foar e-postmarketeers.
- Kampanantmonitor - de hantlieding foar ûntwikkelders foar tsjustere modus foar e-post.
As jo wolle dat jo e-postsjabloanen wurde omboud foar stipe foar tsjustere modus, aarzel dan net om te berikken DK New Media.