Email Ready: Figma डिज़ाइन या इमेज से HTML ईमेल बनाएँ

किसी डिज़ाइन को HTML ईमेल में बदलना उसे वेब पेज में बदलने से ज़्यादा कठिन है, क्योंकि इनबॉक्स ब्राउज़र नहीं होता। Email Ready, MarkupGen का वह आउटपुट मोड है जो इसी काम के लिए बना है, और यह दो रास्ते देता है: अपने Figma डिज़ाइन से ईमेल के लिए तैयार HTML कोड जनरेट करना, या डिज़ाइन को टुकड़ों में काटकर और क्लिक करने योग्य लिंक जोड़कर इमेज से ईमेल बनाना। यह लेख दोनों को समझाता है, बताता है कि कब किसका उपयोग करें, और वह सब जो टूल आपके लिए सँभालता है।

Email Ready क्या है

हर MarkupGen प्रोजेक्ट का एक आउटपुट फ़ॉर्मेट होता है। Responsive HTML वेबसाइट और लैंडिंग पेज के लिए है। Email Ready (हिंदी इंटरफ़ेस में "ईमेल के लिए तैयार") न्यूज़लेटर और मार्केटिंग ईमेल के लिए है: flexbox और grid की जगह यह इनलाइन CSS के साथ टेबल-आधारित HTML बनाता है — वही फ़ॉर्मेट जिसे Gmail, Outlook और Apple Mail सही ढंग से दिखाते हैं।

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

तरीका 1: ईमेल के लिए तैयार HTML कोड जनरेट करें

यह डिफ़ॉल्ट रास्ता है, और तब सही है जब ईमेल में मुख्य रूप से टेक्स्ट, बटन और सरल इमेज हों।

• इनलाइन CSS के साथ टेबल-आधारित लेआउट। न flexbox, न grid, न कोई बाहरी स्टाइलशीट जिसे ईमेल क्लाइंट हटा दे।
• असली टेक्स्ट। हेडलाइन और पैराग्राफ़ टेक्स्ट ही रहते हैं, इसलिए उन्हें चुना जा सकता है, स्क्रीन रीडर पढ़ सकते हैं, और इमेज ब्लॉक होने पर भी वे दिखते हैं।
• जो इफ़ेक्ट ईमेल में नहीं चलते, वे इमेज में बदल जाते हैं। डिज़ाइन के जिन हिस्सों का ईमेल-सुरक्षित विकल्प नहीं है, वे छूटने या टूटने के बजाय रास्टराइज़ हो जाते हैं।
• मान्य XHTML 1.0 Transitional दस्तावेज़। एक्सपोर्ट पर doctype, नेमस्पेस और एट्रिब्यूट सामान्यीकृत किए जाते हैं, क्योंकि Outlook, Gmail और Apple Mail इसी घोषणा को सबसे स्थिर ढंग से सँभालते हैं।
• वहीं पर संपादन। एक्सपोर्ट से पहले एडिटर में टेक्स्ट बदलें और इमेज बदलें।
• आकार मीटर। "ईमेल एक्सपोर्ट" कार्ड मौजूदा HTML आकार को सीमा के सामने दिखाता है, ताकि समस्या आपको आपके सब्सक्राइबर से पहले दिखे।

102KB की समस्या: Gmail ईमेल क्यों काटता है

Gmail हर उस संदेश को काट देता है जिसका HTML लगभग 102KB से बड़ा हो। प्राप्तकर्ता को ईमेल का ऊपरी हिस्सा और "पूरा संदेश देखें" लिंक दिखता है — और कट के नीचे जो था, अक्सर कॉल-टू-एक्शन और अनसब्सक्राइब लिंक, छिप जाता है।

कई सेक्शन वाला समृद्ध डिज़ाइन कोड के रूप में यह सीमा पार कर सकता है। MarkupGen 100KB पर चेतावनी देता है — लेआउट पैनल में और फिर टेस्ट भेजने वाले डायलॉग में — और दूसरा तरीका सुझाता है।

तरीका 2: इमेज से ईमेल बनाएँ

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

यह कैसे काम करता है:

