Tamni način rada pokrenut je prije samo nekoliko godina i usvajanje nastavlja rasti. Tamni režim sada je dostupan na macOS-u, iOS-u i Androidu, kao i na mnoštvu aplikacija, uključujući Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail i Reddit. Ne postoji uvijek puna podrška za svaku od njih.
Tamni način rada smanjuje potrošnju energije na ekranu i povećava fokus. Neki korisnici također navode da osjećaju smanjenje naprezanja očiju, ali to je je ispitan.
Nedavno smo razvili predložak Marketing Cloud koji je u svoj kôd ugradio Dark Mode zbog čega su odjeljci e-pošte dramatično kontrastni kada se gledaju u klijentu e-pošte. To je napor koji može pokrenuti dodatno angažman i stope klikanja za vaše pretplatnike.
Nije često napredak u tehnologiji e-pošte, pa je lijepo vidjeti usvajanje ovog iskustva u industriji. Razumijevanje najboljih praksi, koda za implementaciju, kao i korisničke podrške je presudno za uspjeh vaše implementacije mračnog načina rada. Iz tog razloga je tim iz Uplersa objavio ovaj vodič za mračna podrška e-poštom.
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 omogućiti tamni način rada u e-pošti za pretplatnike koji imaju uključene postavke tamnog načina rada. To možete učiniti uključivanjem ovih metapodataka 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 logotip u svojoj e-pošti, možete koristiti klase .dark-img i .light-img 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 tjedne biltene koji podržavaju tamni način rada, svakako pretplatite se ovdje. Kao i kod većine kodiranja e-pošte, to nije jednostavan postupak zbog različitih klijenata e-pošte i njihovih vlasničkih metodologija kodiranja. Jedno izdanje na koje sam naišao bili 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 e-pošte.
Pogledajte interaktivnu infografiku Uplers
