🍹 🤷🏾 🧡 उत्तरदायी ईमेल डिजाइन, या फ्रिज पर एक पत्र कैसे पढ़ें 🍚 ⚕️ 🙌🏾

उत्तरदायी ईमेल डिजाइन, या फ्रिज पर एक पत्र कैसे पढ़ें

आवश्यकताओं

यह कैसे किया जाता है?

मीडिया के सवाल

टेम्पलेट

सीएसएस

मोबाइल के लिए प्रगतिशील प्रकटीकरण

छाया के साथ रबर ब्लॉक

आउटलुक 2007/2010 में पृष्ठभूमि चित्र

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

हमें किन समस्याओं का सामना करना पड़ा और हमारे पत्रों के लिए क्या आवश्यकताएँ प्रस्तुत की गई हैं:

कई अलग-अलग ईमेल क्लाइंट और ब्राउज़र में अक्षरों को सही ढंग से प्रदर्शित किया जाना चाहिए;
उन्हें iOS और Andriod प्लेटफार्मों (बड़े, मध्यम और निम्न स्क्रीन रिज़ॉल्यूशन वाले स्मार्टफोन; टैबलेट कंप्यूटर) पर विभिन्न उपकरणों के लिए अनुकूलित किया जाना चाहिए;
Outlook 2003/2007/2010 के लिए अनिवार्य समर्थन की आवश्यकता है, क्योंकि यह उपयोग के एक बड़े हिस्से पर कब्जा कर लेता है;
संपादन घटक जो एक और 50 पत्र टेम्पलेट्स में उपयोग किए जाते हैं;
सार्वभौमिक ब्लॉक बनाना आवश्यक है जो स्थिति के अनुकूल होगा, क्योंकि अक्षरों में, डेटा में एक गतिशील संरचना होती है (उदाहरण के लिए, अक्षरों का अनुवाद 44 भाषाओं में किया जाता है, ब्लॉक के आकार, चित्र और उन में पाठ का आकार बदल जाता है)।

पहले आपको यह निर्धारित करने की आवश्यकता है कि परियोजना किस प्लेटफ़ॉर्म को लक्षित कर रही है। पिछले एक साल में, मोबाइल उपकरणों पर हमारे ईमेल खोलने का प्रतिशत 15% से बढ़कर लगभग 23% हो गया है।

लेकिन डेस्कटॉप ईमेल क्लाइंट जैसे कि आउटलुक के बारे में मत भूलना, जो हमारे द्वारा भेजे गए सभी ईमेल के लगभग 18% तक खुलता है।

ईमेल बनाते समय हम जिन मूल लेआउट नियमों का पालन करते हैं, उन पर विचार करें:

फ्रेम तालिकाओं पर बनाया गया है;
वेब संस्करणों के लिए, सभी सीएसएस गुण शैली विशेषता का उपयोग करते हुए वर्णित हैं;
मोबाइल उपकरणों के लिए ईमेल क्लाइंट पूरी तरह से CSS कक्षाओं का उपयोग करते हैं। अपवाद जीमेल है;
पृष्ठभूमि छवियों के लिए, पृष्ठभूमि विशेषता लागू की जाती है:
```
<td background="" style="background-position: ;"> 
```
तालिका कोशिकाओं में उपयोग को दूर करने के लिए:
```
 <table border="0" cellpadding="0" cellspacing="0"> 
```

ब्लॉक तत्वों का उपयोग करने की अनुशंसा नहीं की जाती है, जैसे कि

 <h1-h5> 
      ,   border="0".           vertical-align: top;  img; 
    CSS- float    html- align=””.      : 
 
 <table align="left"></table><table></table>

पाठ-सजावट सेट करने की आवश्यकता: कोई नहीं; लिंक, अगर वहाँ एक तस्वीर है, को रेखांकित करने के लिए;
सशर्त टिप्पणियाँ, जो केवल Outlook 2007/2010 की सामग्री को समझती है:

 <!--[if gte mso 10]><![end if]-->

ताकि एंड्रॉइड प्लेटफॉर्म पर पाठ का आकार जैसा कि हम इसका इरादा रखते हैं, शरीर की संपत्ति -webkit-text-size-adjust को जोड़ दें: कोई नहीं;

मोबाइल उपकरणों के लिए ईमेल के अनुकूलन के लिए मुख्य उपकरण मीडिया क्वेरी है। नीचे दी गई तालिका मीडिया प्रश्नों और सबसे सामान्य मोबाइल उपकरणों के बीच पत्राचार को दर्शाती है:

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

तो, एक पत्र टेम्पलेट पर विचार करें:

1. पत्र के फ्रेम के रूप में, हम दो केंद्र टैग का उपयोग करते हैं: एक केंद्रीय संरेखण के लिए, और दूसरा इसकी सामग्री की चौड़ाई को सीमित करने के लिए:

 <center><center style="text-align: {{align}}; max-width: 560px; width: 100%;"> ... </center></center>

