Advertisement
  1. Web Design
  2. Email Design

सिंपल रेस्पॉन्सिव HTML ईमेल बनाना

by
Read Time:22 minsLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

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

मीडिया क्वेरीज: केवल अर्ध समाधान

एक समय था जब मीडिया प्रश्नों को iOS और एंड्रॉइड मेल अनुप्रयोगों में काम करने वाले उत्तरदायी ईमेल प्राप्त करने के लिए पर्याप्त थे, जो दोनों ही मीडिया के प्रश्नों का समर्थन करते हैं।

तब से, iOS और एंड्रॉइड दोनों प्लेटफार्मों के लिए बनाए गए मेल एप्लीकेशंस का प्रसार किया गया है, साथ ही रेस्पॉन्सिव ईमेल विकास विधियों के लिए विभिन्न स्तरों का समर्थन किया गया है।

सबसे उल्लेखनीय एंड्रॉइड के लिए जीमेल ऐप का नवीनतम अपडेट है, जो एंड्रॉइड उपयोगकर्ताओं के लिए डिफ़ॉल्ट मेल ऐप के रूप में twice as popular है (जो अब 11% of total opens)। इसने कभी भी मीडिया क्वेरीज का समर्थन नहीं किया है, और अभी भी नहीं है, हालांकि यह अब स्क्रीन के देखने योग्य क्षेत्र के भीतर फिट करने के लिए बाह्य तालिका के आकार को सम्मिलित करके आपके ईमेल को तराजू देता है। यह नियंत्रित करना मुश्किल है और, जब आपका संपूर्ण ईमेल मोबाइल पर ठीक से प्रदर्शित करने के लिए मीडिया क्वेरीज पर निर्भर करता है तो कुछ बहुत ही अप्रिय परिणाम उत्पन्न करता है।

क्यों फ्लूइड नई ब्लैक है

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

हालांकि, कुछ डिजाइन समझौता करने के लिए आपको करना है। उन प्यारे समान स्तंभ लेआउट जो एक एकल कॉलम में चिपकाते हैं, इस पद्धति का उपयोग करके इतनी अच्छी तरह से काम नहीं करते हैं। अगर आप उनके बिना जीना सीख सकते हैं, तो कुछ बहुत ही कार्यात्मक डिजाइन हैं जो बहुत अच्छी तरह से काम कर सकते हैं।

यहां बताया गया है कि हम आज क्या बना रहे हैं:

Final-Product-BothFinal-Product-BothFinal-Product-Both

शुरू करना

ठीक है, चलो हमारे खाली कैनवास के साथ शुरू करते हैं।

हम यहां जो बना रहे हैं वह हमारा मूल पेज है जिसका header, doctype और कंटेनर टेबल एक बैकग्राउंड रंग के साथ लागू होता है (body दोनों और एक बड़ी आवरण तालिका के साथ, क्योंकि बॉडी टैग की स्टाइल पूरी तरह से समर्थित नहीं है)। इस बुनियादी सेटअप के बारे में अधिक जानकारी के लिए, Build an HTML Email Template from Scratch देखें।

मैंने फिर अपनी मुख्य सामग्री तालिका को 'content' क्लास के साथ केंद्र में जोड़ दिया है।

ध्यान दें

Note: आप देखेंगे कि इस ट्यूटोरियल में मैं अपने डॉक्यूमेंट के head में CSS को रखूंगा। मैं आम तौर पर head में स्टाइल्स को रखता हूँ जब मैं उन्हें फिर से उपयोग करने जा रहा हूं, और एक-ऑफ स्टाइल इनलाइन रखता हूं।

