E-posta Pazarlamacıları için En İyi Karanlık Mod Rehberi

Yayınlanan: 2021-10-29

Karanlık Mod. Teknoloji endüstrisi bu iki kelimeyle dolup taşıyor ve e-posta pazarlaması da bir istisna değil. 2018'de Apple, masaüstü e-posta istemcisine Karanlık Modu ekledi. Ertesi yıl, Karanlık Mod iOS Mail'e geldi ve Gmail de dahil olmak üzere diğer endüstri ağır topları, Karanlık Mod'u desteklediğini duyurdu. Karanlık Modun gelen kutusunu ele geçirdiğini inkar etmek yok ve e-postaların bu okuma ortamında harika görünmesini sağlamak e-posta pazarlamacıları için yeni büyük zorluk.

Karanlık Mod gelen kutusunu devralıyor ve e-posta pazarlamacıları için yeni büyük zorluk, e-postaların bu okuma ortamında harika görünmesini sağlamak. Bunu tweetle →

Bu yazıda, parçalara ayırıyoruz:

Karanlık Mod nedir ve insanlar onu neden kullanır?
Karanlık Mod ayarlarının e-posta tasarımını etkilemesinin 3 yolu
Farklı Karanlık Mod hedefleme yöntemleri
Karanlık Mod için e-posta istemci desteği
Karanlık Mod için nasıl tasarlanır ve kodlanır

Dalmaya hazır mısınız? Önce temel bilgileri tekrarlayalım.

Karanlık Mod nedir? Düşük ışıklı veya gece ortamları için daha koyu bir renk paleti

Koyu Mod, koyu arka planlar üzerinde açık renkli tipografi, UI öğeleri ve ikonografi kullanan tersine çevrilmiş bir renk şemasıdır ve son yıllardaki en sıcak dijital tasarım trendlerinden biridir. Apple'ın işletim sisteminden Twitter, Slack veya Facebook Messenger gibi uygulamalara kadar en popüler işletim sistemleri ve uygulamalar artık kullanıcıların Karanlık Mod'a geçmesine izin veriyor.

Karanlık Mod sıcak bir konu ve bunun iyi bir nedeni var. Birçok kişi Karanlık Modu tercih ediyor çünkü:

Gözlerde daha kolay . Karanlık bir arka plan üzerinde açık renkli metin, özellikle düşük ışık koşullarında göz yorgunluğunu en aza indirmek için çok daha iyidir.
Pil ömründen tasarruf sağlayarak ekran parlaklığını azaltır .
İçeriğin okunabilirliğini iyileştirebilir ve bazı kullanıcıların masaüstü ve mobil cihazlarda içerik tüketmesini kolaylaştırabilir.
Sadece daha koyu arayüzleri tercih edebilirler.

Karanlık Modun popülaritesi arttıkça, gelen kutusuna da gelmesi şaşırtıcı değil.

Ücretsiz Rehber

Koyu Modu daha fazla bilgi edinin. Hemen indirmek için formu doldurun.

Müşteriler e-postalarıma Karanlık Modu nasıl uyguluyor?

Şu anda, e-posta istemcilerinin e-postalara Karanlık Modu uygulamak için kullandığı temelde farklı üç renk şeması türü var gibi görünüyor. Onlara tek tek bakalım (veya doğrudan Karanlık Mod E-posta İstemcisi Destek Tablosuna geçelim).

Renk değişikliği yok

Evet, doğru okudunuz. Bazı e-posta istemcileri, kullanıcı arabirimlerini Karanlık Mod olarak değiştirmenize izin verir, ancak bunun HTML e-postanızın nasıl oluşturulduğu üzerinde herhangi bir etkisi yoktur. Uygulama ister Açık ister Karanlık Moduna ayarlanmış olsun, e-postanız tamamen aynı görünecektir. Bazı e-posta istemcileri, Işık Modu tasarımlarınızı her zaman varsayılan olarak oluşturacaktır (özellikle daha sonra tartışacağım Karanlık Modu tetiklemek için kod eklemediğiniz sürece). İşte bu müşterilerin bir listesi:

elma postası
iPhone
iPad
Merhaba.com

Apple Mail'deki bu e-posta örneğine göz atın: E-postanın tasarımı, ister karanlık ister açık e-posta istemcisi kullanıcı arayüzünde görüntüleseniz de tamamen aynı kalır:

Birkaç istisna olsa vardır: Birincisi, düz metin e-postalar Karanlık Modu tema uygulanmasını ve bloklar Koyu Modu bir düz metin e-posta uygulayarak yürüyerek 2 × 1 olduğu asgari kodu tetiklemek yapmak görüntü bu sizin sağlamaktır "düz metin" hissini korurken 1 × 1 izleme pikseli içerebilir.

