Ang Dark Mode Para sa Email ay Nagkakaroon ng Adoption... Narito Kung Paano Ito Suportahan
Binabawasan ng dark mode ang paggamit ng enerhiya ng screen at pinapataas ang focus. Sinasabi rin ng ilang mga gumagamit na nakakaramdam sila ng nabawasan na strain ng mata, ngunit iyon nga na tinanong.
Patuloy na lumalaki ang paggamit ng dark mode. Available na ngayon ang dark mode sa macOS, iOS, Android, at maraming app, kabilang ang Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, at Reddit. Gayunpaman, hindi palaging may ganap na suporta sa bawat isa. Hindi madalas na may mga pagsulong sa teknolohiya ng email, kaya magandang makita din ang paggamit ng suporta sa dark mode sa email.
Nakita namin ang 28% ng mga user na tumitingin sa Dark Mode noong Agosto 2021. Noong Agosto 2022, tumaas ang bilang na iyon sa halos 34%.
Litmus
Ang pag-unawa sa pinakamahuhusay na kagawian, code na ipapatupad, at suporta sa kliyente ay mahalaga sa iyong tagumpay sa pagpapatupad ng dark mode. Para sa kadahilanang iyon, inilathala ng koponan sa Uplers ang gabay na ito sa dark-mode email support.
Kamakailan lamang, DK New Media nakabuo ng template ng Salesforce Marketing Cloud para sa isang kliyente na nagsama ng Dark Mode, na kapansin-pansing naiiba ang mga seksyon ng email kapag tiningnan sa isang email client. Isa itong pagsisikap na maaaring magdulot ng karagdagang pakikipag-ugnayan at mga click-through rate para sa iyong mga subscriber.
Dark Mode na Email Code
Hakbang 1: Magsama ng metadata upang paganahin ang dark mode sa mga email client – Ang unang hakbang ay paganahin ang dark mode sa email para sa mga subscriber na naka-on ang mga setting ng dark mode. Maaari mong isama ang metadata na ito sa tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Hakbang 2: Isama ang mga estilo ng madilim na mode para sa @media (ginusto ang color-scheme: madilim) - Isulat ang query ng media na ito sa iyong naka-embed tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS), at Outlook App (iOS). Kung ayaw mo ng nakabalangkas na logo sa iyong email, maaari mong gamitin .dark-img
at .light-img
mga klase tulad ng ipinapakita sa ibaba.
@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; }
}
Hakbang 3: Gumamit ng preview ng [data-ogsc] upang madoble ang mga estilo ng madilim na mode - Isama ang mga code na ito para sa email na maging tugma sa madilim na mode sa Outlook app para sa 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; }
Hakbang 3: Magsama ng mga istilong madilim na mode lamang sa body HTML - Ang iyong mga HTML tag ay dapat magkaroon ng tamang mga klase ng madilim na mode.
<!-- 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 -->
Mga Tip sa Madilim na Mode ng Email at Karagdagang Mga Mapagkukunan
Ako ay nagtatrabaho sa Martech Zone araw-araw at lingguhang mga newsletter upang suportahan ang dark mode... siguraduhing mag-subscribe dito. Tulad ng karamihan sa pag-coding ng email, hindi ito simple dahil sa iba't ibang mga email client at kanilang pagmamay-ari na mga pamamaraan ng coding. Ang isang isyu na naranasan ko ay ang mga exception... halimbawa, gusto mo ng puting text sa isang button anuman ang dark mode. Ang dami ng code ay medyo katawa-tawa... Kinailangan kong magkaroon ng mga sumusunod na pagbubukod:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Ang ilang mga karagdagang mapagkukunan:
- Litmus - ang panghuli gabay para sa madilim na mode para sa mga marketer ng email.
- KampanyaMonitor – gabay ng developer sa dark mode para sa email.
Kung gusto mong ma-convert ang iyong mga template ng email para sa suporta sa dark mode, huwag mag-atubiling makipag-ugnayan DK New Media.