Mod Gelap Untuk E-mel Semakin Digunapakai… Inilah Cara Menyokongnya
Mod gelap mengurangkan penggunaan tenaga skrin dan meningkatkan fokus. Sesetengah pengguna juga menyatakan bahawa mereka merasakan ketegangan mata berkurangan, tetapi itulah telah disoal.
Penggunaan mod gelap terus berkembang. Mod gelap kini tersedia merentas macOS, iOS, Android dan pelbagai apl, termasuk Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail dan Reddit. Walau bagaimanapun, tidak selalu ada sokongan penuh pada setiap satu. Tidak selalunya terdapat kemajuan dalam teknologi e-mel, jadi senang melihat penggunaan sokongan mod gelap dalam e-mel juga.
Kami melihat 28% pengguna melihat dalam Mod Gelap pada Ogos 2021. Menjelang Ogos 2022, jumlah itu telah meningkat kepada hampir 34%.
Litmus
Memahami amalan terbaik, kod untuk dilaksanakan dan sokongan pelanggan adalah penting untuk kejayaan pelaksanaan mod gelap anda. Atas sebab itu, pasukan di Uplers menerbitkan panduan ini kepada mod gelap sokongan e-mel.
Baru-baru ini, DK New Media membangunkan templat Awan Pemasaran Salesforce untuk pelanggan yang menggabungkan Mod Gelap, secara dramatik membezakan bahagian e-mel apabila dilihat dalam klien e-mel. Ini merupakan usaha yang boleh mendorong penglibatan tambahan dan kadar klik lalu untuk pelanggan anda.
Kod E-mel Mod Gelap
Langkah 1: Sertakan metadata untuk mengaktifkan mod gelap pada pelanggan e-mel – Langkah pertama ialah mendayakan mod gelap dalam e-mel untuk pelanggan dengan tetapan mod gelap dihidupkan. Anda boleh memasukkan metadata ini dalam tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Langkah 2: Sertakan gaya mod gelap untuk @media (preferers-warna-skema: gelap) - Tulis pertanyaan media ini di dalam anda tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) dan Outlook App (iOS). Jika anda tidak mahu logo yang digariskan dalam e-mel anda, anda boleh menggunakannya .dark-img
and .light-img
kelas seperti yang ditunjukkan di bawah.
@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; }
}
Langkah 3: Gunakan awalan [data-ogsc] untuk menggandakan gaya mod gelap - Sertakan kod ini agar e-mel sesuai dengan mod gelap di aplikasi Outlook untuk 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; }
Langkah 3: Sertakan gaya mod gelap sahaja ke HTML badan - Tag HTML anda mesti mempunyai kelas mod gelap yang betul.
<!-- 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 -->
Petua Mod Gelap dan Sumber Tambahan
Saya telah mengusahakan Martech Zone surat berita harian dan mingguan untuk menyokong mod gelap… pastikan anda langgan di sini. Seperti kebanyakan pengekodan e-mel, ia tidak mudah kerana pelanggan e-mel yang berbeza dan metodologi pengekodan proprietari mereka. Satu isu yang saya hadapi ialah pengecualian... contohnya, anda mahukan teks putih pada butang tanpa mengira mod gelap. Jumlah kod agak tidak masuk akal… Saya terpaksa mempunyai pengecualian berikut:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Beberapa sumber tambahan:
- Litmus - panduan utama untuk mod gelap untuk pemasar e-mel.
- CampaignMonitor – panduan pembangun kepada mod gelap untuk e-mel.
Jika anda mahu templat e-mel anda ditukar untuk sokongan mod gelap, jangan teragak-agak untuk menghubunginya DK New Media.