Email Marketing & Otomasi

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.

mode peteng ing email
Source: Upler

Douglas Karr

Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

Artikel web

Bali menyang ndhuwur tombol
Cedhak

Adblock Dideteksi

Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.