Karanlık mod sadece birkaç yıl önce başlatıldı ve benimsenme artmaya devam ediyor. Karanlık modu artık macOS, iOS ve Android'in yanı sıra Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail ve Reddit gibi bir dizi uygulamada kullanılabilir. Yine de her biri için her zaman tam destek yoktur.
Koyu mod, ekran enerji kullanımını azaltır ve odağı artırır. Bazı kullanıcılar ayrıca göz yorgunluğunda bir azalma hissettiklerini de belirtiyorlar, ancak bu sorgulandı.
Kısa bir süre önce, bir e-posta istemcisinde görüntülendiğinde e-posta bölümlerini gerçekten önemli ölçüde karşılaştıran Karanlık Modu koduna dahil eden bir Pazarlama Bulutu şablonu geliştirdik. Aboneleriniz için ek etkileşim ve tıklama oranları sağlayabilecek bir çabadır.
E-posta teknolojisinde gelişmeler sık sık görülmez, bu nedenle bu deneyimin sektör genelinde benimsendiğini görmek güzel. En iyi uygulamaları, uygulanacak kodu ve istemci desteğini anlamak, karanlık modda uygulamanızın başarısı için çok önemlidir. Bu nedenle, Uplers'daki ekip bu kılavuzu yayınladı. karanlık mod e-posta desteği.
Karanlık Mod E-posta Kodu
1. Adım: E-posta istemcilerinde koyu modu etkinleştirmek için meta verileri ekleyin - İlk adım, karanlık mod ayarları açık olan aboneler için e-postada karanlık modu etkinleştirmektir. Bunu, bu meta veriyi şuraya ekleyerek yapabilirsiniz: etiket.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">2. Adım: @media için koyu mod stillerini ekleyin (renk düzenini tercih eder: koyu) - Bu medya sorgusunu gömülü sayfanıza yazın tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) ve Outlook Uygulaması (iOS). E-postanızda ana hatlarıyla bir logo istemiyorsanız, aşağıda gösterildiği gibi .dark-img ve .light-img sınıflarını kullanabilirsiniz.
@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; }
}3. Adım: Koyu mod stillerini kopyalamak için [data-ogsc] önekini kullanın - E-postanın Android için Outlook uygulamasında karanlık modla uyumlu olması için bu kodları ekleyin.
[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; }3. Adım: Yalnızca koyu mod stillerini gövde HTML'sine ekleyin - HTML etiketleriniz doğru karanlık mod sınıflarına sahip olmalıdır.
<!-- 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 -->E-posta Koyu Mod İpuçları ve Ek Kaynaklar
Üzerinde çalışıyorum Martech Zone karanlık modu desteklemek için günlük ve haftalık haber bültenleri abone olun. Çoğu e-posta kodlamasında olduğu gibi, farklı e-posta istemcileri ve onların tescilli kodlama metodolojileri nedeniyle bu basit bir süreç değildir. Karşılaştığım bir sorun istisnalardı… örneğin, karanlık moddan bağımsız olarak bir düğmede beyaz metin istiyorsunuz. Kod miktarı biraz saçma… Aşağıdaki istisnalara sahip olmam gerekiyordu:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Bazı ek kaynaklar:
- Turnusol - e-posta pazarlamacıları için karanlık mod için nihai kılavuz.
- Kampanya Monitörü - geliştiriciler e-posta için karanlık moda kılavuzluk eder.
Uplers Etkileşimli İnfografiklerini Görüntüleyin