İkinci olarak, yanlışlıkla Karanlık Mod <meta> etiketlerini şablonunuzda bırakırsanız, Apple Mail / iPhone / iPad , özel Koyu Mod stillerinizle geçersiz kılmadığınız sürece , saf beyaz #ffffff örneğini otomatik olarak koyu griye dönüştürür . Veya alternatif olarak, bunun yerine kirli beyaz gibi #fffffe kullanabilirsiniz.

Karanlık Mod seçenekleri: varsayılan ve özel

Hiçbir şey yapmazsanız, varsayılan Karanlık Modunu e-postanıza otomatik olarak zorlayacak birkaç e-posta istemcisi vardır. Ancak çoğumuz gibiyseniz ve bu Varsayılan stillerin hayranı değilseniz, üçüncü seçeneği kullanmak isteyebilirsiniz: kendi Karanlık Mod temanızı tasarlayın ve kodlayın. Aşağıda, Işık Modu temasına ve Özel Karanlık Mod temasına sahip bir e-postayı yan yana görebilirsiniz.

Turnusol ışık modu e-postası ve özel karanlık mod e-postası örneği

Özel bir Karanlık Mod temasına nasıl yaklaşacağımıza bakmadan önce, diğer e-posta istemcilerinin Varsayılan Karanlık Modlarına nasıl davrandığını kontrol edelim.

Varsayılan Karanlık Modlar: kısmi renk ters çevirme

İlk Karanlık Mod teması, “Kısmi Renk Ters Çevirme” olarak adlandırmayı sevdiğim şeydir. Yalnızca açık renkli arka plana sahip alanları algılar ve bunları tersine çevirir, böylece açık renkli arka planlar koyu, koyu metinler açık renkli olur.

Genellikle zaten karanlık arka plana sahip alanları tek başına bırakır ve tamamen Karanlık Mod tasarımıyla sonuçlanır. Neyse ki, bu yöntemi kullanan çoğu e-posta istemcisi, Karanlık Mod hedeflemeyi de destekler, böylece istemci varsayılan karanlık temayı geçersiz kılabilirsiniz.

Outlook.com, bu ekran görüntüsünde görebileceğiniz gibi renkleri kısmen tersine çeviren bir e-posta istemcisidir:

e-posta yan yana karşılaştırma

Varsayılan Karanlık Modlar: tam renkli ters çevirme

Tam Renkli Ters Çevirme en istilacı renk şemasıdır: Yalnızca açık renkli alanları tersine çevirmekle kalmaz, aynı zamanda koyu arka planları da etkiler.

Dolayısıyla, e-postalarınızı zaten karanlık bir temaya sahip olacak şekilde tasarladıysanız, bu şema ironik bir şekilde onları hafif olmaya zorlayacaktır . Ne yazık ki, şu anda Gmail uygulaması (iOS) ve Outlook 2019 (Windows) gibi daha popüler bazı e-posta istemcileri tarafından kullanılan taktik budur.

Aşağıdaki örneklerde, açık renkli arka planların orijinal renklerin koyu versiyonlarına dönüştürüldüğünü ve daha önce açık metinle koyu arka planı olan alanların artık koyu metinle açık olduğunu görebilirsiniz.

yan yana e-posta örneği

Bu Tam Renkli Ters Çevirme şeması e-postanızı en kökten değiştirmekle kalmaz, aynı zamanda bu mantığı kullanan e-posta istemcileri de şu anda Karanlık Mod hedeflemesine izin vermez .

E-posta istemcileri hala Karanlık Modu en iyi nasıl uygulayacaklarını bulmaya çalışıyor ve kullanıcılardan gelen geri bildirimlere açık olabilir - özellikle geliştiricilerin Karanlık Modu kendi stilleriyle hedeflemesine izin verilmemesi, okunabilirlik ve erişilebilirlik üzerinde olumsuz bir etkiye sahip olabileceğinden.

Daha iyi Karanlık Mod hedefleme desteği ve daha az istilacı Karanlık Mod tema mantığı için savunma yapmak amacıyla, düşüncelerinizi doğrudan Gmail'in Erişilebilirlik ekibine iletebilir ve ayrıca Gmail'in Karanlık Modunun e-postanızı kırma ekran görüntülerine katkıda bulunabilirsiniz.

Kendi stillerim ile Karanlık Mod kullanıcılarını nasıl hedefleyebilirim?

