2023 के लिए डिज़ाइन, टेम्प्लेट और उदाहरण

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

मान लें कि आधे से अधिक अमेरिकी निवासी उनके फोन पर ईमेल मार्केटिंग संदेशों को देखें, तो आपको अपने ईमेल को मोबाइल और टैबलेट सहित कई स्क्रीन के लिए अनुकूलित करना होगा।

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

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

यहां, हमने कुछ सर्वोत्तम प्रथाओं और उपयोग के लिए तैयार टेम्प्लेट के साथ-साथ उत्तरदायी ईमेल के मूल सिद्धांतों के बारे में एक त्वरित ट्यूटोरियल तैयार किया है।

एक उत्तरदायी ईमेल क्या है?

रिस्पॉन्सिव ईमेल एक ऐसा ईमेल होता है जो फोन, डेस्कटॉप या टैबलेट सहित किसी भी डिवाइस के लिए ऑप्टिमाइज़ किया जाता है। वे कई स्क्रीन रिज़ॉल्यूशन के अनुकूल होते हैं, जो विशेष रूप से उपयोगी है क्योंकि मोबाइल के अनुकूल सामग्री की मांग बढ़ जाती है।

उत्तरदायी ईमेल भी अधिक सुलभ हैं, क्योंकि वे ग्राहकों को अपने पसंदीदा डिवाइस पर पढ़ने की अनुमति देते हैं।

वर्णन करने के लिए, यहां बताया गया है कि मुझे प्राप्त प्रचार ईमेल डेस्कटॉप पर कैसा दिखता है।

इस ईमेल में भयानक इमेजरी, खरीदारी योग्य आइकन हैं, और यह अच्छी तरह से स्वरूपित है। जब मैं मोबाइल पर ईमेल खोलता हूं, तो मेरा स्वागत यही होता है।

मेरे पास अभी भी वही जानकारी और वही तस्वीरें और खरीदारी योग्य आइकन हैं। केवल ध्यान देने योग्य अंतर ईमेल प्रारूप है। मोबाइल अनुभव को बेहतर ढंग से फिट करना अलग बात है।

अब, कल्पना कीजिए कि क्या वही डेस्कटॉप लेआउट मोबाइल पर लागू किया गया था। किसी भी चित्र या पाठ को देखने के लिए मुझे अपने फ़ोन पर ज़ूम इन करना होगा। ऐसा करने के बजाय, मैं सदस्यता समाप्त कर दूंगा।

उत्तरदायी ईमेल के साथ, उपयोगकर्ता अनुभव को बढ़ाया जा सकता है, साथ ही साथ अभियान आरओआई भी बढ़ाया जा सकता है।

इसके बारे में सोचें: एक अनुकूलित मोबाइल ईमेल डिज़ाइन से संतुष्ट सदस्य स्वयं को और अधिक मार्केटिंग संदेश खोलते हुए पाएंगे क्योंकि वे जानते हैं कि यह सुलभ होगा और अच्छा दिखेगा।

तो, उत्तरदायी ईमेल के बारे में इन सभी बातों के साथ, आपको अपना खुद का बनाने के लिए खुजली होनी चाहिए। अगला, हम कुछ प्रतिक्रियाशील ईमेल उदाहरण और टेम्प्लेट देखेंगे।

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

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

एक उत्तरदायी ईमेल कोडिंग

यदि आप अपने ईमेल के तत्वों को उत्तरदायी बनाना चाहते हैं, तो आपको मीडिया प्रश्नों के साथ काम करना होगा।

मीडिया क्वेरी एक CSS तकनीक है। यह आपको शैली नियम सेट करने की अनुमति देता है जो केवल तभी प्रकट होते हैं जब कुछ शर्तें सत्य होती हैं। उदाहरण के लिए, आप यह निर्दिष्ट कर सकते हैं कि स्क्रीन के 600px चौड़े या छोटे होने पर कौन से फ़ॉन्ट आकार और छवि आकार का उपयोग किया जाए।

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

• चयनकर्ता “@मीडिया” का उपयोग करें और “स्क्रीन” निर्दिष्ट करें। यह इंगित करता है कि कोड स्क्रीन वाले उपकरणों को प्रभावित करेगा।
• अपनी “अधिकतम-चौड़ाई” को पिक्सेल में सेट करें। यह स्क्रीन आकार निर्दिष्ट करता है जहां कोड प्रभावी होगा।
• कोई भी CSS शैली गाइड निर्दिष्ट करें जिसे आप चाहते हैं कि विशिष्ट स्क्रीन अनुसरण करे।