Important: जब भी आप अपने डॉक्यूमेंट के हेड में CSS नियमों का उपयोग करते हैं, तो आपको प्रक्रिया के अंत में सभी इनलाइन लाने के लिए एक उपकरण का उपयोग जरूर करना होगा। यदि आप MailChimp या Campaign Monitor जैसी सेवा का उपयोग करते हैं, तो जब आप अपना डिज़ाइन आयात करते हैं, तो वे आपके लिए आपके स्टाइल्स को इनलाइन लाने की पेशकश करेंगे। आपको ऐसा करना चाहिए क्योंकि कुछ क्लाइंट, जैसे जीमेल, आपकी <style> टैग की सामग्री को अनदेखा कर देंगे या बाहर निकाल देंगे। आप अपने CSS इनलाइन लाने के लिए Premailer जैसे उपकरण का भी उपयोग कर सकते हैं। यदि आप प्रीमेलर या समान उपकरण का उपयोग करते हैं, तो अपने मीडिया क्वेरीज को प्रसंस्करण से पहले याद रखना याद रखें (क्योंकि हम चाहते हैं कि वे बरकरार रहें), फिर उन्हें अंत में डालें। MailChimp और कैंपेन मॉनिटर स्वचालित रूप से आप के लिए इस का ख्याल रखेंगे।

Yahooसे मोबाइल स्टाइल्स छिपाना!

आप देखेंगे कि बॉडी टैग में एक अतिरिक्त विशेषता है। Yahoo मेल को सुसमाचार के रूप में आपके मीडिया क्वेरीज की व्याख्या करना पसंद करता है, इसलिए इसे रोकने के लिए, आपको attribute selectors का उपयोग करने की आवश्यकता है। मुझे ऐसा करने का सबसे आसान तरीका मिल रहा है (जैसा कि Email on Acid द्वारा सुझाया गया है) केवल बॉडी टैग को एक मनमाना विशेषता जोड़ना है। मैं  'yahoo' का उपयोग करने का सुझाव देता हूं लेकिन यह आप कुछ भी कर सकते है:

आप CSS में अपने बॉडी टैग के लिए attribute selector का उपयोग करके विशिष्ट वर्गों को लक्षित कर सकते हैं।

फ्लूइड विधि को मास्टर करने के लिए दो ट्रिक्स

जैसा कि आप देख सकते हैं, हमारी 'content' तालिका 100% चौड़ी होनी चाहिए ताकि यह फ्लूइड हो और स्मार्टफोन और टैबलेट स्क्रीन की पूरी चौड़ाई ले सकें। बड़े उपकरणों पर पूरी स्क्रीन को लेकर ईमेल से बचने के लिए हम अधिकतम 600px की चौड़ाई भी निर्धारित करेंगे।

अब दो थोड़ी मुश्किल चीजें हैं जो हमें यह सुनिश्चित करने के लिए संबोधित करने की जरूरत है कि सभी ईमेल क्लाइंटों में नियोजित सभी के रूप में प्रदर्शित किया गया है। ये दो फिक्स इस पद्धति पर Tina Ye के उत्कृष्ट ट्यूटोरियल के लिए धन्यवाद हैं जो कि available over at FogCreek Blog है।

1. अधिकतम चौड़ाई समर्थन की कमी पर काबू

दुर्भाग्य से, सभी ईमेल क्लाइंट्स द्वारा max-width समर्थित नहीं है। आउटलुक और लोटस नोट्स 8 और 8.5 में हमारी ईमेल को ठीक से प्रदर्शित करने के लिए, हमें प्रत्येक तालिका को कुछ सशर्त कोड में व्रैप करना पड़ेगा, जो कि सब कुछ को पकड़ने के लिए एक निर्धारित चौड़ाई वाली तालिका बनाता है। यह IE को लक्षित करता है (जो प्रतिपादन इंजन है लोटस नोट्स द्वारा उपयोग किया गया) और माइक्रोसॉफ्ट आउटलुक।

हम अपनी तालिका को कुछ सशर्त कोड में व्रैप करेंगे:

2. एप्पल मेल के लिए एक फिक्स

अजीब तरह से, एप्पल मेल (आमतौर पर एक बहुत प्रगतिशील ईमेल क्लाइंट) या तो अधिकतम-चौड़ाई वाली संपत्ति का समर्थन नहीं करता है। यह मीडिया के माध्यम से क्वेरीज पूछता है, इसलिए हम एक जोड़ सकते हैं जो कि हमारी 'content' क्लास की मेज पर चौड़ाई निर्धारित करने के लिए कहता है, जब तक व्यूपोर्ट पूरे 600px प्रदर्शित कर सकता है।

हेडर बनाना

