ईमेल विपणन और स्वचालन

ईमेल के लिए डार्क मोड को अपनाया जा रहा है... इसका समर्थन कैसे करें यहां बताया गया है

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

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

हमने अगस्त 28 में 2021% उपयोगकर्ताओं को डार्क मोड में देखते हुए देखा। अगस्त 2022 तक, यह संख्या लगभग 34% तक बढ़ गई थी।

लिटमस

डार्क मोड के आपके कार्यान्वयन की सफलता के लिए सर्वोत्तम प्रथाओं, कार्यान्वयन के लिए कोड और ग्राहक सहायता को समझना महत्वपूर्ण है। इसी कारण से, अपलर्स की टीम ने डार्क-मोड के लिए इस गाइड को प्रकाशित किया ई - मेल समर्थन.

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

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

चरण 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 - ईमेल के लिए डार्क मोड के लिए डेवलपर की मार्गदर्शिका।

यदि आप चाहते हैं कि आपके ईमेल टेम्प्लेट को डार्क मोड समर्थन के लिए परिवर्तित किया जाए, तो संपर्क करने में संकोच न करें DK New Media.

ईमेल में डार्क मोड
स्रोत: ऊपज

Douglas Karr

Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।