E-posta için Karanlık Mod Kullanıma Açılıyor… İşte Nasıl Destekleneceği
Karanlık mod, ekranın enerji kullanımını azaltır ve odağı artırır. Bazı kullanıcılar ayrıca göz yorgunluğunun azaldığını hissettiklerini belirtiyor ancak bu sorgulandı.
Karanlık modun benimsenmesi artmaya devam ediyor. Karanlık mod artık macOS, iOS, Android'in yanı sıra Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail ve Reddit gibi birçok uygulamada kullanılabiliyor. Ancak her birinde her zaman tam destek yoktur. E-posta teknolojisinde pek sık ilerleme olmuyor, bu nedenle karanlık mod desteğinin e-postada da benimsendiğini görmek güzel.
Ağustos 28'de kullanıcıların %2021'inin Karanlık Modda izlediğini gördük. Ağustos 2022 itibarıyla bu sayı neredeyse %34'e yükseldi.
Turnusol
En iyi uygulamaları, uygulanacak kodu ve istemci desteğini anlamak, karanlık mod uygulama başarınız açısından kritik öneme sahiptir. Bu nedenle Uplers ekibi karanlık modla ilgili bu kılavuzu yayınladı E-posta desteği.
Son zamanlarda, DK New Media bir müşteri için Karanlık Mod'u içeren bir Salesforce Pazarlama Bulutu şablonu geliştirdi; bu şablon, bir e-posta istemcisinde görüntülendiğinde e-posta bölümlerini önemli ölçüde kontrastlıyor. Bu, aboneleriniz için ek etkileşim ve tıklama oranları sağlayabilecek bir çabadır.
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. Bu meta verileri şuraya ekleyebilirsiniz: 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 özetlenmiş bir logo istemiyorsanız, şunu kullanabilirsiniz: .dark-img
ve .light-img
Aşağıda gösterildiği gibi sınıflar.
@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 destekleyen günlük ve haftalık bültenler… mutlaka abone olun. Çoğu e-posta kodlamasında olduğu gibi, farklı e-posta istemcileri ve onların özel kodlama metodolojileri nedeniyle bu basit değildir. Karşılaştığım sorunlardan biri istisnalardı… örneğin, karanlık moddan bağımsız olarak bir düğmenin üzerinde beyaz metin istiyorsunuz. Kod miktarı biraz saçma… Aşağıdaki istisnalara sahip olmak zorunda kaldım:
@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ştiricinin e-posta için karanlık mod kılavuzu.
E-posta şablonlarınızın karanlık mod desteğine dönüştürülmesini istiyorsanız bizimle iletişime geçmekten çekinmeyin. DK New Media.