आइए नीचे दिए गए कोड पर एक नजर डालते हैं।

@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 600px) {

शरीर {

फ़ॉन्ट-आकार: 30 पीएक्स;

}

}

जब किसी ईमेल के CSS पर लागू किया जाता है, तो 600px चौड़ी या छोटी स्क्रीन के लिए बॉडी टेक्स्ट 30px के आकार में दिखाई देगा।

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

जब तक आपके पास व्यापक वेब डिज़ाइन का अनुभव नहीं है, तब तक कई मीडिया स्क्रीन को कोड करने में समय लग सकता है और निराशा हो सकती है।

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

छवि स्रोत

2. मेट्रोपॉलिटन म्यूज़ियम ऑफ़ आर्ट

जैसा कि TOMS न्यूज़लेटर में देखा गया है, उत्तरदायी ईमेल डिज़ाइन सामग्री को इस तरह से ढेर करने में मदद करता है जो देखने में आकर्षक और पचाने में आसान हो। मेट का यह उदाहरण अलग नहीं है।

मोबाइल पर, मेनू की स्थिति बदल जाती है। अलग-अलग गिफ्ट शॉप आइटम के लिंक पेज के निचले भाग में होते हैं। यह उपलब्ध स्मृति चिन्हों की छवियों को सामने और केंद्र में रखता है।

छवि स्रोत

3. शहतूत

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

बारी-बारी से तस्वीरें और पाठ डेस्कटॉप के लिए मायने रखते हैं, जबकि मोबाइल के लिए संबंधित पाठ पर फ़ोटो का लगातार ढेर, विभाजन रेखाओं के साथ, यह सुनिश्चित करता है कि दर्शक भ्रमित नहीं होंगे।

छवि स्रोत

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

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

आइए अब कुछ टेम्प्लेट विकल्पों पर एक नज़र डालें।

1. हबस्पॉट

हबस्पॉट कुछ प्रदान करता है नि: शुल्क उत्तरदायी ईमेल टेम्पलेट्स. यदि आप एक हबस्पॉट ग्राहक या एक नि: शुल्क उपयोगकर्ता हैं, तो आप उन्हें स्वयं डाउनलोड कर सकते हैं और आज़मा सकते हैं।

उदाहरण के लिए, यहां उत्तरदायी ईमेल टेम्प्लेट में से एक है — साइडबार पर ध्यान दें, जहां आप कई डिवाइस पर टेम्प्लेट का पूर्वावलोकन कर सकते हैं।

छवि स्रोत

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

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

2. अभियान मॉनिटर

कैम्पेनमॉनिटर द्वारा पेश किए गए टेम्प्लेट कई अन्य लोगों के समान हैं, जिनमें पूर्वावलोकन टूल में उत्तरदायी ईमेल परिणाम दिखाए जाते हैं। उदाहरण के लिए, यहां एक अभियान मॉनिटर टेम्प्लेट है:

छवि स्रोत

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

अभियान मॉनिटर टेम्प्लेट अक्सर मुफ़्त होते हैं, इसलिए यदि आपके पास न्यूनतम बजट है तो यह एक अच्छा विकल्प है।

3. स्ट्रिपो

स्ट्रीपो 300 से अधिक मुफ्त एचटीएमएल ईमेल टेम्पलेट प्रदान करता है। आप उद्योग, मौसम, प्रकार और सुविधा द्वारा टेम्पलेट चुन सकते हैं। उदाहरण के लिए, यहाँ उनके व्यापार उद्योग अनुभाग से एक टेम्पलेट दिया गया है।

छवि स्रोत

एक ठोस उत्तरदायी ईमेल टेम्पलेट का एक अच्छा संकेत डेस्कटॉप और स्मार्टफोन दोनों रूपों में पूर्वावलोकन देखने का विकल्प है, जैसा कि स्ट्रिपो के पूर्वावलोकन मोड में दिखाया गया है।

ध्यान दें कि फोन के विनिर्देशों को फिट करने के लिए मोबाइल पूर्वावलोकन में एकल कॉलम लेआउट को कैसे अपनाया गया।

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

4. लगातार संपर्क

लगातार संपर्क प्रस्ताव 200 से अधिक पेशेवर ईमेल टेम्प्लेट जो साइन अप करने के बाद एक्सेस किए जा सकते हैं। नीचे दिए गए उदाहरण को देखने से, आप देख सकते हैं कि प्लेटफ़ॉर्म उत्तरदायी ईमेल टेम्प्लेट प्रदान करता है।

छवि स्रोत

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

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

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