👈 ♟️ 🛴 उत्तरदायी ईमेल 💪🏿 🚗 👩🏾‍🎨

आज, उपयोगकर्ता मोबाइल उपकरणों पर ईमेल पढ़ रहे हैं। यह फोन पर एक बड़े HTML ईमेल को देखने जैसा क्या है? आपको स्केल करना और स्क्रॉल करना है, सामान्य तौर पर, पढ़ना बहुत असुविधाजनक हो जाता है। इसलिए, ईमेल को उत्तरदायी बनाया जाना चाहिए।

ट्रेनिंग

सबसे पहले, हम अनुकूली ईमेल की मुख्य विशेषताओं को परिभाषित करते हैं:

स्वच्छ और संक्षिप्त सामग्री: छोटी स्क्रीन पर, प्रभावी स्थान का उपयोग करने के लिए यह अधिक महत्वपूर्ण है।
एक कॉलम: यह स्पष्ट है कि फोन की स्क्रीन पर सामग्री को कई स्तंभों में विभाजित नहीं किया जाना चाहिए।
पत्र का संक्षिप्त विषय: छोटे हेडर वाले अक्षर इनबॉक्स में कई अन्य लोगों के बीच खड़े होते हैं।
बड़े "कॉल टू एक्शन" बटन: Apple iOS मानव इंटरफ़ेस दिशानिर्देश कम से कम 44 × 44 px बटन बनाने की सलाह देते हैं।
सही फ़ॉन्ट: पाठ किसी भी उपकरण पर पढ़ने योग्य होना चाहिए।
प्री-हेडर: अक्षर के प्रारंभिक पाठ में सामग्री को यथासंभव अधिक प्रतिबिंबित करना चाहिए।
बाएं-संरेखित पाठ: अधिकांश उपयोगकर्ता स्क्रीन के बाईं ओर अधिक ध्यान देते हैं। इसके अलावा, कुछ ऑपरेटिंग सिस्टम पूरी तरह से संदेश प्रदर्शित नहीं कर सकते हैं, इसलिए सामग्री को बाएं-संरेखित किया जाना चाहिए।
कार्यक्षेत्र पदानुक्रम: कॉल बटन से एक्शन बटन सहित सबसे महत्वपूर्ण जानकारी, संदेश के शीर्ष पर स्थित होनी चाहिए।
न्यूनतम छवियां: उपयोगकर्ता को अक्षरों में बड़ी तस्वीरें देखने की उम्मीद नहीं है। इसके अलावा, कई में छवि प्रदर्शन अक्षम है।

शुरुआत

HTML अक्षर साधारण सरल HTML पृष्ठों से संरचना में थोड़े भिन्न होते हैं। उदाहरण के लिए, सीएसएस शैलियों को सीधे मार्कअप में लिखा जाना चाहिए, इसके अलावा, कुछ ईमेल क्लाइंट सिर के टैग के अंदर किसी भी सीएसएस शैलियों को पूरी तरह से अनदेखा करते हैं। सुविधा के लिए, आप उचित HTML मार्कअप के साथ विशेष टेम्पलेट्स का उपयोग कर सकते हैं। उदाहरण के लिए HTML ईमेल बॉयलरप्लेट ।

doctype

हॉटमेल और जीमेल जबरदस्ती XHTML 1.0 कोड में सिद्धांत जोड़ते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

व्यूपोर्ट और मीडिया क्वेरी

मोबाइल उपकरणों पर सही ढंग से प्रदर्शित करने के लिए, व्यूपोर्ट मेटा टैग का उपयोग करें। दुर्भाग्य से, यह ब्लैकबेरी पर काम नहीं करता है:

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

 <head> <meta name="viewport" content="width=device-width, initial scale=1.0"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Email subject or title</title> <style type="text/css"> .ExternalClass {width:100%;} img {display: block;} </style>

मीडिया क्वेरीज़ जोड़ते समय, डिस्प्ले का उपयोग करते हुए छिपाने वाले वर्ग के साथ तत्वों को छिपाएँ: कोई नहीं अगर स्क्रीन की चौड़ाई 600 px से कम है:

 @media only screen and (max-width: 600px) { table[class="hide"], img[class="hide"], td[class="hide"] { display:none!important; } }

यह लेआउट उत्तरदायी ईमेल के लिए मानक दृष्टिकोण है: सीएसएस को सिर के साथ फिर से लिखना! इस मामले में, GMail सिर में शैलियों की उपेक्षा करेगा। इसलिए, आपको यह सुनिश्चित करना होगा कि सामग्री हर जगह सही ढंग से प्रदर्शित हो। मीडिया क्वेरी का उपयोग करके, आप सामग्री के साथ ब्लॉक की चौड़ाई को भी सीमित कर सकते हैं:

 @media only screen and (max-width: 600px) { table[class="content_block"] { width: 92%!important; } }

बटन

पत्र को पढ़ने के बाद, उपयोगकर्ता, आदर्श रूप से, कुछ कार्रवाई करनी चाहिए। इसलिए, "कॉल टू एक्शन" तत्वों की भूमिका बहुत महत्वपूर्ण है। बटन बड़े, दृश्यमान होने चाहिए और यदि संभव हो तो अक्षर के शीर्ष पर स्थित होना चाहिए।

दुर्भाग्य से, पत्रों में बटन के लिए कोई एकल क्रॉस-प्लेटफॉर्म समाधान नहीं है। एक विकल्प:

 @media only screen and (max-width:600) { a[class="button"]{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }

वैसे, एक बहुत ही सरल तरीका एक नियमित लिंक है। हालांकि, एक टच स्क्रीन वाले उपकरणों पर प्रयोज्य एक ही समय में पीड़ित होता है:

 <a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

लेख में वर्णित उदाहरण डाउनलोड करें।

रबर के अक्षर

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

उत्तरदायी ईमेल उदाहरण

यहाँ बड़े और मोबाइल स्क्रीन पर उत्तरदायी ईमेल कैसे दिखना चाहिए, इसके कुछ अच्छे उदाहरण हैं:

निष्कर्ष

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

उत्तरदायी ईमेल