अब हम अपनी तालिका की पहली पंक्ति जोड़ देंगे - शीर्ष लेख निम्नलिखित स्टाइल को उस पंक्ति में जोड़ें जिसे हमने पहले से बनाया है:

और फिर अपने CSS में हेडर के लिए पैडिंग जोड़ें:

पहले रेस्पॉन्सिव पंक्ति जोड़ना

अब हम अपनी पहली रेस्पॉन्सिव पंक्ति तैयार करने जा रहे हैं। जिस तरह से हम ऐसा करते हैं, दो तालिकाओं को बनाने के लिए 'aline' HTML प्रॉपर्टी का उपयोग करके एक दूसरे के बगल में 'float' तैयार करना है।

लेफ्ट स्तंभ

हमारी छोटी जगह "Hello!" निम्नलिखित के साथ शुभकामनाएं:

हम अपनी 70px टेबल बनाते हैं और कुछ पैडिंग भी जोड़ते हैं जो दो कॉलम के बीच हमारे गटर के रूप में कार्य करेगा। तल पर पैडिंग वर्टीकल ब्रीथिंग रूम जोड़ देगा, जब दो कॉलम मोबाइल पर ढेर हो जाएंगे।

राइट कॉलम

हम दाएं स्तंभ बनाकर एक सारणी को फिर से बायीं तरफ बनायेंगे। यह टेबल 445px चौड़ा होने जा रहा है, जो हमें दाएं हाथ की ओर 25px छोड़ देगा। यह बहुत ज़रूरी है क्योंकि आउटलुक स्वचालित रूप से आपकी टेबल स्टैक करेगा यदि कोई भी पंक्ति में कम से कम 25px कम नहीं है।

Responsive-AlignedTablesResponsive-AlignedTablesResponsive-AlignedTables

जब तक आप कम से कम 25px ब्रीथिंग रूम की अनुमति देते हैं, तब तक आपकी टेबल अपेक्षित रूप से व्यवहार करेंगे।

Allow at least 25px of breathing room to stop Outlook from stacking your tablesAllow at least 25px of breathing room to stop Outlook from stacking your tablesAllow at least 25px of breathing room to stop Outlook from stacking your tables
आउटलुक को अपनी मेजओं को ढेर करने से रोकने के लिए कम से कम 25px ब्रीथिंग   रूम  की अनुमति दें

रुकें! आउटलुक के लिए वैकल्पिक सुझाव

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


लगे रहो..

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

यहां आप देख सकते हैं कि मैंने इस तालिका के लिए 'col425' नामक क्लास बनाया है, हमारे 425px विस्तृत स्तंभ। मैंने तालिका को सशर्त कोड में व्रैप कर दिया है जो इसे 425px विस्तृत तालिका में लगाया जाएगा। फिर हम अपने क्लास को मीडिया क्वेरी में जोड़ते हैं जो हमने एप्पल मेल के लिए भी बनाया है।

अब हमारे सेल के अंदर हम स्टाइल शीर्षक जोड़ देंगे।

मैंने स्टाइल के लिए प्रत्येक सेल में कुछ क्लासेज जोड़ दी हैं, साथ ही साथ कुछ स्टाइल्स को मैं बाद में अन्य टेक्स्ट टाइप्स के लिए उपयोग कर रहा हूं:

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

01-header01-header01-header

सिंगल कॉलम टेक्स्ट रो बनाना

एक सिंगल कॉलम टेक्स्ट रौ बनाने के लिए, हम बस अपने '.content' तालिका में एक नई पंक्ति जोड़ते हैं। table हम इन पंक्तियों में कुछ पुन: प्रयोज्य पैडिंग मानों के साथ एक 'innerpadding' क्लास जोड़ देंगे। प्रत्येक पंक्ति में सीमा लागू करने के लिए हम 'borderbottom' की एक श्रेणी भी जोड़ देंगे।

इस अनुभाग के लिए हमारा CSS:

डबल कॉलम लेख बनाना

अब हम अपने हेडर की तरह एक रेस्पॉन्सिव पंक्ति बना लेंगे, लेकिन थोड़ा अलग आयामों के साथ हम एक बड़ी इमेज बना सकते हैं।