1. इमेज से शुरू करें। प्रोजेक्ट की डिज़ाइन इमेज अपने आप लोड होती है, या कोई और इमेज अपलोड करें — Figma आर्टबोर्ड, बैनर, पोस्टर।
2. क्लिक करने योग्य क्षेत्र बनाएँ। इमेज पर ड्रैग करके हर बटन, बैनर या प्रोडक्ट पर एक बॉक्स बनाएँ। उसे खिसकाएँ, किसी भी किनारे या कोने से आकार बदलें, ऐरो कुंजियों से 1px सरकाएँ, या सटीक निर्देशांक टाइप करें।
3. लिंक और alt टेक्स्ट जोड़ें। हर क्षेत्र में एक लिंक (http(s)://, mailto: या tel:), एक नाम और alt टेक्स्ट होता है।
4. ईमेल की चौड़ाई तय करें। डिफ़ॉल्ट 600px; आपके टेम्पलेट को दूसरी चौड़ाई चाहिए तो बदल दें।
5. जनरेट करें। MarkupGen इमेज को काटता है और टेबल बनाता है।
6. प्रीव्यू, टेस्ट और एक्सपोर्ट। डेस्कटॉप और मोबाइल (375px) प्रीव्यू जाँचें, टेस्ट ईमेल भेजें, फिर कोड को प्रोजेक्ट पर लागू करें या कहीं और ले जाएँ।

इस प्रक्रिया में टूल क्या-क्या सँभालता है:

• सिर्फ़ ज़रूरी जगह पर कट। इमेज हर क्षेत्र के ऊपरी और निचले किनारे पर कटती है। बिना लिंक वाले पड़ोसी स्लाइस मिला दिए जाते हैं, जिससे इमेज कम और रिक्वेस्ट कम होती हैं।
• दिखने वाली कट लाइनें। पीली गाइड लाइनें ठीक-ठीक दिखाती हैं कि कट कहाँ पड़ेंगे, ताकि आप उन्हें टेक्स्ट की पंक्ति के बीच नहीं, ख़ाली बैकग्राउंड पर रखें।
• पिक्सेल-सटीक जोड़। कट की जगहें डिस्प्ले आकार पर पूरे पिक्सेल से मिलाई जाती हैं, इसलिए स्लाइस मिलकर मूल इमेज बनाते हैं — न कोई दरार, न खिसके हुए कॉलम।
• बिना गुणवत्ता खोए, होस्ट किए हुए स्लाइस। स्लाइस PNG में सेव होते हैं और पूर्ण URL के साथ आपके लिए अपलोड हो जाते हैं — आपको कुछ होस्ट नहीं करना। 2x इमेज साफ़ रहती है क्योंकि वह छोटी किए बिना ईमेल की चौड़ाई पर दिखाई जाती है।
• Outlook के लिए विशेष मार्कअप। तय चौड़ाइयाँ, Outlook के Word-आधारित इंजन के लिए कंडीशनल कमेंट, और ऐसे रीसेट जो स्लाइस के बीच फ़ालतू जगह नहीं आने देते।
• सिर्फ़ सुरक्षित लिंक। जो कुछ भी http(s), mailto या tel नहीं है, वह अस्वीकार होता है, और बिना मान्य लिंक वाला क्षेत्र टूटा लिंक भेजने के बजाय चेतावनी के साथ छोड़ दिया जाता है।
• क्षेत्र प्रोजेक्ट के साथ सेव होते हैं। बाद में टूल फिर खोलकर लिंक ठीक करें या क्षेत्र खिसकाएँ — सब कुछ दोबारा बनाने की ज़रूरत नहीं।
• उदार सीमाएँ। प्रति ईमेल 200 तक लिंक क्षेत्र और 400 स्लाइस, 4000px तक चौड़ी इमेज से।

आपको कौन-सा तरीका चुनना चाहिए?

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

नतीजे के साथ आप क्या-क्या कर सकते हैं

दोनों रास्ते एक ही जगह पहुँचते हैं:

• टेस्ट ईमेल भेजें — सीधे एडिटर से, असली इनबॉक्स में। अगर डिज़ाइन में कोई टेक्स्ट या इमेज अभी असाइन नहीं है, तो भेजना रोक दिया जाता है।
• प्रीव्यू — भेजने से पहले डेस्कटॉप और मोबाइल पर देखें।
• कोड कॉपी करें, .html फ़ाइल डाउनलोड करें, या ईमेल की होस्ट की हुई कॉपी का लिंक शेयर करें।
• प्रोजेक्ट पर लागू करें और सेव करें, ताकि ईमेल आपके बाक़ी प्रोजेक्ट के साथ रहे।
• अपनी भाषा में काम करें — इंटरफ़ेस 10 भाषाओं में उपलब्ध है।

टेस्टिंग को और क़रीब से समझने के लिए देखें: ईमेल मार्केटिंग HTML जनरेट और टेस्ट-सेंड कैसे करें।

समझौते, साफ़ शब्दों में

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

अक्सर पूछे जाने वाले सवाल

Gmail मेरा ईमेल क्यों काट देता है? Gmail उन संदेशों को काटता है जिनका HTML लगभग 102KB से बड़ा हो और बाक़ी हिस्सा "पूरा संदेश देखें" लिंक के पीछे छिपा देता है। MarkupGen मौजूदा आकार दिखाता है और 100KB पर चेतावनी देता है।

क्या मैं किसी इमेज को क्लिक करने योग्य लिंक वाले HTML ईमेल में बदल सकता हूँ? हाँ। "इमेज से ईमेल बनाएँ" इमेज को काटता है, आपके बनाए हर क्षेत्र को उसके अपने लिंक में लपेटता है, और इमेज को ऐसी टेबल के रूप में दोबारा बनाता है जिसे ईमेल क्लाइंट भरोसे से दिखाते हैं।

क्या मुझे इमेज ख़ुद होस्ट करनी होंगी? नहीं। स्लाइस अपने आप अपलोड होते हैं और पूर्ण URL से जुड़े होते हैं, इसलिए भेजते ही ईमेल काम करता है।

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

क्या जनरेट करने के बाद मैं लिंक बदल सकता हूँ? हाँ। क्षेत्र प्रोजेक्ट के साथ सेव होते हैं, इसलिए आप टूल फिर खोलकर लिंक बदल सकते हैं या क्षेत्र खिसका सकते हैं और दोबारा जनरेट कर सकते हैं।

क्या यह सिर्फ़ Figma डिज़ाइन के साथ काम करता है? कोड जनरेट करने वाला रास्ता Figma डिज़ाइन से शुरू होता है। इमेज वाला रास्ता Email Ready प्रोजेक्ट के भीतर अपलोड की गई किसी भी इमेज को भी स्वीकार करता है।

अगर कोई ईमेल कैंपेन Figma में — या सिर्फ़ एक इमेज में — पड़ा है, तो आप मुफ़्त में शुरू करके कुछ ही मिनटों में इनबॉक्स के लिए तैयार HTML पा सकते हैं। मार्केटिंग टीमें पूरा वर्कफ़्लो मार्केटिंग टीमों के लिए MarkupGen में देख सकती हैं।