Mode Gelap Kanggo Email Entuk Adoption… Mangkene Cara Ndhukung
Mode peteng nyuda panggunaan energi layar lan nambah fokus. Sawetara pangguna uga nyatakake yen dheweke ngrasakake ketegangan mata sing suda, nanging ngono wis ditakoni.
Adopsi mode peteng terus berkembang. Mode peteng saiki kasedhiya ing macOS, iOS, Android, lan akeh aplikasi, kalebu Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, lan Reddit. Ora mesthi ana dhukungan lengkap ing saben. Ora asring ana kemajuan ing teknologi email, mula luwih becik ndeleng dhukungan mode peteng ing email uga.
Kita weruh 28% pangguna ndeleng ing Mode Gelap ing Agustus 2021. Ing wulan Agustus 2022, jumlah kasebut saya tambah meh 34%.
Litmus
Ngerteni praktik paling apik, kode sing kudu dileksanakake, lan dhukungan klien penting kanggo sukses implementasine mode peteng. Mulane, tim ing Uplers nerbitake pandhuan iki kanggo mode peteng dhukungan email.
bubar, DK New Media ngembangake template Salesforce Marketing Cloud kanggo klien sing nggabungake Mode Gelap, kanthi dramatis mbedakake bagean email nalika dideleng ing klien email. Iki minangka upaya sing bisa nyebabake keterlibatan tambahan lan tarif klik-tayang kanggo pelanggan sampeyan.
Kode Email Mode Gelap
Langkah 1: Kalebu metadata kanggo ngaktifake mode peteng ing klien email - Langkah pisanan yaiku ngaktifake mode peteng ing email kanggo pelanggan kanthi setelan mode peteng diuripake. Sampeyan bisa nyakup metadata iki ing tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Langkah 2: Kalebu gaya mode peteng kanggo @media (milih-warna-skema: peteng) - Tulis pitakon media iki ing semat sampeyan tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS), lan Outlook App (iOS). Yen sampeyan ora pengin logo mbatesi ing email, sampeyan bisa nggunakake .dark-img
lan .light-img
kelas kaya ing ngisor iki.
@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: Gunakake awalan [data-ogsc] kanggo duplikat gaya mode peteng - Kalebu kode kasebut supaya email bisa kompatibel karo mode peteng ing aplikasi Outlook kanggo 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: Kalebu gaya mung mode gelap menyang HTML awak - Tag HTML sampeyan kudu duwe kelas mode peteng sing bener.
<!-- 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 -->
Email Tips Mode Gelap lan Sumber Daya Tambahan
Aku wis nggarap Martech Zone buletin saben dina lan mingguan kanggo ndhukung mode peteng… dadi manawa kanggo langganan kene. Kaya umume coding email, ora gampang amarga klien email sing beda-beda lan metodologi coding kepemilikan. Salah sawijining masalah sing daklakoni yaiku pangecualian ... contone, sampeyan pengin teks putih ing tombol preduli saka mode peteng. Jumlah kode rada konyol… Aku kudu duwe pengecualian ing ngisor iki:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Sawetara sumber tambahan:
- Litmus - pandhuan utama kanggo mode peteng kanggo para pemasar email.
- KampanyeMonitor – Pandhuan pangembang kanggo mode peteng kanggo email.
Yen sampeyan pengin template email diowahi kanggo dhukungan mode peteng, aja ragu-ragu hubungi DK New Media.