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

डार्क मोड को कुछ साल पहले ही लॉन्च किया गया था और इसे अपनाना जारी है। डार्क मोड अब macOS, iOS और Android के साथ-साथ Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail और Reddit सहित कई ऐप्स उपलब्ध हैं। हालांकि, प्रत्येक में हमेशा पूर्ण समर्थन नहीं होता है।

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

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

यह अक्सर नहीं होता है कि ईमेल तकनीक में उन्नति होती है, इसलिए उद्योग भर में इस अनुभव को अपनाना अच्छा है। सर्वोत्तम प्रथाओं को समझना, कोड लागू करना, साथ ही साथ क्लाइंट समर्थन डार्क मोड के आपके कार्यान्वयन की सफलता के लिए महत्वपूर्ण है। इस कारण से, 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 इंटरैक्टिव इन्फोग्राफिक देखें