Yukarıda belirtildiği gibi, Karanlık Moddaki e-posta istemcilerinin normal HTML e-postalarınızı nasıl ele aldığı değişiklik gösterecektir. Peki ya e-posta istemcilerinin varsayılan renk şemalarından çok farklı olabilecek kendi Karanlık Mod stillerinizi uygulamak isterseniz? Kullanabileceğiniz iki yöntem vardır.

@media (renk düzenini tercih eder: koyu)

Bu yöntem, Mobil Duyarlı görünümünüz için bir @media sorgusu içinde bir stil bloğu uygulamakla hemen hemen aynı şekilde çalışır, ancak bu CSS bloğunun Karanlık Mod'a ayarlanmış herhangi bir kullanıcı arabirimini hedeflemesi dışında. @media (prefers-color-scheme: dark) , Dark Mode'a özgü görüntü takaslarından, fareyle üzerine gelme efektlerinden, arka plan görüntülerinden… temelde geleneksel CSS ile yapabileceğiniz hemen hemen her şeyi uygulayabileceğiniz en sağlam özel Karanlık Mod temalarını oluşturmanıza olanak tanır. !

[veri-ogsc]

Bu, Outlook uygulamasını hedeflemek için ilk kez Mark Robbins tarafından dikkatimize sunulan bir yöntemdir. Oldukça dar bir pazar payı gibi görünse de, zaten uyguladığınız @media (tercih-color-scheme: dark) stillerini basitçe çoğaltmak ve her CSS kuralına uygun [data-ogsc] öneklerini eklemek nispeten kolaydır.

Hangi e-posta istemcileri Karanlık Modu destekler?

Bu istemciler ve uygulamalar, şu anda, kullanıcının manuel olarak veya kullanıcının tercih ettiği renk düzenini otomatik olarak algılayarak ayarlayabileceği bir ayar olarak Koyu Mod sunmaktadır:

Mobil uygulamalar

iPhone Postası
iPad Postası
Gmail Uygulaması (Android)
Gmail Uygulaması (iOS)
Outlook Uygulaması (Android)
Outlook Uygulaması (iOS)

Masaüstü İstemcileri

elma postası
Outlook 2019 (Mac OS)
Outlook 2019 (Windows)

Web İstemcileri

Outlook.com
Merhaba.com

Ancak tüm bu e-posta istemcilerinin kullanıcı arabirimlerini koyu renk düzenine ayarlamanın bir yolunu sunması, e-postalarınızı aynı şekilde ele aldıkları anlamına gelmez. E-posta oluşturma karmaşıktır. Bir istemcide harika görünen bir e-posta, diğerinde bozuk görünebilir. Şimdi, Karanlık Mod başka bir karmaşıklık katmanı ekliyor. Daha önce gösterdiğimiz gibi, Karanlık Mod e-posta istemcisinin kodunuzla ilgilenmesinin çeşitli yolları vardır.

Ayrıca farklı hedefleme yöntemleri için de tutarlı bir destek yoktur. Peki hangi e-posta istemcisi varsayılan olarak hangi renk şemasını takip ediyor? Bazıları e-posta tasarımcılarına okuma deneyimini optimize etmek için Karanlık Modu hedefleme fırsatı sunmazken , çoğu müşteri @media (tercih-color-scheme: dark) veya [data-ogsc] yöntemleriyle hedeflenebilir .

Aşağıdaki e-posta istemcilerindeki Karanlık Mod ayarlarını, Karanlık Mod'a özgü hedefleme içermeyen normal bir e-postayı nasıl etkilediklerini ve ayrıca Karanlık Modu hedefleme desteğini test ettik. İşte bulduklarımız…

Karanlık Mod e-posta istemcisi destek tablosu (Ekim 2021 itibarıyla)