2. पत्र की पूरी चौड़ाई में चित्र के लिए, पृष्ठभूमि छवि के साथ तालिका टैग का उपयोग किया जाता है ताकि चित्र के रूप में स्पेसर न बनाएं। आउटलुक 2007/2010 के लिए हम सशर्त टिप्पणियों में एक तस्वीर का उपयोग करते हैं:

 <table background="" style="padding: 0; border-collapse: collapse; width: 100%;"> <tr> <td style="padding: 0; font-size: 0;line-height:3 px;"> <!--[if gte mso 10]><img src="image" border="0" width="580" height="3"><![end if]--> </td> </tr> </table>

3. फोटो की संख्या मोबाइल और वेब संस्करणों में भिन्न होती है। हमें पता नहीं है कि पत्र किस डिवाइस पर खोला जाएगा, इसलिए हम पांचवीं से शुरू होने वाली सभी तस्वीरों के लिए m__hidden वर्ग को नीचे रखते हैं, जो मोबाइल डिवाइस पर उपयोगकर्ता के फ़ोटो छिपाएगा।

4. बटन एक बहुत समस्याग्रस्त तत्व निकला। इसमें एक ढाल के साथ एक गोल आयत का आकार है। और, ज़ाहिर है, इसे ऊंचाई और चौड़ाई दोनों में फैलाना चाहिए। यह अलग-अलग रंगों का है और प्रत्येक अक्षर के लिए अलग-अलग बनाया गया है। ऐसा करने के लिए, हम कंटेनर को एक पृष्ठभूमि छवि या एक ठोस रंग देते हैं। बटन फ्रेम को तीन भागों में विभाजित किया गया है: ऊपरी एक, जिसमें ऊपरी फ्रेम और दो कोने निर्दिष्ट हैं; मध्यम - इसमें ऊर्ध्वाधर फ्रेम और बटन सामग्री होती है; और निचला, जिसमें निचला फ्रेम और दो कोने सेट हैं:

 <table cellpadding="0" cellspacing="0" style="direction: ltr; border-collapse: collapse; font-size: 0; line-height: 0;"> <tr> <td style="padding:1px 0 0 0;"> <table background="{{btn_bg}}" bgcolor="#{{bgcolor}}" cellpadding="0" cellspacing="0" style="border-collapse: collapse; background-repeat: repeat-x;"> <tr> <td width="5"><img src="{{btn_tl}}" border="0" height="5" width="5"></td> <td style="min-width:100%;"> <table style="border-collapse: collapse; width:100%;"><tr> <td style="border-top: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5"><img src="{{btn_tr}}" border="0" height="5" width="5"></td> </tr> <tr> <td colspan="3" style="direction: {{direction}}; text-align: center;"> <table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0"><tr> <td style="border-left: 1px solid #{{border_color}}; border-right: 1px solid #{{border_color}};"> <a href="{{url}}" style="color: #ffffff; font-size: 16px; line-height: 20px; text-decoration: none; padding: 6px 20px; display: block; font-weight: bold; text-shodow: 1px -1px #{{shadow_color}};">{{text}}</a> </td> </tr></table> </td> </tr> <tr> <td width="5" style="vertical-align: bottom;"><img src="{{btn_bl}}" border="0" height="5" width="5"></td> <td style="vertical-align: bottom; min-width: 100%;"> <table style="border-collapse: collapse; width: 100%;"><tr> <td style="border-bottom: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5" style="vertical-align: bottom;"><img src="{{btn_br}}" border="0" height="5" width="5"></td> </tr> </table> </td> </tr> </table>

बटन का अपना टेम्प्लेट होता है, जिसमें यह वांछित पृष्ठभूमि चित्र, फ़्रेम का रंग और पाठ का छाया रंग निर्धारित करता है।

