डार्क मोड नुकतीच काही वर्षांपूर्वी लाँच केला गेला होता आणि अवलंब करणे अद्याप वाढत आहे. गडद मोड आता मॅकोस, आयओएस आणि अँड्रॉइड तसेच मायक्रोसॉफ्ट आउटलुक, सफारी, रेडडिट, ट्विटर, यूट्यूब, जीमेल आणि रेडडिट यासह अनेक अ‍ॅप्स उपलब्ध आहेत. प्रत्येक वेळी नेहमीच संपूर्ण पाठिंबा नसतो.
गडद मोड स्क्रीन उर्जेचा वापर कमी करते आणि लक्ष वाढवते. काही वापरकर्त्यांनी असेही म्हटले आहे की डोळ्यांच्या ताणतणावामध्ये कपात झाल्याचे त्यांना वाटत आहे, परंतु ते तसे आहे चौकशी केली गेली.
अलीकडेच, आम्ही एक मार्केटींग क्लाउड टेम्पलेट विकसित केले आहे ज्याने डार्क मोडला त्याच्या कोडमध्ये समाविष्ट केले आहे जे ईमेल क्लायंटमध्ये पाहिल्यास ईमेल विभाग खरोखर नाटकीयदृष्ट्या भिन्न बनवते. हा एक प्रयत्न आहे जो आपल्या सदस्यांसाठी अतिरिक्त प्रतिबद्धता आणि क्लिक-थ्रू दर चालवू शकतो.
ईमेल तंत्रज्ञानामध्ये प्रगती केल्याचे बर्‍याचदा असे नसते, म्हणूनच संपूर्ण उद्योगात हा अनुभव स्वीकारणे चांगले वाटले. डार्क मोडच्या अंमलबजावणीच्या यशासाठी सर्वोत्कृष्ट सराव, अंमलबजावणीचा कोड तसेच क्लायंट समर्थन समजून घेणे आवश्यक आहे. त्या कारणास्तव, अपलर्सच्या संघाने हे मार्गदर्शक प्रकाशित केले गडद मोड ईमेल समर्थन.
गडद मोड ईमेल कोड
चरण 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.कॉम, आउटलुक 2019 (मॅकोस) आणि आउटलुक अ‍ॅप (आयओएस). आपल्याला आपल्या ईमेलमध्ये बाह्यरेखा लोगो नको असल्यास आपण खाली दर्शविल्याप्रमाणे .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: डार्क मोड शैलीची डुप्लिकेट करण्यासाठी [डेटा-ओगएससी] प्रत्यय वापरा - Android साठी आउटलुक अॅपमध्ये डार्क मोडसह ईमेल सुसंगत होण्यासाठी या कोडचा समावेश करा.
[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; } काही अतिरिक्त संसाधने:
- लिटमस - ईमेल विपणकांसाठी डार्क मोडसाठी अंतिम मार्गदर्शक.
- कॅम्पेनमोनिटर - डेव्हलपर ईमेलसाठी डार्क मोडचे मार्गदर्शन करतात.
अपलर इंटरएक्टिव इन्फोग्राफिक पहा