हमने यहां 'buttonwrapper' वाला एक बटन जोड़ा है। इसमें बैकग्राउंड रंग सेट के साथ एक पैडेड सेल होता है, और उसके बाद एक टेक्स्ट लिंक होता है। मैं इस पद्धति का उपयोग करना पसंद करता हूं क्योंकि यह आपको तरल पदार्थ चौड़ाई वाले बटनों की अनुमति देता है जो एक पुन: प्रयोज्य टेम्पलेट बनाने के दौरान बहुत उपयोगी होता है, जहां प्रत्येक बटन की चौड़ाई अलग-अलग हो जाती है। यदि आपके पास अपने बटन के लिए एक निश्चित चौड़ाई है, तो आप कैंपेन मॉनिटर पर Bulletproof Button Generator का इस्तेमाल करना पसंद कर सकते हैं।

बटन के लिए हमारी स्टाइल:

साथ ही साथ इस नए क्लास 'col380' की हमारी चौड़ाई के लिए, हम ऐप्पल मेल की देखभाल के लिए अपने आकार की स्टाइल की सूची में अपना आकार जोड़ देंगे। अब यह इस तरह दिखता है:

Email-TwoColEmail-TwoColEmail-TwoCol

सिंगल कॉलम इमेज का निर्माण

यह एक बहुत सरल पंक्ति है; हम ईमेल की चौड़ाई के 100% होने के लिए बस एक इमेज सेट करेंगे और सुनिश्चित कर लें कि इसकी ऊंचाई CSS का उपयोग करने के लिए स्वचालित है।

हमारे CSS में:

अंतिम सादा टेक्स्ट रौ बनाना

अंत में हम नीचे की सीमा के बिना टेक्स्ट की एक पंक्ति जोड़ देंगे:

फुटर बनाना

फुटर बनाने के लिए, हम एक तालिका के अंदर एक नई पंक्ति जोड़ देंगे। पंक्तियों में से एक में हमारे सोशल मीडिया आइकन के लिए एक अन्य तालिका होगी।

हम अपने फुटर को CSS के लिए अपेक्षित स्टाइल्स को जोड़ देंगे:

मोबाइल के लिए अनुकूलन बटन

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

हमें <td> जिस पर वह वर्तमान में लागू किया गया है उसे रंग से पट्टी करना होगा, और उसके बाद इसे कई लेयर्स के साथ <a> टैग पर वापस लागू करना होगा।

मैं bug in Outlook.com on IE9 में एक बग से बचने के प्रयास में इस मीडिया क्वेरी में max-width और max-device-width दोनों का उपयोग करेगा।

अब जब आप मोबाइल पर रंगीन बटन पर कहीं भी टैप करते हैं, तो यह एक लिंक है!

मीडिया क्वेरीज के साथ आगे वृद्धि

अगर आप चाहें, तो आप अब अपने लेआउट में वृद्धि करना शुरू कर सकते हैं, जिसे आप नियंत्रित करना चाहते हैं उन तत्वों के क्लास नामों को लागू कर सकते हैं, और फिर हमने अभी ऊपर बनाए गए मीडिया क्वेरी के अंदर नए नियम बनाते हुए।

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

और निम्न CSS को मीडिया क्वेरी में जोड़ना:

Email-Footer-MQsEmail-Footer-MQsEmail-Footer-MQs

आप मीडिया क्वेरीज का समर्थन करने वाले क्लाइंट पर पैडिंग की मात्रा को कम करने के लिए.इनरपड़ींग, .हैडर और .फुटर क्लासेज को भी लक्ष्य कर सकते हैं।


टेस्ट और जाओ!

अंत में, हमेशा सुनिश्चित करें कि आप मान्य करते हैं (W3C validator का उपयोग करके - आपको केवल बॉडी टैग पर स्वामित्व 'Yahoo' विशेषता के लिए एक त्रुटि मिलनी चाहिए) और वास्तव में लाइव डिवाइसों का उपयोग करके और Litmus जैसे ईमेल पूर्वावलोकन सेवा का उपयोग करना चाहिए या Email on Acid

हर ईमेल क्लाइंट में शानदार लग रहे उत्तरदायी ईमेल बनाने का आनंद लें!

अगले स्तर तक आप क्या सीखा है, अगले ट्यूटोरियल देखें:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.