हमारे पास समान तत्वों के लिए कक्षाओं का एक मूल सेट है। यह एक अलग टेम्पलेट में है और इसे आवश्यक अक्षरों में डाला गया है:

 <!--[if gte mso 10]> /*   Outlook 2007/2010 */ <style> .o__table { width: 560px !important; } .o__btn-a{ display: block !important; padding: 8px 20px !important; font-size: 18px !important; border: 1px solid #017ac2 !important; } </style> <![end if]--> <style> @media only screen and (max-device-width: 720px) { body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: none; } .m__hidden { display: none !important; } .m__btn { width: 300px !important; text-align: center !important; } .m__content { padding: 0 10px !important; } .m__footer { padding: 10px !important; } .m__content-border { border-bottom: 1px dotted #e5e5e5 !important; } .m__user-pic { width: 52px !important; height: 52px !important; border-radius: 0 !important; } .m__user-more { width: 49px !important; height: 29px !important; padding: 22px 0 0 0 !important; } .m__user-more img { width: 27px !important; height:7px !important; } .m__padding_b-0 { padding-bottom: 0 !important; } .m__padding_t-0 { padding-top: 0 !important; } .m__padding_b-10 { padding-bottom: 10px !important; } .m__padding_b-15 { padding-bottom: 15px !important; } .m__padding_t-10 { padding-top: 10px !important; } .m__padding_t-15 { padding-top: 15px !important; } .m__body-txt { font-size: 14px !important; } .m__body-title { font-size: 18px !important; } .m__footer-txt { font-weight: normal !important; color: #666 !important; font-size: 12px !important; } } </style>

सभी वर्गों को डबल अंडरस्कोर के साथ नामित किया गया है। यह है कि हम याहू में एक अच्छी तरह से ज्ञात समस्या को हल करते हैं जो सीएसएस कक्षाओं का समर्थन करता है, लेकिन मीडिया प्रश्नों का समर्थन नहीं करता है। वह वेब पर मोबाइल संस्करण के लिए कक्षाओं का उपयोग करता है, जिसकी हमें बिल्कुल आवश्यकता नहीं है। याहू मूल वर्ग के नामों को फिर से लिखता है। उदाहरण के लिए: m__btn to m_btn, यानी यह गलती से एक के साथ डबल अंडरस्कोर को बदल देता है। इस प्रकार, शैली टैग में वर्ग के नाम वर्ग विशेषताओं में नामों से मेल नहीं खाते हैं।

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

 <style> .hidden, .more:hover { display: none; } .more:hover + .hidden { /* IOS */ display: block; } #show:target .hidden { /* ANDROID */ display: block; } #show:target .more { display: none; } </style> <td id="show"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <a href="#show" class="more">...</a> <span class="hidden"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> </span> </td>

बहुत बार, डिजाइनर एक छाया द्वारा तैयार किए गए ब्लॉक का उपयोग करते हैं। लेकिन एक पत्र में इस तरह के एक ब्लॉक बनाने के लिए, और यहां तक कि एक रबर भी, समस्याग्रस्त हो जाता है। इस ब्लॉक में हमारे पास उपयोगकर्ता की एक तस्वीर है, जिसमें अलग-अलग चौड़ाई और ऊंचाई है। उसके लिए हम कोनों के चार और पक्षों के चार चित्रों का उपयोग करते हैं। क्षैतिज भुजाओं की चौड़ाई 100% है, और ऊर्ध्वाधर मान फ़ोटो की ऊंचाई पर सेट है:

 <style> .m__hidden { display: none !important; /*  ,      */ } .m__photo{ /*       */ width: 100%; height: auto !important; } /*      */ .m__photo-brd_l { background: url(center-left.png); } .m__photo-brd_r { background: url(center-right.png); } </style> <table cellpadding="0" cellspacing="0" border="0" style="direction: ltr; line-height: 0;"> <tr> <td><img src="top-left.png" width="10" height="10" border="0"></td> <td><img src="top-center.png" width="100%" height="10" border="0"></td> <td><img src="top-right.png" width="10" height="10" border="0"></td> </tr> <tr> <td class="m__photo-brd_l"><img src="center-left.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> <td style="background: #ffffff;"><img src="photo.png" class="m__photo" height="{{height}}" border="0"></td> <td class="m__photo-brd_r"><img src="center-right.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> </tr> <tr> <td><img src="bottom-left.png" width="10" height="10" border="0"></td> <td><img src="bottom-center.png" width="100%" height="10" border="0"></td> <td><img src="bottom-right.png" width="10" height="10" border="0"></td> </tr> </table>

दिलचस्प बात यह है कि आउटलुक 2007/2010 अपने पूर्ववर्ती आउटलुक 2003 के लिए HTML और सीएसएस के समर्थन में बहुत अधिक हीन है। उदाहरण के लिए, पृष्ठभूमि की छवियां उनमें समर्थित नहीं हैं। एक अपवाद शरीर पर पृष्ठभूमि संपत्ति का उपयोग करना है:

 <body background=""> ... </body>

लेकिन पत्र में अन्य तत्वों के बारे में क्या? एक समाधान है, हम VML का उपयोग कर सकते हैं:

 <!--[if gte mso 10]> <v:rect style="width: ; height: ;" strokecolor="none"> <v:fill type="tile" src=""></v:fill> </v:rect> <v:shape style="position: absolute; width: ; height: ;"> <![endif]--> ... <!--[if gte mso 10]> </v:shape> <![endif]-->

नतीजतन, हमें एक दी गई चौड़ाई और ऊंचाई के साथ एक ब्लॉक मिलता है जिसमें पाठ हो सकता है।

आप यहाँ पत्र का एक उदाहरण देख सकते हैं: jsfiddle.net/ELhD9/5

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

आर्टेम कुनेट्स
सीमांत विकासक

iPhone 3 जी, 3 जी

iPhone 4, 4 जी

अधिकतम-डिवाइस-चौड़ाई: 480px

-webkit- डिवाइस-पिक्सेल-अनुपात: 1

-webkit- डिवाइस-पिक्सेल-अनुपात: 1.5

-webkit- डिवाइस-पिक्सेल-अनुपात: 2