E-posta İstemcisi	Karanlık Modda HTML Tedavisi	@medya	[veri-ogsc]	tuhaflıklar
Apple Posta (MacOS)	Değişiklik yok*	✓ Evet	✘ Hayır	*Saf beyaz (#ffffff) KŞ'ler <meta> varsa ters çevrilir
iPhone / iPad (iOS 13)	Değişiklik yok*	✓ Evet	✘ Hayır	*Saf beyaz (#ffffff) KŞ'ler <meta> varsa ters çevrilir
Merhaba.com	Değişiklik yok	✓ Evet	✘ Hayır
Outlook.com	Kısmi ters çevirme	? Kısmi*	? Kısmi**	Bazı BG renkleri koyulaştırılacak *Görüntü takası çalışıyor!
Outlook 2019 (MacOS)	Kısmi ters çevirme	? Kısmi*	✘ Hayır	*Bazı BG renkleri koyulaştırılacak
Outlook 2019 (WinOS)	Tam tersine çevirme*	✘ Hayır	✘ Hayır	*Özel hedefleme mümkündür!
Outlook uygulaması (iOS)	Kısmi ters çevirme	? Kısmi*	✘ Hayır	*Bazı BG renkleri koyulaştırılacak
Outlook uygulaması (Android)	Kısmi ters çevirme	✘ Hayır	? Kısmi*	*Bazı BG renkleri koyulaştırılacak
Gmail uygulaması (iOS)	Tam tersine çevirme*	✘ Hayır	✘ Hayır	*Özel hedefleme mümkündür!
Gmail uygulaması (Android)	Kısmi ters çevirme	✘ Hayır	✘ Hayır

Gmail iOS ve Outlook Windows'a Özel Hedefleme

Bu kılavuzu ilk yazdığımdan beri, en sevdiğim #EmailGeeks'ten bazıları, mücadele ettiğimiz bazı Full Invert Default Temalarını kontrol etmek için mükemmel geçici çözümler geliştirdi. Bu çözümlerin her biri o kadar kapsamlı ki, kendi kılavuzlarını garanti ediyorlar - bu yüzden tam bir açıklama için onları kontrol ettiğinizden emin olun!

Remi Parmentier, Gmail Uygulaması iOS için orijinal arka planınızı ve metin renklerinizi korumak için mix-blend-mode ile HowToTarget.email'in Gmail hack'ini birleştirerek “Gmail'in karanlık mod sorunlarını CSS Blend Modları ile düzeltme” hakkında bir eğitim hazırladı.

Nicole Merlin, e-posta sihirbazını “Outlook Karanlık Mod Sorunları Nasıl Onarılır” bölümünde çalışmaya koydu ve MSO'ya özgü gradyan CSS özellikleri ve gerçekten temiz bir VML (Vektör İşaretleme Dili) hilesiyle Windows'un Karanlık Modu için Outlook'u hedeflemek için iki yöntem hazırladı.

Bununla birlikte, bu hack'leri araştırırken bir uyarı : Bu yöntemlerin her ikisi de, e-posta istemcisini orijinal Işık Modu metnini ve/veya uygulandığında arka plan renklerini oluşturmaya zorlamak için amaçlanan etkiye sahip olduğundan, kullanıcılarınızın saygısızlık etme riskini taşırsınız. Erişilebilirlik ruhuna aykırı olan Karanlık Mod tercihi. Arka planlar veya metinler okunamaz bir şekilde Karanlık Mod'a dönüştüğünde kontrast oranını iyileştirmek gibi bunları dikkatli kullandığınızdan emin olun.

Bu hedefleme yöntemleri, @media (tercih-color-scheme: dark) veya [data-ogsc] yöntemleriyle yapabileceklerinizle karşılaştırıldığında nispeten sınırlı olsa da, sorunları çözmeniz gerektiğinde hala kullanışlı araçlardır. Karanlık Mod ile metin okunabilirliğinizi bozar.

Karanlık Mod e-postaları nasıl tasarlanır ve kodlanır

E-posta istemcilerinde Karanlık Mod stillerini hedeflerken, aboneleriniz için Karanlık Mod deneyimini geliştirmek için bu altı adımın her birini uyguladığınızdan emin olun.

1. Logolarınızı ve diğer görsellerinizi tüm stiller için optimize edin

Gmail Uygulaması ve Outlook 2019 (Windows) gibi Karanlık Mod özelleştirmesinin daha sınırlı olduğu e-posta istemcilerinde okunaklılık için şeffaf PNG'lere koyu metin içeren yarı saydam bir anahat ekleyin.

Bu, e-posta istemcisinin Kısmi Renk Ters Çevirme veya Tam Renkli Ters Çevirme ayarlarını kullanmaya karar verebileceği sorunları önlemeye yardımcı olacak ve abonelerinizin işlerini kolaylaştıracaktır. Mümkün olan her yerde şeffaf arka planlar seçmek bu konuda yardımcı olacaktır.

01-logolar

Karanlık Mod için optimize edilmiş bir logoyla bile eğlenebilirsiniz!

Aşağıda, koyu arka planlarda öne çıkması için metnin arkasına hafif bir gölge eklemekle kalmayıp, aynı zamanda “NebulaCo” galaksi temasına uyması için arkasına yıldızlı bir doku eklediğim, yaptığım sahte bir logo örneği var.

Logonuza eklediğiniz herhangi bir ışık yarı saydam öğe, Işık Modunda görünmez olacak, savunma amaçlı bir tasarım taktiği işlevi görecek ve yalnızca Karanlık Mod'da görülebilen özel bir marka dokunuşu ekleme fırsatı sunacaktır.

Resimleriniz şeffaf değilse ve arka planlar içeriyorsa, garip bir yan yana gelmeyi önlemek için odak noktanızın etrafında yeterli dolgu olduğundan emin olun.

03-boşluk

Ayrıca, bu kılavuzda aşağıda açıklanan @media (tercih-color-scheme: dark) ve [data-ogsc] yöntemleriyle Işık Modu ve Karanlık Modu görüntülerini değiştirin.

2. E-posta istemcisi kullanıcı aracılarında Karanlık Modu etkinleştirin

Bu meta verileri <head> etiketinize ekleyerek, Karanlık Modu açık olan aboneler için e-postanızda Karanlık Modun etkinleştirildiğinden emin olabilirsiniz:

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

3. @media için Karanlık Mod stilleri ekleyin (renk şemasını tercih eder: koyu)

iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) ve Outlook App'te (iOS) özel karanlık mod stilleri için bu medya sorgusunu yerleşik <style></style> bölümünüze ekleyin .

.dark-img ve .light-img sınıfları, anahatlı bir logoya sahip olmak ideal değilse, karanlık moda özel bir logo göstermek için özellikle yararlıdır.

Örnek CSS :

@media (prefers-color-scheme: dark ) {
  /* Shows Dark Mode-Only Content, Like Images */
  .dark-img { 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; }
  
  /* Hides Light Mode-Only Content, Like Images */
  .light-img { display:none; display:none !important; }
  
  /* Custom Dark Mode Background Color */
  .darkmode { background-color: #272623 !important; }
  
  /* Custom Dark Mode Font Colors */
  h1, h2, p, span, a, b { color: #ffffff !important; }
  
  /* Custom Dark Mode Text Link Color */
  .link { color: #91ADD4 !important; }
}

4. [data-ogsc] öneki ile Karanlık Mod stillerini çoğaltın

Outlook uygulamasında (Android) destek için bu stili ekleyin.

Örnek CSS :

/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { 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; }

/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }

5. Yalnızca Karanlık Mod stillerinizi vücut HTML'nize uygulayın

Tüm HTML etiketlerinizin uygun Karanlık Mod sınıflarının eklenmiş olduğundan emin olun. İşte .dark-img ve .light-img sınıflarının Light Mode ve Dark Mode logolarımızda göründükleri şekliyle bir örneği.

Örnek HTML :

<!-- start HEADER_LOGO -->
<a href="http://litmus.com/" target="_blank">

    <img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

    <!-- The following Dark Mode logo image is hidden 
    with MSO conditional code and inline CSS, but will be         
    revealed once Dark Mode is triggered -->

    <!--[if !mso]><! --><div class="dark-img" 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.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    </div><!--<![endif]-->

</a>
<!-- end HEADER_LOGO -->

6. ABT: Daima Test Edin!

Her zaman belirttiğimiz gibi, e-posta istemcileri sürekli değişiyor. Özellikle Karanlık Mod gibi yeni bir özellikle birlikte, işleme mantığına yönelik ince ayarlar hızlı ve sık bir şekilde geliyor. Bunların üstesinden gelmenin tek yolu, her e-postayı Litmus gibi bir araçla test etmektir.

Karanlık Mod e-postalarınızı KG testi yapın

doğru mu yaptın Litmus'un ücretsiz deneme sürümüyle öğrenin. E-postalarınızın 100'den fazla e-posta istemcisinde, uygulamasında ve cihazda nasıl göründüğünü önizleyin. Ve e-postalarınızın her seferinde marka ve hatasız olduğundan emin olun.

DENEME SÜRÜMÜNE BAŞLA

Karanlık Mod söz konusu olduğunda kullanıcı tercihlerine saygı gösterin

Karanlık Modun en büyük faydalarından biri, düşük ışık koşullarında veya diğer kişisel nedenlerle insanlar için göz yorgunluğunu azaltmadaki yardımıdır. Ancak bu, Karanlık Mod ve Işık Modu meselesi değil. Bu , abonelerinizin ne istediği meselesidir - ister karanlık ister aydınlık bir deneyim. Doğru ya da yanlış cevap yok.

Bu nedenle, aboneleriniz e-postaları Karanlık Modda görüntüleme konusunda bilinçli bir karar veriyorsa, buna saygı duymak en iyisidir. Abonelerinizin varsayılan olarak resimlerin kapalı olmasını tercih etmesi durumunda ALT metni eklemek istediğiniz gibi, daha koyu arayüzlere saygı duyan e-postalar oluşturmalısınız.

Aslen 20 Kasım 2019'da Alice Li tarafından yayınlandı. Son güncelleme 28 Ekim 2021.