Tamni način za e-poštu postaje sve prihvaćen… Evo kako ga podržati
Tamni način rada smanjuje potrošnju energije ekrana i povećava fokus. Neki korisnici također navode da osjećaju smanjeno naprezanje očiju, ali to je tako je ispitan.
Usvajanje tamnog načina rada nastavlja rasti. Tamni način rada je sada dostupan za macOS, iOS, Android i niz aplikacija, uključujući Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail i Reddit. Međutim, ne postoji uvijek puna podrška za svaki. Nije često da postoje napredak u tehnologiji e-pošte, tako da je lijepo vidjeti usvajanje podrške za tamni način rada i u e-pošti.
U avgustu 28. vidjeli smo 2021% korisnika koji su gledali u tamnom načinu rada. Do avgusta 2022. taj broj se povećao na skoro 34%.
lakmus
Razumijevanje najboljih praksi, koda za implementaciju i klijentske podrške je ključno za uspjeh implementacije mračnog načina rada. Iz tog razloga, tim u Uplersu objavio je ovaj vodič za tamni način rada email support.
Nedavno, DK New Media razvio Salesforce Marketing Cloud predložak za klijenta koji uključuje Dark Mode, dramatično kontrastirajući sekcije e-pošte kada se gledaju u klijentu e-pošte. To je napor koji može dovesti do dodatnog angažmana i stope klikanja za vaše pretplatnike.
Kôd e-pošte u mračnom načinu
Korak 1: Uključite metapodatke da biste omogućili tamni način rada u klijentima e-pošte – Prvi korak je da omogućite tamni režim u e-poruci za pretplatnike sa uključenim postavkama tamnog režima. Možete uključiti ove metapodatke u tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Korak 2: Uključite stilove tamnog načina za @media (preferira-shemu boja: tamno) - Napišite ovaj medijski upit u svoj ugrađeni tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) i Outlook App (iOS). Ako ne želite istaknuti logo u svojoj e-pošti, možete ga koristiti .dark-img
i .light-img
klase kao što je prikazano u nastavku.
@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; }
}
Korak 3: Koristite [data-ogsc] prefiks za dupliciranje stilova tamnog načina - Uključite ove kodove za e-poštu kako bi bila kompatibilna s tamnim načinom rada u aplikaciji Outlook za 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; }
Korak 3: Uključite stilove samo u tamnom načinu u HTML tijela - Vaše HTML oznake moraju imati odgovarajuće klase tamnog načina rada.
<!-- 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 -->
Pošaljite mračni savjet putem mraka i dodatne resurse
Radio sam na Martech Zone dnevne i nedjeljne biltene za podršku tamnom načinu rada… svakako pretplatite se ovdje. Kao i kod većine kodiranja e-pošte, nije jednostavno zbog različitih klijenata e-pošte i njihovih vlastitih metodologija kodiranja. Jedan problem na koji sam naišao su izuzeci... na primjer, želite bijeli tekst na gumbu bez obzira na tamni način rada. Količina koda je pomalo smiješna... Morao sam imati sljedeće izuzetke:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Neki dodatni resursi:
- lakmus - krajnji vodič za tamni način rada za trgovce e-poštom.
- CampaignMonitor – vodič za programere za tamni način rada za e-poštu.
Ako želite da se vaši predlošci e-pošte konvertuju za podršku za tamni način rada, ne ustručavajte se obratiti se DK New Media.