ईमेल के लिए डार्क मोड: यह क्या है? कौन से ग्राहक इसका समर्थन करते हैं? क्या कोड की आवश्यकता है?

डार्क मोड को कुछ साल पहले ही लॉन्च किया गया था और इसे अपनाना जारी है। डार्क मोड अब मैकओएस, आईओएस और एंड्रॉइड के साथ-साथ माइक्रोसॉफ्ट आउटलुक, सफारी, रेडिट, ट्विटर, यूट्यूब, जीमेल और रेडिट सहित कई ऐप्स पर उपलब्ध है। हालाँकि, प्रत्येक में हमेशा पूर्ण समर्थन नहीं होता है।

डार्क मोड स्क्रीन ऊर्जा के उपयोग को कम करता है और फोकस बढ़ाता है। कुछ उपयोगकर्ता यह भी कहते हैं कि वे आंखों के तनाव में कमी महसूस करते हैं, लेकिन ऐसा है पूछताछ की गई.

हाल ही में, हमने एक मार्केटिंग क्लाउड टेम्प्लेट विकसित किया है जिसमें डार्क मोड को अपने कोड में शामिल किया गया है जो ईमेल क्लाइंट में देखे जाने पर वास्तव में ईमेल अनुभागों को नाटकीय रूप से विपरीत बनाता है। यह एक ऐसा प्रयास है जो आपके ग्राहकों के लिए अतिरिक्त जुड़ाव और क्लिक-थ्रू दरों को बढ़ा सकता है।

ऐसा अक्सर नहीं होता है कि ईमेल तकनीक में प्रगति होती है, इसलिए पूरे उद्योग में इस अनुभव को अपनाते हुए देखना अच्छा लगता है। डार्क मोड के आपके कार्यान्वयन की सफलता के लिए सर्वोत्तम प्रथाओं, लागू करने के लिए कोड, साथ ही क्लाइंट समर्थन को समझना महत्वपूर्ण है। इस कारण से, Uplers की टीम ने इस गाइड को प्रकाशित किया डार्क मोड ईमेल सपोर्ट.

डार्क मोड ईमेल कोड

चरण 1: ईमेल क्लाइंट में डार्क मोड को सक्षम करने के लिए मेटाडेटा शामिल करें - पहला कदम ग्राहकों के लिए ईमेल में डार्क मोड को सक्षम करना है, जिनकी डार्क मोड सेटिंग्स चालू हैं। आप इस मेटाडेटा को शामिल करके ऐसा कर सकते हैं टैग।

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

चरण 2: @ मोडिया के लिए डार्क मोड शैलियों को शामिल करें (पसंद-रंग-योजना: डार्क) - इस मीडिया क्वेरी को अपने एम्बेडेड में लिखें tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, आउटलुक 2019 (macOS), और आउटलुक ऐप (iOS)। यदि आप अपने ईमेल में उल्लिखित लोगो नहीं चाहते हैं, तो आप नीचे दिखाए गए अनुसार .dark-img और .light-img क्लासेस का उपयोग कर सकते हैं।

@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: डार्क मोड शैलियों की नकल करने के लिए [data-ogsc] उपसर्ग का उपयोग करें - एंड्रॉइड के लिए आउटलुक ऐप में डार्क मोड के अनुकूल होने के लिए ईमेल के लिए ये कोड शामिल करें।

[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: डार्क मोड-ओनली स्टाइल को बॉडी एचटीएमएल में शामिल करें - आपके HTML टैग्स में सही डार्क मोड क्लासेस होनी चाहिए।

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

ईमेल डार्क मोड टिप्स और अतिरिक्त संसाधन

मैं पर काम कर रहा हूँ Martech Zone अंधेरे मोड का समर्थन करने के लिए दैनिक और साप्ताहिक समाचार पत्र, सुनिश्चित करें यहाँ सदस्यता लें. अधिकांश ईमेल कोडिंग के साथ, विभिन्न ईमेल क्लाइंट और उनके स्वामित्व कोडिंग पद्धतियों के कारण यह एक आसान प्रक्रिया नहीं है। एक समस्या जिसका मैं सामना कर रहा था वह अपवाद थी ... उदाहरण के लिए, आप डार्क मोड की परवाह किए बिना एक बटन पर सफेद पाठ चाहते हैं। कोड की मात्रा थोड़ी हास्यास्पद है ... मेरे पास निम्नलिखित अपवाद होने चाहिए:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

कुछ अतिरिक्त संसाधन:

• लिटमस - ईमेल विपणक के लिए अंधेरे मोड के लिए अंतिम गाइड।
• CampaignMonitor - डेवलपर्स ईमेल के लिए डार्क मोड में जाते हैं।

Uplers इंटरैक्टिव इन्फोग्राफिक देखें