यहाँ सही प्रतिक्रियाशील पत्र बनाने के लिए कुछ सुझाव दिए गए हैं।
बड़ी मेलिंग सेवाओं में एक अंतर्निहित ब्लॉक संपादक होता है। यह सरल उत्तरदायी ईमेल एकत्र करता है और इसे सदस्यता मूल्य में शामिल किया जाता है। यह संपादक में एक जटिल रचनात्मक पत्र को भरने के लिए काम नहीं करेगा - यह डिजाइनर और लेआउट डिजाइनर का काम है। सबसे पहले, आइए जानें कि कौन सा अक्षर जटिल के रूप में वर्गीकृत है और कौन सा सरल है।
फिर "चिप्स" हैं। कहीं आप अलग-अलग ब्लॉक के लिए सटीक आकार निर्धारित कर सकते हैं, लेकिन कहीं आप नहीं कर सकते। एक संपादक में, आप केवल एक-स्तंभ पत्र एकत्र कर सकते हैं, दूसरे में स्तंभों की संख्या पर कोई प्रतिबंध नहीं है। कुछ संपादकों में, आप यह भी अनुकूलित कर सकते हैं कि डेस्कटॉप संस्करण पर कौन से ब्लॉक दिखाना है और कौन से केवल मोबाइल उपकरणों पर।
डिजाइनर और लेआउट डिजाइनर व्यक्तिगत समाधान प्रदान करते हैं, संपादक मानक समाधान प्रदान करता है। ध्यान रखें कि संपादक में एक पत्र को असेंबल करते समय, आप किसी भी मामले में सीमित होते हैं, उदाहरण के लिए, फोंट और उनके आकार के सेट से।
डिजाइनर इसे वैसे ही बनाएगा जैसा आप चाहते हैं। लेआउट डिज़ाइनर इस बारे में सोचेगा कि मोबाइल उपकरणों पर ब्लॉकों को कैसे पुनर्व्यवस्थित किया जाए - जैसा आपने योजना बनाई थी। ब्लॉक संपादक में काम करते समय, आप डेवलपर्स द्वारा प्रदान किए गए समाधानों पर भरोसा करते हैं।
संपादक अपने स्वयं के एल्गोरिथ्म के अनुसार पत्र को अपनाता है, एल्गोरिथ्म को बदला नहीं जा सकता है।
यदि आपने संरचना पर काम किया है, पाठ लिखा है और चित्रों को उठाया है, तो एक पत्र बनाने में तीस मिनट से दो घंटे तक का समय लगेगा। आपको याद दिला दें कि आप लेआउट के लिए भुगतान नहीं करते हैं, संपादक के साथ काम करना खाते की लागत में शामिल है।
एक स्वतंत्र डिजाइनर और लेआउट डिजाइनर की एक टीम दो या तीन दिनों में एक पत्र तैयार करेगी, इसकी लागत 5,000 से 15,000 रूबल तक होगी। यदि आप किसी एजेंसी से ऑर्डर करते हैं, तो यह बहुत अधिक महंगा है। परिचय से कहानी याद है? सर्गेई के लिए, विकल्प स्पष्ट है: वह स्वयं पत्र एकत्र करेगा, उसकी स्थिति में यह सस्ता और तेज है।
अंतर्निहित संपादक में एक साधारण उत्तरदायी पत्र को एक साथ रखना बेहतर है। यदि आप गैर-मानक समाधान चाहते हैं, तो आउटसोर्स करें।
अंतर्निहित संपादक में एक पत्र कैसे इकट्ठा करें
संपादक में एक पत्र इकट्ठा करने वालों को कोड जानने की जरूरत नहीं है। आपको केवल पत्र की संरचना पर विचार करने, चित्र लेने और पाठ लिखने की आवश्यकता है। कोई "मैनुअल" टाइपसेटिंग नहीं - आप लैंडिंग पेज बिल्डर की तरह ही ब्लॉक से एक पत्र इकट्ठा करेंगे।
चरण 1. पत्र की रूपरेखा या प्रोटोटाइप
मोटे मसौदे से शुरू करें, कागज पर भविष्य के पत्र का आरेख बनाएं: शीर्षक कहां होगा, चित्र कहां है, बटन कहां है, आदि। यदि आपके पास समय है, तो बाल्सामीक या निंजामॉक में एक पूर्ण प्रोटोटाइप तैयार करें। . निर्देशक को ऐसा प्रोटोटाइप दिखाना और उसे डिजाइनर के काम में स्थानांतरित करना कोई शर्म की बात नहीं है।
चरण 2. संपादक में पत्र का लेआउट
- तैयार योजना या प्रोटोटाइप के आधार पर आवश्यक संख्या में कॉलम जोड़ें
- आवश्यक तत्वों को पत्र के मुख्य भाग में खींचें
आमतौर पर, ड्रैग-एंड-ड्रॉप सिद्धांत अंतर्निहित संपादकों में काम करता है। यदि आपका ऐसा नहीं है, तो नॉलेज बेस के लेखों को देखें - संपादक में काम करने के सिद्धांतों का वर्णन वहाँ किया गया है।
- तत्वों की सामग्री को अनुकूलित करें: पैडिंग, रिक्ति, संरेखण और शैली
यहां आप आवश्यक टेक्स्ट दर्ज करें, लिंक के साथ या बिना लिंक के साथ एक फोटो या चित्रण जोड़ें। यह न भूलें कि आप एक एनिमेटेड चित्र जोड़ सकते हैं, अधिकांश संपादक GIF प्रारूप का समर्थन करते हैं।
फ़ाइल आकार के साथ बस ओवरबोर्ड न जाएं। मेल क्लाइंट "भारी" अक्षर पसंद नहीं करते हैं और "पूरी तरह से दिखाएं" बटन के नीचे अपनी सामग्री छुपा सकते हैं - उदाहरण के लिए, जीमेल करता है। फाइलों का चयन करें ताकि तैयार पत्र का वजन 600 केबी से अधिक न हो, यह इष्टतम आकार है।
बटनों को अनुकूलित करना और उनमें नेविगेशन लिंक जोड़ना न भूलें।
चरण 3. अंतर्निहित संपादक में जवाबदेही की जाँच करना
जब ईमेल तैयार हो जाए, तो जांचें कि यह विभिन्न उपकरणों पर कैसा दिखाई देता है।
90% मामलों में, सब कुछ क्रम में होगा, ब्लॉक स्वचालित रूप से "पुनर्निर्मित" होंगे। यदि लेआउट अभी भी "उड़ता है" या परिणाम आपको सूट नहीं करता है - ब्लॉक में इंडेंट के मूल्यों की जांच करें, वे समान होना चाहिए। यदि मोबाइल संस्करण में एक ब्लॉक 10 अंक और दूसरा 30 से पीछे हट जाता है, तो उन्हें गलत तरीके से पुनर्व्यवस्थित किया जा सकता है। यदि दोनों ब्लॉक 10 अंक पीछे गिरते हैं, तो आप सबसे अधिक ठीक होंगे।
चरण 4. तृतीय-पक्ष सेवाओं पर अनुकूलन क्षमता की जाँच करना
एसिड पर लिटमस या ईमेल के माध्यम से परिणाम की जांच करें। ये सेवाएं आपको दिखाएंगी कि पत्र विभिन्न उपकरणों पर, विभिन्न ब्राउज़रों और विभिन्न ईमेल क्लाइंट में कैसे प्रदर्शित होगा।
कुछ संपादकों में, लिटमस के माध्यम से जाँच करना डिफ़ॉल्ट रूप से एकीकृत होता है। यदि आपके संपादक के पास यह विकल्प नहीं है, तो पत्र की एक परीक्षण प्रति एक विशेष ई-मेल पर भेजें, जो लिटमस के साथ पंजीकरण के बाद दी जाएगी।
सेवा का भुगतान किया जाता है, लिटमस में मासिक सदस्यता $ 79 से शुरू होती है, ईमेल पर एसिड में - $ 45 से। यदि आप महीने में एक बार एक पत्र भेजते हैं, तो यह महंगा हो सकता है। अंतिम उपाय के रूप में, ब्राउज़र शॉट्स आज़माएं, यह पुराना और असुविधाजनक है, लेकिन मुफ़्त है। याद रखें कि ऐसी सेवाओं की 100% गारंटी नहीं होती है। भले ही लिटमस में सब कुछ ठीक हो, यह मेलिंग सूची को तुरंत शुरू करने का कोई कारण नहीं है। पत्र को अपने व्यक्तिगत मेल पर भेजें और उसे वहां खोलें।
एक संपादक चुनें जो दिखाता है कि पत्र विभिन्न उपकरणों पर कैसा दिखता है। आदर्श यदि संपादक लिटमस सेवा के साथ एकीकृत है। यदि कोई एकीकरण नहीं है, तो व्यक्तिगत मेल के माध्यम से मैन्युअल रूप से अनुकूलन क्षमता की जांच करें।
काम के परिणाम का मूल्यांकन कैसे करें - अपना या एक लेआउट डिजाइनर
यदि आप स्वयं पत्र एकत्र करते हैं, तो संपादक के अंदर अनुकूलन क्षमता की जांच करें और अपने व्यक्तिगत मेल से पत्र को देखें - बस इतना ही। यदि आप एक साथ कई उपकरणों, ब्राउज़रों और ईमेल क्लाइंट पर अनुकूलन क्षमता का परीक्षण करना चाहते हैं - तो लिटमस में एक खाता खरीदें या एसिड पर ईमेल करें, वहां परिणाम देखें।
जो लोग लेआउट को आउटसोर्स करते हैं उन्हें खाता खरीदने की आवश्यकता नहीं है, लिटमस से स्क्रीनशॉट के लिए लेआउट डिजाइनर से पूछें। यदि वह एक पेशेवर है, तो वह ऐसी सेवाओं पर पत्रों की जाँच करता है, स्क्रीनशॉट भेजना उसके लिए कोई समस्या नहीं है। जाँच करते समय, मेल क्लाइंट पर करीब से नज़र डालें, ज्यादातर जाम यहाँ पॉप अप करते हैं। आउटलुक, जीमेल, यांडेक्स और Mail.ru में ईमेल कैसे खुलता है, इसकी जांच करना सुनिश्चित करें - ये रूस में सबसे लोकप्रिय ईमेल क्लाइंट हैं।
लेआउट को ठीक करने में समय बर्बाद न करें यदि यह तीसरे आईफोन पर, इंटरनेट एक्सप्लोरर के सातवें संस्करण में या मेल क्लाइंट द बैट में गलत तरीके से प्रदर्शित होता है। हां, हमेशा ऐसे लोग होंगे जो तीसरे आईफोन का इस्तेमाल करते हैं, लेकिन वे अल्पसंख्यक हैं। क्या कुल आधार के 1-2% के लिए लेआउट को नया स्वरूप देना उचित है? आधार की मात्रा और "गुणवत्ता" पर निर्भर करता है।
हमें उम्मीद है कि आपने इसे खंडित कर दिया है और आप अपने ग्राहकों के बारे में सब कुछ जानते हैं। अगर 1-2% 10,000 लोग हैं, तो यह परेशानी के लायक है। यदि आप b2b में काम करते हैं और ये 1-2% प्रबंधन कंपनियां, व्यवसाय के स्वामी और अन्य VIP क्लाइंट हैं, तो आपको उनके लिए पत्रों को अनुकूलित करना होगा।
सुनिश्चित करें कि पत्र आउटलुक, जीमेल, यांडेक्स और Mail.ru में पर्याप्त रूप से प्रदर्शित है - बस इतना ही।
विपणक का मेमो
- पत्र के प्रारूप पर निर्णय लें कि यह क्या होगा: मानक और सरल या जटिल और रचनात्मक। डिज़ाइनर और लेआउट डिज़ाइनर को जटिल संरचना वाले पत्र दें। डाक सेवा के संपादक में साधारण पत्र एकत्र करें, वे डिफ़ॉल्ट रूप से अनुकूलित होते हैं।
- बिल्ट-इन एडिटर में और, यदि आपका बजट अनुमति देता है, तो तृतीय-पक्ष सेवाओं पर परिणाम देखें। लेआउट डिज़ाइनर से पत्र स्वीकार करते समय, स्क्रीनशॉट के लिए पूछें जो पुष्टि करता है कि पत्र सही ढंग से प्रदर्शित होता है - कम से कम लोकप्रिय ईमेल क्लाइंट और लोकप्रिय ब्राउज़र में।
- व्यक्तिगत मेल के माध्यम से पत्र को कम से कम मुख्य मेल क्लाइंट में और आईओएस और एंड्रॉइड पर स्मार्टफोन के वर्तमान मॉडल से देखना सुनिश्चित करें।
प्लस
वेब काउंसिल ब्लॉग के पाठकों में से एक ने मेलिंग सूची के लिए पत्रों के लेआउट के बारे में बात करने के लिए कहा। मैं खुद शायद ही ऐसा करता हूं। मुझे याद है कि एक समय में मैं Subcribe.ru के लिए टेम्प्लेट के साथ काम करता था, और मुझे याद है कि यह एक नीरस व्यवसाय था। समस्या यह है कि ईमेल सेवाएं ब्लॉक लेआउट के साथ ठीक से काम नहीं करती हैं। और सीएसएस शैलियों के साथ भी बदतर। इतने साल बीत चुके हैं, और चीजें अभी भी वहीं हैं। अब मेलिंग के लिए पत्रों का भारी बहुमत पुराने ढंग से टाइपसेट है - टेबल का उपयोग करना। और यह 2016 में है, जब html5, css3 और अन्य आधुनिक मिठाइयाँ लंबे समय से साइटों को चला रही हैं।
सिद्धांत रूप में, अक्षरों के लेआउट पर विस्तृत लेख पहले से ही हैब्रे पर हैं, यहाँ और यहाँ। मैं आर्थर कोच नामक एक स्थानीय निवासी को पढ़ने की भी सलाह देता हूं, जिन्होंने पत्रों के लेआउट पर बहुत सारे उपयोगी लेख लिखे हैं। उदाहरण: लिंक 1, लिंक 2.
लेकिन ताकि पोस्ट खाली न हो जाए, फिर भी मैं ई-मेल न्यूज़लेटर्स के लिए पत्रों के लेआउट के मुख्य बिंदुओं को संक्षेप में बताऊंगा।
सबसे पहले, आपको ब्लॉक लेआउट और एक अलग स्टाइलशीट के बारे में भूलना होगा। सब कुछ तालिकाओं में रखा गया है, और शैलियों को सीधे जगह पर लिखा गया है, या अन्यथा - इनलाइन। यह इस तरह दिख रहा है:
दूसरे, आपको हमेशा इंडेंट, मार्जिन और बॉर्डर के मूल्यों को जबरन रीसेट करना चाहिए, क्योंकि प्रत्येक ईमेल क्लाइंट उन्हें अपने तरीके से प्रदर्शित करने का प्रयास करता है:
तीसरा, आपको सिद्धांत, सिर और शरीर के टैग से परेशान होने की जरूरत नहीं है। एक सिद्धांत के बिना, आपके पत्र हर जगह समान होंगे, सिर और शरीर व्यावहारिक रूप से बेकार हैं, क्योंकि अभी भी अधिकांश मेल सेवाओं (सबूत) द्वारा कटौती की जाएगी।
चौथा, यदि आप अक्षरों में चित्रों का उपयोग करते हैं, तो उनके आकार लिखना सुनिश्चित करें।
अक्षरों का अनुकूली लेआउट
बहुत बार, मेलर्स छवियों को अक्षरों में ब्लॉक कर देते हैं, और यदि आप उनका आकार निर्धारित नहीं करते हैं, तो पत्र अनाड़ी लगेगा। साथ ही, शैली = "प्रदर्शन: ब्लॉक; जोड़ना सुनिश्चित करें। यह समझ से बाहर इंडेंटेशन के साथ समस्याओं से छुटकारा दिलाएगा (उदाहरण के लिए, जीमेल में):
और किसी भी स्थिति में टेबल सेल के लिए स्पेसर के रूप में सिंगल-पिक्सेल छवियों का उपयोग न करें! आपका पत्र स्पैम में समाप्त होने की गारंटी है। यदि आपको स्पेसर की आवश्यकता है, तो आपको कम से कम 20x20 पिक्सेल के आयाम वाले चित्र का उपयोग करना चाहिए, जिसे शैलियों में 1x1 पिक्सेल आकार के लिए मजबूर किया जाना चाहिए।
पांचवां, अक्षरों के लिए अनुकूली लेआउट बनाना संभव है। यह उतना ही अनाड़ी दिखता है जितना कि सामान्य रूप से सभी टेबल के साथ काम करते हैं, लेकिन मछली के बिना ... आप इसे स्वयं समझते हैं। संक्षेप में, आपके पत्र में प्रत्युत्तरशीलता के कुछ अंश होने के लिए, इसके सामग्री भाग को उपयुक्त शैलियों के साथ एक केंद्र टैग के साथ तैयार किया जाना चाहिए:
और अंत में, कुछ उपयोगी लिंक। यहां आप देख सकते हैं कि कौन से टैग विभिन्न ईमेल सेवाओं द्वारा समर्थित हैं। और यहां आपको कुछ और उपयोगी चीजें मिलेंगी - "एचटीएमएल-अक्षर लेआउट की विशेषताएं"।
यदि लेख आपके लिए उपयोगी साबित हुआ, तो कृपया इसे रेट करें और सामाजिक नेटवर्क पर साझा करें:
(2 वोट, औसत:
संबंधित प्रविष्टियां:
रिस्पॉन्सिव ईमेल का लेआउट: एक मार्केटर का मेमो
अधिकांश ईमेल मोबाइल उपकरणों पर ठीक से प्रदर्शित नहीं होते हैं। ड्रॉइंग अलग हो जाती है और टेक्स्ट को स्क्रॉल और स्केल करना पड़ता है। ईमेल के लिए विभिन्न प्लेटफॉर्म पर अच्छे दिखने के लिए उत्तरदायी लेआउट आवश्यक है।
यह पाठ्यक्रम HTML और CSS के बुनियादी ज्ञान के साथ HTML कोडर्स, डेवलपर्स और ईमेल विपणक के उद्देश्य से है। आप सीखेंगे कि मोबाइल और फ्लूइड लेआउट, ब्लॉक और फ्लैंक अनुकूलन क्या हैं। अक्षरों के लिए चित्र तैयार करना सीखें और बुनियादी लेआउट टूल पर विचार करें।
पाठ्यक्रम के बाद, आप ऐसे अक्षर बनाने में सक्षम होंगे जो कंप्यूटर और मोबाइल उपकरणों पर समान रूप से प्रदर्शित होते हैं।
2. उत्तरदायी लेआउट की विशेषताएं
3. ईमेल अनुकूलन के दृष्टिकोण
4. मूल उत्तरदायी ईमेल टेम्पलेट
5. मोबाइल अनुकूलन के लिए तकनीक
6. HTML लेआउट टूल
7. पाठ्यक्रम को सारांशित करना
8. उत्तरदायी ईमेल मार्केटिंग: अंतिम परीक्षण
ईमेल न्यूज़लेटर्स के रचनात्मक लेआउट की अनंत संभावनाएं, ग्राफिक तत्वों का उपयोग और दिलचस्प सामग्री ग्राहक का ध्यान आकर्षित करती है। ऐसे ईमेल स्पैम में नहीं भेजे जाते हैं।
मेलिंग लेटर बनाना
ईमेल मार्केटिंग सिस्टम के सफल अनुप्रयोग के लिए, एक साधारण न्यूज़लेटर तर्क और एक प्रस्ताव के साथ एक पत्र होना पर्याप्त नहीं है।
३० मुक्त उत्तरदायी ईमेल टेम्पलेट
ध्यान आकर्षित करने के लिए, सही लिंक और आकर्षक छवियों के साथ, एक सुंदर "आवरण" में जानकारी प्रस्तुत की जानी चाहिए। पत्र की पहली छाप बाहरी आवरण है, भरना माध्यमिक है।
उपयोगकर्ताओं को हर दिन लगभग सौ पत्र प्राप्त होते हैं, आपको दर्शकों का ध्यान एक "उज्ज्वल" और रोमांचक शीर्षक और प्रस्ताव के साथ आकर्षित करना चाहिए। डाक के लिए पत्रों के डिजाइन और लेआउट के सफल कार्यान्वयन के लिए, आपको परियोजना के कार्यान्वयन के लिए एक रणनीति पर विचार करना चाहिए:
- एक विचार पर विचार करें और सही ढंग से अक्षरों की एक श्रृंखला बनाएं;
- मुख्य बात को उजागर करें, एक दिलचस्प उत्पाद प्रदान करके ग्राहक का विश्वास जीतें;
- पत्रों को कार्रवाई को प्रोत्साहित करना चाहिए, उत्पाद खरीदने के लिए प्रेरित करना चाहिए;
- आकर्षक डिजाइन, पेशेवर मेलिंग के लिए पत्रों का एचटीएमएल लेआउट बनाएंगे।
विशेषज्ञ ईमेल संदेशों के रिस्पॉन्सिव लेआउट का ध्यान रखेंगे ताकि डिजाइन किसी भी डिवाइस पर शानदार दिखे। यदि आपके ऑनलाइन स्टोर में कॉर्पोरेट पहचान नहीं है, तो हम एक सामान्य ब्रांडेड लेटर लेआउट बनाएंगे, जो मेलिंग का आधार होगा। मार्केटिंग किसी व्यक्ति में भावनाओं को जगाने, कुछ खरीदने की इच्छा पैदा करने की क्षमता है। हम इस क्षेत्र में पेशेवर हैं, इसलिए हमारे काम का परिणाम हमेशा उत्कृष्ट होता है।
html अक्षरों का लेआउट
- किसी उत्पाद / सेवा को बढ़ावा देने और पाठ प्रारूप में उसके कार्यान्वयन का विचार।
- डाक के लिए पत्र डिजाइन।
- ईमेल का लेआउट।
- सभी प्लेटफार्मों और मेल सेवाओं पर परिणाम का परीक्षण करना।
अक्षरों का अधिकतम प्रभाव प्राप्त किया जा सकता है यदि प्रक्रिया की प्रत्येक कड़ी स्पष्ट रूप से और कुशलता से कार्य को पूरा करेगी। एक पेशेवर लेआउट डिजाइनर और डिजाइनर विशिष्ट ईमेल क्लाइंट के लिए लेआउट को ध्यान में रखते हुए, कार्यक्षमता के अनुकूलन और पत्र के तकनीकी आधार को संभालेंगे। पत्र सभी प्लेटफार्मों पर सही ढंग से प्रदर्शित होगा - इसे क्रॉस-मेलिंग कहा जाता है।
सरल पहचानने योग्य टेम्पलेट, सही चौड़ाई, कंपनी की जानकारी और एक सदस्यता समाप्त फॉर्म - जब यह सब ध्यान में रखा जाता है, तो आपका न्यूजलेटर आत्मविश्वास को प्रेरित करेगा, और ग्राहक "स्पैम" बटन पर क्लिक करने के बारे में सोच भी नहीं पाएगा।
आपको क्या मिलेगा?
- सभी नियमों के अनुसार बनाए गए क्रॉस-मेलिंग पत्र
- सटीक सुंदर रचना
- उच्च सीटीआर
- अनसब्सक्रिप्शन की कम दर, स्पैम में जोड़ना
- सुविचारित पाठ, न्यूज़लेटर्स को लक्षित करना
- प्रभावी विभाजन
- अधिकांश ईमेल क्लाइंट में अक्षरों का सही प्रदर्शन
- मेलिंग प्रक्रिया का सही तकनीकी सेटअप
यह सिर्फ सौंदर्यशास्त्र नहीं है जो मायने रखता है - कार्यक्षमता महत्वपूर्ण है। यदि आप अपने पत्र ठीक से प्राप्त करने के लिए तैयार हैं - हम आपको मुफ्त परामर्श के लिए आमंत्रित करते हैं।
अद्यतन सामग्री 06/20/2018
विभिन्न वेब इंटरफेस और ईमेल क्लाइंट में व्याख्या की ख़ासियत के कारण अक्षरों का लेआउट सामान्य वेब लेआउट से भिन्न होता है।
आइए उदाहरणों पर एक नज़र डालें कि कैसे सभी प्रकार के आईएसपी और ईमेल क्लाइंट में पत्र का अच्छा प्रदर्शन प्राप्त किया जाए।
एक सामान्य प्रतिक्रियाशील ईमेल टेम्प्लेट कैसा दिखता है:
|
IOS 10 और iOS 11 में ऑटोस्केलिंग ईमेल के साथ समस्या को ठीक करने के लिए, हमने जोड़ा:
ऑटोस्केल त्रुटि उदाहरण
अगला हैक:
वेबकिट-पाठ-आकार-समायोजन: कोई नहीं; -एमएस-पाठ-आकार-समायोजित: कोई नहीं;
आईओएस उपकरणों को पठनीयता के लिए पत्र की सामग्री को बदलने से रोकता है। यह आमतौर पर डिजाइन का खंडन करता है और लेआउट को तोड़ सकता है:
आइए पत्र के मुख्य भाग पर चलते हैं - मुख्य भाग। वेब इंटरफ़ेस का पृष्ठभूमि रंग भिन्न हो सकता है, इसलिए आपको वांछित पृष्ठभूमि रंग के साथ तालिका में सब कुछ लपेटने की आवश्यकता है, भले ही वह सफेद हो, जैसा कि इस मामले में है:
| … |
आउटलुक 2007-2016 मेल क्लाइंट्स के साथ-साथ IE-जैसे मेल क्लाइंट्स आउटलुक 2003 और लोटस मेल द्वारा स्टाइल प्रॉपर्टीज के लिए अधिकतम-चौड़ाई जैसे सीमित समर्थन के कारण, सशर्त टिप्पणियों में एक सहायक तालिका संरचना का निर्माण करना आवश्यक है। इन मेल क्लाइंट में संदेश की चौड़ाई सीमित कर देगा:
| ब्लॉक1 | ब्लॉक २ |
के बीच संलग्न कोड:
Outlook 2007-2016 और IE जैसे ईमेल क्लाइंट को छोड़कर सभी ईमेल क्लाइंट द्वारा अनदेखा कर दिया जाएगा।
और प्रत्येक ब्लॉक में निम्नलिखित संरचना होगी:
| खंड |
इसके अलावा, पत्रों में, कभी-कभी ऐसी स्थिति होती है जब ब्लॉक कंपित हो जाते हैं, हालांकि, पुनर्निर्माण करते समय, ब्लॉक के तार्किक अनुक्रम को संरक्षित करने और बाएं के नीचे दाएं ब्लॉक को पुनर्निर्माण करने की सलाह नहीं दी जाती है, लेकिन इसके विपरीत - बाएं ब्लॉक के नीचे सही। यह टेक्स्ट की दिशा बदलकर किया जा सकता है, यह इस तरह दिखेगा:
|
अन्य तत्व और तकनीक
अदृश्य प्रीहेडर
लगभग सभी वेब इंटरफेस सब्जेक्ट लाइन के आगे पहला टेक्स्ट भी प्रदर्शित करते हैं:
मेलिंग सूचियों में, यह आमतौर पर तकनीकी जानकारी होती है, जैसे "सदस्यता समाप्त करें" और "ब्राउज़र में खोलें", जो स्पष्ट रूप से ग्राहक को पत्र खोलने के लिए प्रेरित नहीं करता है, हालांकि, प्रदर्शित पाठ को नियंत्रित करके, आप संभावना को काफी बढ़ा सकते हैं पत्र खोलना।
ऐसा करने के लिए, पत्र के एचटीएमएल-बॉडी की शुरुआत में निम्नलिखित संरचना के साथ एक कोड जोड़ें:
अदृश्य प्रीहेडर का उपयोग करने से सुपुर्दगी पर नकारात्मक प्रभाव पड़ सकता है, इसलिए इस तकनीक का सावधानीपूर्वक उपयोग करें और पोस्टमास्टर के माध्यम से सुपुर्दगी की सावधानीपूर्वक निगरानी करें।
ईमेल में वीडियो
मानक मेल क्लाइंट मेल ने फिर से html5 वीडियो चलाना शुरू किया, हालांकि, छवि पर रखे गए youtube वीडियो का एक सीधा लिंक है।
इस कार्यान्वयन के साथ, वीडियो Mail.ru (लगभग 55%) और जीमेल (लगभग 14%) वेब इंटरफेस में एक परत पर प्रदर्शित किया जाएगा। इस मामले में, अधिकांश मोबाइल उपकरणों पर, वीडियो को बिना ब्राउज़र खोले, Youtube एप्लिकेशन में खोला जाएगा।
इस दृष्टिकोण का नुकसान क्लिक पर आंकड़े एकत्र करने में असमर्थता है, क्योंकि यूट्यूब का लिंक सीधा होना चाहिए, और इस मेलिंग के लिए क्लिक की ट्रैकिंग को आपके ईएसपी में अक्षम करना होगा।
परिक्षण
लेआउट का सबसे महत्वपूर्ण चरण अक्षरों का परीक्षण है। सबसे अच्छा तरीका अभी भी विभिन्न वेब इंटरफेस और ईमेल क्लाइंट में पत्र के प्रदर्शन को मैन्युअल रूप से जांचना है, इससे संग्रह के रूप में अक्षरों का "कच्चा" लेआउट भेजने में मदद मिल सकती है। आपको यह जानने की जरूरत है कि आपके ग्राहक किन प्लेटफार्मों का उपयोग करते हैं, वे कौन से ईमेल प्रदाता पसंद करते हैं, और कम से कम सबसे लोकप्रिय लोगों को मैन्युअल रूप से जांचें।
परीक्षण प्रक्रिया को तेज करने के लिए, आप लिटमस और ईमेलऑनएसिड सेवाओं का उपयोग कर सकते हैं, लेकिन यह प्रत्येक व्यक्तिगत पत्र के प्रदर्शन को मैन्युअल रूप से जांचने की आवश्यकता को समाप्त नहीं करता है।
लेख में कुछ सेवाओं, संसाधनों और उपकरणों का उल्लेख किया गया है जो निस्संदेह पत्र डिजाइनर के लिए उपयोगी होंगे और न केवल। यहाँ उपयोगी संसाधनों की एक छोटी सूची है।
उपकरण और सेवाएं:
ईमेल बटन वीएमएल का उपयोग करने वाला एक बटन जनरेटर है।
- वीएमएल का उपयोग करके ईमेल में पृष्ठभूमि छवियों को सम्मिलित करना।
लिटमस - अक्षरों के प्रदर्शन का परीक्षण।
ईमेल ऑन एसिड लिटमस का एक विकल्प है: ईमेल के प्रदर्शन का परीक्षण करना।
उपयोगी सामग्री:
ईमेल परीक्षण बाजार में ब्लॉग लिटमस अग्रणी है। दिलचस्प मामले और ईमेल मार्केटिंग और ईमेल लेआउट की दुनिया की ताजा खबरें।
एसिड पर ब्लॉग ईमेल - दिलचस्प मामले और ईमेल मार्केटिंग और ईमेल लेआउट की दुनिया से नवीनतम समाचार।
- ईमेल मार्केटिंग के बारे में पहला ब्लॉग, ईमेल को प्रभावी बनाने के बारे में बात करता है।
टॉड का ब्लॉग - लेआउट और विकास के बारे में दिलचस्प मामले और उपयोगी सामग्री।
- अनुवाद
जो कोई भी समय-समय पर अपने मेल को अपने फोन पर पढ़ता है, वह जानता है कि यह अनुभव उतना ही सुखद हो सकता है जितना कि यह सर्वथा भयानक है। तथ्य यह है कि एक मेलिंग सूची से एक ईमेल डेस्कटॉप पर बहुत अच्छा दिखता है, इसका मतलब यह नहीं है कि मोबाइल ईमेल क्लाइंट में सब कुछ ठीक होगा - एक छोटी स्क्रीन पर, अक्सर फोंट के साथ समस्याएं होती हैं, कॉलम प्रदर्शित करना, और टेम्पलेट्स का लेआउट बस टूट जाता है नीचे।
आपको मोबाइल उपकरणों के लिए ईमेल को अनुकूलित करने की आवश्यकता क्यों है
विभिन्न ईमेल मार्केटिंग कंपनियों के दर्शकों का एक महत्वपूर्ण हिस्सा मोबाइल उपकरणों पर ईमेल देखता है। 2011 के अभियान मॉनिटर अध्ययन में पाया गया कि लगभग 20% ईमेल स्मार्टफोन और टैबलेट पर खुले - 2009 में सिर्फ 4% से। इनमें से लगभग 90% खोजें iOS उपकरणों पर की गईं। अब संख्या और भी ज्यादा हो गई है।इस ट्यूटोरियल में, हम मोबाइल उपकरणों पर प्रदर्शन को बेहतर बनाने के कई तरीकों को देखेंगे (रिस्पॉन्सिव टेम्प्लेट को कोड करते समय मीडिया क्वेरी का उपयोग करने से लेकर अधिक उन्नत तकनीकों तक)। इसके अलावा, हम विभिन्न डिज़ाइन मुद्दों को देखेंगे जो मेलिंग सूची की योजना बनाने के चरण में उत्पन्न होते हैं, साथ ही साथ बात करते हैं कि स्मार्टफोन और टैबलेट पर पत्र प्राप्त करने के लिए सदस्यता फॉर्म कैसे रखें।
डिजाइन तकनीक
टाइपसेटिंग अक्षरों की दुनिया में गोता लगाने से पहले, आइए इस मामले के दृश्य पहलू के बारे में बात करते हैं। एक दिलचस्प बात यह है कि सामग्री के विश्लेषण के दौरान, हम एक ही अक्षर के दो संस्करण बनाएंगे - एक टेम्पलेट डेस्कटॉप ईमेल क्लाइंट पर अच्छा दिखने के लिए डिज़ाइन किया गया है, और दूसरा छोटे स्क्रीन वाले उपकरणों पर पढ़ने के लिए सुखद होना चाहिए।उदाहरण के लिए, आउटलुक में ऐसा पत्र कैसा दिख सकता है:
नीचे वही ईमेल है, लेकिन iPhone के लिए मेल ऐप में खोला गया है। दो टेम्पलेट्स के बीच का अंतर स्पष्ट रूप से दिखाई देता है। मोबाइल संस्करण संकरा है, इसमें कम वैकल्पिक दृश्य तत्व हैं, लेकिन इसे पढ़ना डेस्कटॉप संस्करण जितना आसान है। दो मोबाइल विकल्पों के बीच दिखने में अंतर CSS के उपयोग में है।
दायां अक्षर बाएं से अलग नहीं है, लेकिन इसके लेआउट में किसी CSS का उपयोग नहीं किया गया था। पाठ के कुछ हिस्से बहुत छोटे निकले, और उपयोगकर्ता के लिए यह पता लगाना लगभग असंभव है कि वहां क्या लिखा गया है - यह उन लाखों समाचार पत्रों की समस्या है जो मोबाइल डिवाइस मालिकों को हर दिन प्राप्त होते हैं।
टेम्प्लेट बनाते समय ध्यान देने योग्य बातें
कस्टम सीएसएस का उपयोग करने की तुलना में मोबाइल पर अच्छे दिखने वाले ईमेल बनाना कहीं अधिक कठिन है। अन्य बातों के लिए भी ध्यान दें:- मोबाइल उपकरणों पर, 500-600 पिक्सेल से अधिक चौड़े एकल-स्तंभ टेम्पलेट सर्वोत्तम कार्य नहीं करते हैं। उन्हें पढ़ना आसान है, और उनमें कुछ खामियां होने पर भी, सभी "शॉल्स" किसी भी मामले में बेहतर दिखते हैं।
- Apple के दिशानिर्देशों के अनुसार, बटन और लिंक के लिए न्यूनतम लक्ष्य क्षेत्र 44 x 44 पिक्सेल होना चाहिए। छोटे लिंक के एक समूह के अलावा "उपयोग से बाहर" और कुछ भी नहीं है जिसे मोबाइल डिवाइस की छोटी स्क्रीन पर एक्सेस करना मुश्किल है।
- IPhone पर प्रदर्शित न्यूनतम फ़ॉन्ट 13 पिक्सेल है। पत्र का पाठ बनाते समय इस तथ्य को ध्यान में रखना आवश्यक है - यदि टेम्पलेट में पाठ छोटे फ़ॉन्ट में टाइप किया गया है, तो यह स्वचालित रूप से बड़ा हो जाएगा, जो पूरे लेआउट को तोड़ सकता है।
- पत्र संक्षिप्त होना चाहिए, और सभी महत्वपूर्ण जानकारी इसके शीर्ष पर रखी जानी चाहिए। अपनी उंगली से टचस्क्रीन पर स्क्रॉल करना माउस वाले डेस्कटॉप की तुलना में अधिक कठिन है।
- यदि संभव हो, तो डिस्प्ले का उपयोग करें: कोई नहीं संपत्ति; वैकल्पिक टेम्पलेट तत्वों को छिपाने के लिए। सोशल नेटवर्क शेयरिंग बटन डेस्कटॉप पर उपयुक्त होते हैं, लेकिन स्मार्टफोन पर उपयोग करने के लिए वे हमेशा सुविधाजनक नहीं होते हैं।
अब जब हमने मोबाइल मेलिंग सूचियों के लिए कुछ महत्वपूर्ण डिज़ाइन मुद्दों को कवर कर लिया है, तो हम सीधे उनके लेआउट के विभिन्न पहलुओं पर जा सकते हैं।
मोबाइल ईमेल टाइप करना
जब मोबाइल शैलियों की बात आती है, तो अक्सर यह एक अलग शैली की फ़ाइल नहीं होती है, बल्कि मीडिया के प्रश्न होते हैं। इस तरह वे दिखते हैं:
आइए देखें कि @media घोषणा कैसे काम करती है। सबसे पहले, "मोबाइल" सीएसएस बनाने के लिए, आपको कुछ मानदंड लागू करने की आवश्यकता है जिसके द्वारा मेल क्लाइंट निर्धारित करेगा कि किन शैलियों का उपयोग करना है।
ऐसा करने के लिए, @media केवल स्क्रीन ऑपरेटर का उपयोग किया जाता है - यह इंगित करता है कि मेल क्लाइंट को स्क्रीन पर प्रदर्शित किया जाना चाहिए (उदाहरण के लिए, प्रिंटर पर मुद्रित होने के बजाय)। उसके बाद, उपरोक्त उदाहरण कोड में, हम डिवाइस की अधिकतम स्क्रीन चौड़ाई 480 पिक्सेल पर सेट करते हैं। यह महत्वपूर्ण है क्योंकि कई (लेकिन सभी नहीं) मोबाइल उपकरणों में 480 पिक्सेल या उससे कम का ऑन-स्क्रीन डिस्प्ले क्षेत्र होता है।
यही कारण है कि मैक्स-डिवाइस-चौड़ाई: 480 पीएक्स अक्सर उपयोग किया जाता है (यह लैंडस्केप मोड में पिछले आईफोन की डिस्प्ले चौड़ाई भी है), लेकिन आप अन्य स्क्रीन आकारों को कवर करने के लिए विवरण का विस्तार कर सकते हैं:
@media स्क्रीन और (डिवाइस-चौड़ाई: 480px) और (डिवाइस-ऊंचाई: 360px), स्क्रीन और (डिवाइस-चौड़ाई: 360px) और (डिवाइस-ऊंचाई: 480px), स्क्रीन और (डिवाइस-चौड़ाई: 320px) और (डिवाइस-चौड़ाई: 320px) -ऊंचाई: 240px) (...)
आइए ऊपर चर्चा किए गए मोबाइल ईमेल टेम्प्लेट पर वापस जाएं। ऐप्पल मेल में यह कैसा दिखता है:
यह उदाहरण टेक्स्ट और छवियों वाली HTML तालिकाओं पर सामग्री योग्य वर्ग का उपयोग करता है। यहाँ कुछ नमूना कोड है:
यह वर्ग एक दिलचस्प भूमिका निभाता है - जब 480 पिक्सेल या उससे अधिक की स्क्रीन वाले डिवाइस पर ईमेल खोला जाता है, तो यह कुछ भी प्रभावित नहीं करता है। हालाँकि, जब स्क्रीन 480 या छोटी होती है, तो यह तालिका की चौड़ाई को 320 पिक्सेल तक सीमित कर देती है। विशेषता चयनकर्ताओं का उपयोग Yahoo मेल में असामान्य गड़बड़ी से बचने के लिए किया जाता है। अन्यथा, "सामान्य" सीएसएस का उपयोग किया जाता है। इसके अलावा, आप निम्नलिखित विज्ञापन शामिल कर सकते हैं:
@मीडिया केवल स्क्रीन और (अधिकतम-डिवाइस-चौड़ाई: 480px) (/ * मोबाइल-विशिष्ट CSS शैलियाँ यहाँ जाएँ * / तालिका (चौड़ाई: 325px! महत्वपूर्ण;) img (चौड़ाई: 325px! महत्वपूर्ण;) p (प्रदर्शन: कोई नहीं! जरूरी;))
इसके बाद, हम मोबाइल ईमेल को मोबाइल उपकरणों के अनुकूल बनाने के लिए अधिक परिष्कृत तकनीकों पर ध्यान देंगे।
उत्तरदायी टू-टू-वन कॉलम लेआउट बनाएं
मोबाइल उपकरणों के लिए अपने न्यूज़लेटर को अनुकूलित करने के लिए एक-स्तंभ टेम्पलेट का उपयोग करना एक अच्छा तरीका है। कहा जा रहा है, मीडिया प्रश्नों में लंबे सीएसएस का उपयोग किए बिना उत्तरदायी दो-स्तंभ लेआउट बनाने के तरीके हैं।दो-स्तंभ लेआउट आपको डेस्कटॉप या वेब ईमेल क्लाइंट में प्रदर्शित संदेश के शीर्ष पर अधिक सामग्री डालने की अनुमति देता है, लेकिन मोबाइल उपकरणों पर ऐसे ईमेल को पढ़ना और नेविगेट करना अभी भी एक खुशी है। आप इसे अच्छे पुराने कोड से ठीक कर सकते हैं।
ईमेल लेआउट का सुनहरा नियम है: "जहां भी संभव हो, सीएसएस के बजाय एचटीएमएल का प्रयोग करें।" विभिन्न ईमेल क्लाइंट द्वारा सीएसएस का समर्थन करने की डिग्री काफी भिन्न हो सकती है, लेकिन वे सभी HTML के साथ एक ही तरह से काम करते हैं। उदाहरण के लिए, एलाइन = "बाएं" और सेलपैडिंग = "10" जैसी विशेषताएं उनके सीएसएस समकक्ष फ्लोट की तुलना में अधिक विश्वसनीय उपकरण हैं: बाएं; और पैडिंग: 10px; ... ये वे विशेषताएँ हैं जिनका उपयोग "दो से एक कॉलम" प्रारूप में अक्षर बनाते समय किया जाएगा।
आउटलुक 2007 में एक समान पत्र इस तरह दिख सकता है:
ऊपर दिया गया उदाहरण 640px चौड़ी कंटेनर तालिका का उपयोग करता है जिसमें दो 320px तालिकाएँ होती हैं जो स्तंभ बनाती हैं। इन स्तंभों में सेलपैडिंग = "20" है - ऐसा इसलिए किया जाता है ताकि सामग्री सीमाओं से न चिपके।
वेब के लिए कोडिंग करते समय, वे आमतौर पर फ्लोट का उपयोग करते हैं: बाएं; कॉलम संरेखित करने के लिए। हालाँकि, इसके बजाय align = "left" का उपयोग किया जा सकता है। चूंकि कंटेनर टेबल की चौड़ाई दो नेस्टेड टेबल की संयुक्त चौड़ाई के बराबर या उससे अधिक है, HTML का उपयोग करना अच्छी तरह से काम करता है। नीचे समान दो-स्तंभ पैटर्न के लिए एक सरल कोड दिया गया है:
|
परिणाम इस तरह दिखता है:
कंटेनर तालिका 640 पिक्सेल चौड़ी है, इसलिए लेआउट दो-स्तंभ होगा। लेकिन इस घटना में कि स्क्रीन की चौड़ाई इससे कम है, तो दाएं कॉलम की सामग्री बाईं ओर "लिपटे" हो जाएगी। यदि आप नेस्टेड टेबल की चौड़ाई 320 पिक्सल के बराबर बनाते हैं, तो मोबाइल डिवाइस पर प्रदर्शित होने पर, आपको एक कॉलम वाला अक्षर मिलेगा जिसे "ज़ूम" करने की आवश्यकता नहीं है। HTML कोड में मीडिया क्वेरी की एक पंक्ति जोड़कर यह प्रभाव प्राप्त किया जा सकता है:
पहला शीर्षकछिपाएं दिखाएं
|
पेलेंटेस्क हैबिटेंट मोरबी...
लोड हो रहा है ...