„Dark mode“ buvo paleistas vos prieš keletą metų, o jų įsisavinimas vis auga. Tamsus režimas dabar yra prieinamas „MacOS“, „iOS“ ir „Android“, taip pat daugybėje programų, įskaitant „Microsoft Outlook“, „Safari“, „Reddit“, „Twitter“, „Youtube“, „Gmail“ ir „Reddit“. Vis dėlto ne visada teikiama visa pagalba.
Tamsus režimas sumažina ekrano energijos naudojimą ir padidina fokusavimą. Kai kurie vartotojai taip pat teigia jaučiantys akių įtampos sumažėjimą, tačiau taip yra buvo apklaustas.
Neseniai mes sukūrėme „Marketing Cloud“ šabloną, kuris įtraukė „Dark Mode“ į savo kodą, kuris iš tikrųjų daro dramatišką kontrastą el. Pašto skyriuose, kai žiūrima el. Tai pastangos, kurios gali paskatinti papildomą jūsų abonentų įtraukimą ir paspaudimų rodiklius.
Nedažnai yra pažanga el. Pašto technologijose, todėl malonu pastebėti, kad ši patirtis pritaikyta visoje industrijoje. Suprasti geriausią praktiką, įdiegti kodą ir klientų palaikymą yra labai svarbu norint sėkmingai įgyvendinti tamsųjį režimą. Dėl šios priežasties „Uplers“ komanda paskelbė šį vadovą tamsiojo režimo el. pašto palaikymas.
„Dark Mode“ el. Pašto kodas
1 veiksmas: įtraukite metaduomenis, kad įjungtumėte tamsųjį režimą el. Pašto programose - Pirmasis žingsnis - įjungti tamsiąjį režimą el. Laiške abonentams, kuriems įjungti tamsiojo režimo nustatymai. Tai galite padaryti įtraukdami šiuos metaduomenis į žyma.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">2 žingsnis: Įtraukite tamsiojo režimo stilius @media (teikia pirmenybę spalvų schemai: tamsiai) - Parašykite šią medijos užklausą į savo įterptąjį tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, „Outlook 2019“ („macOS“) ir „Outlook App“ („iOS“). Jei el. Laiške nenorite apibūdinto logotipo, galite naudoti .dark-img ir .light-img klases, kaip parodyta žemiau.
@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 žingsnis: Naudokite priešdėlį [data-ogsc], kad dubliuotumėte tamsiojo režimo stilius - Įtraukite šiuos kodus, kad el. Paštas būtų suderinamas su tamsiuoju režimu „Android“ skirtoje „Outlook“ programoje.
[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 žingsnis: į kūno HTML įtraukite tik tamsiojo režimo stilius - Jūsų HTML žymose turi būti tinkamos tamsiojo režimo klasės.
<!-- 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 -->Siųsti „Dark Mode“ el. Pašto patarimus ir papildomus išteklius
Aš dirbau Martech Zone dienos ir savaitės naujienlaiškiai, palaikantys tamsųjį režimą, būtinai užsiprenumeruokite čia. Kaip ir daugumoje el. Pašto kodavimo, tai nėra paprastas procesas dėl skirtingų el. Pašto klientų ir jų patentuotų kodavimo metodikų. Viena problema, su kuria susidūriau, buvo išimtys ... pavyzdžiui, ant mygtuko norite balto teksto, neatsižvelgdami į tamsųjį režimą. Kodo kiekis yra šiek tiek juokingas ... Turėjau turėti šias išimtis:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Keli papildomi ištekliai:
- Lakmusas - galutinis tamsiojo režimo vadovas el. Pašto rinkodaros specialistams.
- „CampaignMonitor“ - kūrėjų vadovas tamsiojo režimo el.
Peržiūrėkite interaktyvią „Uplers“ infografiką
