Pemasaran & Otomasi Email

Mode Gelap Untuk Email Mulai Diadopsi… Inilah Cara Mendukungnya

Mode gelap mengurangi penggunaan energi layar dan meningkatkan fokus. Beberapa pengguna juga menyatakan bahwa mereka merasakan berkurangnya ketegangan mata, tapi itu saja telah diinterogasi.

Adopsi mode gelap terus berkembang. Mode gelap kini tersedia di macOS, iOS, Android, dan sejumlah aplikasi, termasuk Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail, dan Reddit. Namun, tidak selalu ada dukungan penuh dari masing-masing pihak. Kemajuan dalam teknologi email jarang terjadi, jadi senang melihat penerapan dukungan mode gelap di email juga.

Kami melihat 28% pengguna menonton dalam Mode Gelap pada Agustus 2021. Pada Agustus 2022, jumlah tersebut meningkat hingga hampir 34%.

Lakmus

Memahami praktik terbaik, kode untuk diterapkan, dan dukungan klien sangat penting untuk keberhasilan penerapan mode gelap Anda. Oleh karena itu, tim di Uplers menerbitkan panduan mode gelap ini dukungan email.

Baru-baru ini DK New Media mengembangkan template Salesforce Marketing Cloud untuk klien yang menyertakan Mode Gelap, sehingga sangat kontras dengan bagian email saat dilihat di klien email. Ini merupakan upaya yang dapat mendorong keterlibatan tambahan dan rasio klik-tayang bagi pelanggan Anda.

Kode Email Mode Gelap

Langkah 1: Sertakan metadata untuk mengaktifkan mode gelap di klien email – Langkah pertama adalah mengaktifkan mode gelap di email untuk pelanggan dengan pengaturan mode gelap diaktifkan. Anda dapat memasukkan metadata ini ke dalam menandai.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Langkah 2: Sertakan gaya mode gelap untuk @media (prefers-color-scheme: dark) - Tulis kueri media ini di sematan Anda tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), dan Aplikasi Outlook (iOS). Jika Anda tidak ingin logo bergaris di email Anda, Anda dapat menggunakan .dark-img dan .light-img kelas seperti gambar di bawah ini.

@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 menduplikasi gaya mode gelap - Sertakan kode ini agar email kompatibel dengan mode 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 hanya mode gelap ke tubuh HTML - Tag HTML Anda harus memiliki kelas mode gelap yang benar.

<!-- 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 -->

Kirim Email Tip Mode Gelap dan Sumber Tambahan

Saya telah mengerjakan Martech Zone buletin harian dan mingguan untuk mendukung mode gelap… pastikan untuk melakukannya berlangganan di sini. Seperti kebanyakan pengkodean email, ini tidak mudah karena perbedaan klien email dan metodologi pengkodean miliknya. Salah satu masalah yang saya temui adalah pengecualian… misalnya, Anda ingin teks putih pada tombol terlepas dari mode gelap. Jumlah kodenya agak konyol… Saya harus memiliki 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:

  • Lakmus - panduan utama untuk mode gelap bagi pemasar email.
  • Monitor Kampanye – panduan pengembang tentang mode gelap untuk email.

Jika Anda ingin template email Anda dikonversi untuk dukungan mode gelap, jangan ragu untuk menghubungi kami DK New Media.

mode gelap di email
Sumber: Atasan

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.