HTML ईमेल डिज़ाइन की चुनौतियों (और निराशाओं) को समझना
यदि आप वेब पेज बनाने के लिए सामग्री प्रबंधन प्रणाली खोलते हैं, तो यह एक बहुत ही सरल प्रक्रिया है। आधुनिक वेब ब्राउज़र समर्थन करते हैं एचटीएमएल, सीएसएस, और सख्त वेब मानकों के लिए जावास्क्रिप्ट। और ये कुछ मुट्ठी भर ब्राउज़र हैं जिनके बारे में डिजाइनरों को चिंता करने की ज़रूरत है। निस्संदेह, अपवाद हैं... और उन ब्राउज़रों के लिए विशिष्ट कुछ सरल समाधान या फ़ंक्शन भी हैं।
समग्र मानकों के कारण, सामग्री प्रबंधन प्रणालियों में पेज बिल्डरों को विकसित करना आसान है। ब्राउज़र HTML5, CSS और JavaScript का अनुपालन करते हैं... और डेवलपर्स ऐसे वेब पेज बनाने के लिए अविश्वसनीय रूप से मजबूत समाधान बना सकते हैं जो डिवाइसों के लिए उत्तरदायी हों और सभी ब्राउज़रों के अनुरूप हों। दो दशक पहले, लगभग हर वेब डिज़ाइनर वेब पेज विकसित करने के लिए डेस्कटॉप सॉफ़्टवेयर का उपयोग करता था। अब, किसी वेब डिज़ाइनर के लिए वेब पेज विकसित करना बहुत ही असामान्य है - अक्सर, वे सामग्री को भरने के लिए टेम्पलेट विकसित कर रहे हैं और सामग्री प्रणालियों में संपादकों का उपयोग कर रहे हैं। वेबसाइट संपादक शानदार हैं.
लेकिन ईमेल संपादक बहुत पीछे हैं। यहाँ पर क्यों…
HTML ईमेल डिजाइन करना एक वेबसाइट की तुलना में कहीं अधिक जटिल है
यदि आपकी कंपनी एक सुंदर HTML ईमेल डिज़ाइन चाहती है, तो यह प्रक्रिया कई कारणों से एक वेब पेज बनाने की तुलना में बहुत अधिक जटिल है:
- कोई मानक नहीं - HTML ईमेल प्रदर्शित करने वाले ईमेल क्लाइंट द्वारा वेब मानकों का कोई सख्त पालन नहीं किया जाता है। वस्तुतः प्रत्येक ईमेल क्लाइंट और प्रत्येक ईमेल क्लाइंट का प्रत्येक संस्करण अलग-अलग तरीके से कार्य करता है। कुछ लोग सीएसएस, बाहरी फ़ॉन्ट और आधुनिक HTML का सम्मान करेंगे। अन्य लोग कुछ इनलाइन स्टाइल का सम्मान करते हैं, केवल फ़ॉन्ट का संग्रह प्रदर्शित करते हैं, और टेबल-संचालित संरचनाओं को छोड़कर बाकी सभी चीज़ों को अनदेखा कर देते हैं। यह काफी हास्यास्पद है कि कोई भी इस मुद्दे पर काम नहीं कर रहा है. परिणामस्वरूप, ग्राहकों और डिवाइसों पर लगातार प्रस्तुत होने वाले टेम्पलेट डिज़ाइन करना बड़ा व्यवसाय बन गया है और काफी महंगा हो सकता है।
- ईमेल क्लाइंट सुरक्षा - हाल ही में, ऐप्पल मेल ने HTML ईमेल में उन सभी छवियों को डिफ़ॉल्ट रूप से ब्लॉक करने के लिए अपडेट किया है जो ईमेल में एम्बेडेड नहीं हैं। आप या तो उन्हें एक समय में एक ईमेल लोड करने की अनुमति देते हैं या इस सेटिंग को अक्षम करने के लिए सेटिंग्स को सक्षम करना होगा। ईमेल क्लाइंट सुरक्षा सेटिंग्स के साथ-साथ कॉर्पोरेट सेटिंग्स भी हैं।
- आईटी सुरक्षा - आपकी आईटी टीम इस बात पर सख्त नियम लागू कर सकती है कि ईमेल में वास्तव में किन वस्तुओं को प्रस्तुत किया जा सकता है। उदाहरण के लिए, यदि आपकी छवियां किसी ऐसे विशिष्ट डोमेन से आती हैं, जो कॉर्पोरेट फ़ायरवॉल में श्वेतसूची में नहीं है, तो छवियां आपके ईमेल में दिखाई नहीं देंगी। कभी-कभी, हमें ईमेल विकसित करना पड़ता है और निगम के सर्वर पर सभी छवियों को होस्ट करना पड़ता है ताकि उनके अपने कर्मचारी छवियों को देख सकें।
- ईमेल सेवा प्रदाता - मामले को बदतर बनाने के लिए, ईमेल निर्माता जो सेवा प्रदाताओं को ईमेल करते हैं (ESPs) वास्तव में समस्याओं को रोकने के बजाय उनका परिचय देते हैं। जबकि वे अपने संपादक का प्रचार करते हैं कि आप जो देखते हैं वही आपको मिलता है (WYSIWYG), ईमेल डिज़ाइन के साथ अक्सर विपरीत सच होता है। आप उनके प्लेटफ़ॉर्म में ईमेल का पूर्वावलोकन करेंगे, और प्राप्तकर्ता को सभी डिज़ाइन समस्याएं दिखाई देंगी। कंपनियाँ अक्सर अनजाने में लॉक-डाउन संपादक के बजाय सुविधा-संपन्न संपादक का चयन करती हैं, यह सोचकर कि इसमें अधिक सुविधाएँ हैं। इसका विपरीत सच है... यदि आप ऐसे ईमेल चाहते हैं जो सभी ईमेल क्लाइंटों पर लगातार प्रस्तुत हों, तो जितना सरल, उतना बेहतर, क्योंकि कम गलत हो सकता है।
- ईमेल क्लाइंट रेंडरिंग - सैकड़ों ईमेल क्लाइंट डेस्कटॉप, ऐप्स, मोबाइल डिवाइस और वेबमेल क्लाइंट पर HTML को अलग-अलग तरीके से प्रस्तुत करते हैं। जबकि आपके ईमेल सेवा प्रदाता पर आपके निफ्टी टेक्स्ट एडिटर में आपके ईमेल में हेडिंग डालने की सेटिंग हो सकती है, प्रत्येक ईमेल क्लाइंट के लिए पैडिंग, मार्जिन, लाइन ऊंचाई और फ़ॉन्ट आकार भिन्न हो सकते हैं। परिणामस्वरूप, आपको लगातार प्रस्तुत करने के लिए ईमेल प्राप्त करने के लिए HTML को कम करना होगा और प्रत्येक तत्व को अलग-अलग कोड करना होगा (नीचे उदाहरण देखें) - और अक्सर ईमेल क्लाइंट-विशिष्ट अपवादों में लिखना होगा। कोई सरल ब्लॉक प्रकार नहीं है, आपको टेबल-संचालित लेआउट करना होगा जो तीस साल पहले वेब के निर्माण के बराबर है। यही कारण है कि किसी भी नए लेआउट के लिए विकास और क्रॉस-ईमेल क्लाइंट और डिवाइस परीक्षण दोनों की आवश्यकता होती है। आप अपने इनबॉक्स में जो देखते हैं वह मेरे इनबॉक्स में जो दिखता है उससे बिल्कुल भिन्न हो सकता है। इसीलिए प्रतिपादन जैसे उपकरण एसिड पर ईमेल or लिटमस यह सुनिश्चित करने के लिए आवश्यक हैं कि आपके नए डिज़ाइन सभी ईमेल क्लाइंट पर काम करें। यहां लोकप्रिय ईमेल क्लाइंट और उनके रेंडरिंग इंजन की एक छोटी सूची है:
- Apple मेल, Mac के लिए आउटलुक, Android मेल और iOS मेल का उपयोग वेबकिट.
- आउटलुक 2000, 2002 और 2003 का उपयोग करें इंटरनेट एक्सप्लोरर.
- आउटलुक 2007, 2010 और 2013 का उपयोग करें माइक्रोसॉफ्ट वर्ड (हाँ, शब्द!)।
- वेबमेल क्लाइंट अपने ब्राउज़र के संबंधित इंजन का उपयोग करते हैं (उदाहरण के लिए, सफारी वेबकिट का उपयोग करता है और क्रोम ब्लिंक का उपयोग करता है)।
वेब बनाम के लिए HTML का एक उदाहरण। ईमेल
यदि आप एक उदाहरण चाहते हैं जो ईमेल बनाम वेब में डिजाइनिंग की जटिलता को दर्शाता है, तो यहां मेलबेकरी के लेख से एक आदर्श उदाहरण है ईमेल और वेब के बीच 19 बड़े अंतर HTML:
HTML ईमेल करें
हमें बटन को ठीक से रखने और यह सुनिश्चित करने के लिए कि यह ईमेल क्लाइंट्स पर अच्छा लगे, सभी इनलाइन स्टाइल को शामिल करते हुए तालिकाओं की एक श्रृंखला बनानी चाहिए। कक्षाओं को शामिल करने के लिए इस ईमेल के शीर्ष पर एक स्टाइल टैग भी होगा।
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
<tr>
<td class="text-button" style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
एचटीएमएल वेब
हम एक बटन के रूप में प्रकट होने वाले एंकर टैग के मामले, संरेखण, रंग और आकार को परिभाषित करने के लिए कक्षाओं के साथ बाहरी स्टाइलशीट का उपयोग कर सकते हैं।
<div class="center">
<a href="#" class="button">Find Out More</a>
</div>
ईमेल डिज़ाइन के मुद्दों से कैसे बचें
एक सभ्य प्रक्रिया का पालन करके ईमेल डिज़ाइन के मुद्दों से बचा जा सकता है:
- टेम्पलेट परीक्षण - आपके ग्राहक जिन ईमेल क्लाइंट का उपयोग करते हैं उन्हें समझना और यह सुनिश्चित करना कि किसी भी टेम्पलेट को तैनात करने से पहले आपका HTML ईमेल मोबाइल और डेस्कटॉप पर पूरी तरह से परीक्षण किया गया है, महत्वपूर्ण है। हम वस्तुतः फ़ोटोशॉप लेआउट से एक ईमेल डिज़ाइन कर सकते हैं... लेकिन इष्टतम और सुसंगत ईमेल डिज़ाइन को तैनात करने के लिए इसे टेबल-संचालित, क्रॉस-ईमेल क्लाइंट में विभाजित करना आवश्यक है।
- आंतरिक परीक्षण - एक बार जब आपका टेम्प्लेट डिज़ाइन और परीक्षण कर लिया जाता है, तो इसे समीक्षा और अनुमोदन के लिए संगठन के भीतर एक आंतरिक बीज सूची में भेजा जाना चाहिए। आप पहले यह सुनिश्चित करने के लिए व्यक्तियों के एक बहुत ही सीमित उपसमुच्चय के साथ शुरुआत करना चाह सकते हैं कि आंतरिक रूप से ईमेल को प्रस्तुत करने से संबंधित फ़ायरवॉल या सुरक्षा समस्याएँ नहीं हैं। यदि यह एक नए ईमेल सेवा प्रदाता पर एक उदाहरण का निर्माण कर रहा है, तो आपको अपने ईमेल को इनबॉक्स में प्राप्त करने से जुड़े कुछ फ़िल्टरिंग या अवरुद्ध करने वाले मुद्दे भी मिल सकते हैं।
- टेम्पलेट संस्करण - अपने टेम्प्लेट के नए संस्करण पर काम किए बिना अपने लेआउट या डिज़ाइन को न बदलें, जिसे डिज़ाइन किया जा सकता है, ठीक से परीक्षण किया जा सकता है और तैनात किया जा सकता है। कई व्यवसाय प्रत्येक अभियान के लिए एकमुश्त डिज़ाइन पसंद करते हैं... लेकिन इसके लिए प्रत्येक ईमेल को प्रत्येक अभियान के लिए डिज़ाइन, विकसित और परिनियोजित करने की आवश्यकता होती है। यह ईमेल मार्केटिंग प्रक्रिया के लिए आंतरिक समय का एक टन जोड़ता है। और, आप यह नहीं समझने का जोखिम उठाते हैं कि आपके ईमेल में कौन से तत्व बेहतर प्रदर्शन कर रहे हैं, कौन से तत्व नहीं हैं। संगति केवल प्रक्रिया को आसान बनाने का एक तरीका नहीं है, यह आपके ग्राहकों के व्यवहार के लिए भी महत्वपूर्ण है।
- ईमेल सेवा प्रदाता अपवाद - वस्तुतः प्रत्येक ईमेल सेवा प्रदाता के पास उन मुद्दों के आसपास काम करने का एक साधन होता है जो उनके ईमेल निर्माता द्वारा पेश किए जाते हैं। हम अक्सर एक खाते में कच्चा सीएसएस जोड़ सकते हैं - या यहां तक कि एक सामग्री ब्लॉक भी हो सकता है जिसे हर ईमेल में शामिल करना पड़ता है - ताकि कंपनी अंतर्निहित ईमेल संपादक का उपयोग कर सके और यह आपके ईमेल के डिजाइन को तोड़ न सके। बेशक, उन चरणों को लागू करने के लिए कुछ प्रशिक्षण और प्रक्रिया नियंत्रण की आवश्यकता हो सकती है ताकि यह सुनिश्चित हो सके कि उनका अनुपालन किया गया है। या - आप सचमुच अपने ईमेल डिज़ाइन को ऐसे समाधान में विकसित करना चाहते हैं जो ग्राहकों और उपकरणों पर काम करने के लिए सिद्ध हो, फिर इसे अपने ईमेल सेवा प्रदाता में वापस पेस्ट करें।
ईमेल डिजाइन प्लेटफार्म
चूंकि ईमेल सेवा प्लेटफॉर्म ने क्रॉस-क्लाइंट और क्रॉस-डिवाइस लगातार प्रदान किए गए बिल्डरों को बनाने और बनाए रखने में खराब काम किया है, इसलिए कई बेहतरीन प्लेटफॉर्म बाजार में आ गए हैं। एक जिसका हमने व्यापक रूप से उपयोग किया है वह है स्ट्रिपो.
स्ट्रिपो केवल एक ईमेल निर्माता नहीं है, उनके पास 900 से अधिक टेम्पलेट्स की एक लाइब्रेरी भी है जिसे आसानी से आयात किया जा सकता है। एक बार जब आप ईमेल डिज़ाइन कर लेते हैं, तो आप 60+ ईएसपी को ईमेल कर सकते हैं, और ईमेल क्लाइंट, जिसमें शामिल हैं इंटुइट मेलचिम्प, HubSpot, अभियान की निगरानी, AWeber, ईस्पुतनिक, आउटलुक, तथा जीमेल. सभी स्ट्रिपो टेम्पलेट्स में से सर्वश्रेष्ठ ईमेल रेंडरिंग परीक्षणों के साथ आते हैं ताकि आप सुनिश्चित कर सकें कि उनका परीक्षण किया गया है और 40 से अधिक ईमेल क्लाइंट्स पर लगातार काम करते हैं।