🐘 🤙🏻 👂🏾 वितरित करें और जीतें: समाचार पत्र बनाने और परीक्षण करने के लिए उपकरण ◼️ 🙋🏾 👩🏼‍💼

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

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

मान लीजिए कि आप समाचार पत्र बनाना चाहते हैं

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

एक पत्र टेम्पलेट का एक उदाहरण जो कि "बॉक्स से बाहर" है, जो सेर्बेरस में उपलब्ध है

दूसरा विकल्प: टेम्पलेट बनाने के लिए ऑनलाइन संपादक का उपयोग करें (उदाहरण के लिए, मोसिको या स्ट्रिपो )। यह सबसे आसान तरीका है। यह सही है यदि आप एक डेवलपर नहीं हैं या यदि आप पहली बार लेआउट के साथ सामना कर रहे हैं और पत्र का लेआउट काफी सरल है। लगभग सभी ऑनलाइन संपादक तैयार किए गए टेम्पलेट प्रदान करते हैं, और लोकप्रिय ग्राहक क्लाइंट में ईमेल के सही संचालन के लिए टेम्पलेट के स्रोत कोड में हैक भी शामिल करते हैं। लेकिन ये उपकरण व्यावहारिक रूप से आपको अपने विशिष्ट लेआउट के लिए पत्र के लेआउट को अनुकूलित करने की अनुमति नहीं देते हैं और आमतौर पर कोड और पत्र की उपस्थिति दोनों का बहुत कम नियंत्रण देते हैं।

स्ट्रिपो के संदेश डिजाइनर में पत्र टेम्पलेट में परिवर्तन

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

हम एक तैयार ईमेल फ्रेमवर्क का उपयोग करते हैं। MJML

गीथूब : mjmlio / mjml
डेवलपर: Mailjet
रिलीज की तारीख: 2016
लाइसेंस: MIT
लोकप्रियता: 7662+ सितारे
साँचा: MJML

फ्रेमवर्क में एम्बेडेड मुख्य विचार:

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

फ्रेमवर्क उसी नाम के टेम्पलेट इंजन का उपयोग करता है। यह सरल है और एक ही समय में बहुत शक्तिशाली है। टैग्स टेबल, थीड, tbody, th, tr, td को भूल जाइए। भूल जाओ कि शैलियों को इनलाइन लिखने की आवश्यकता है। पत्र कोड की अपठनीय जटिल संरचना के बारे में भूल जाओ। यहाँ एमजेएमएल का उपयोग कर आपका ईमेल कैसा दिखेगा:

<mjml> <mj-head> <mj-style> @media all and (max-width: 480px) { div[style*="color:#F45e46;"] { text-align: center !important } } </mj-style> <mj-style inline="inline"> .link-nostyle { color: inherit; text-decoration: none } </mj-style> </mj-head> <mj-body> <mj-section > <mj-column> <mj-image width="100" src="/assets/img/logo-small.png"></mj-image> <mj-divider border-color="#F45E43"></mj-divider> <mj-text font-size="20px" color="#F45e46" font-family="helvetica"> Hello <a href="https://mjml.io" class="link-nostyle">World</a> </mj-text> </mj-column> </mj-section> </mj-body> </mjml>

घोंसले के शिकार के विभिन्न स्तरों के HTML तालिकाओं से जटिल निर्माणों के बजाय, यह केवल कुछ पंक्तियों को लिखने के लिए पर्याप्त है, जो परियोजना का निर्माण करते समय, सभी आवश्यक हैक के साथ पत्र के एक मान्य HTML कोड, "अनुभवी" में बदल जाएगा।

एमजेएमएल लोकप्रिय पाठ संपादकों के लिए प्लगइन्स प्रदान करता है - विज़ुअल स्टूडियो कोड, एटम और सबलेम टेक्स्ट। वे एडिटर में सीधे टाइपसेट के पूर्वावलोकन के साथ लैंग्वेज सिंटैक्स हाइलाइटिंग, एक लिंटर और एक टैब जोड़ते हैं।

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

मानक घटकों (जैसे एक बटन या हिंडोला) के एक सेट के अलावा, तैयार कस्टम घटक हैं (उदाहरण के लिए, रेखांकन बनाने के लिए एक घटक)। आप समुदाय ऐड-ऑन पृष्ठ पर उपयोगी उपयोगिताओं को पा सकते हैं, जैसे कि वेबपैक के लिए एमजेएमएल लोडर या लारवेल एमजेएमएल एप्लिकेशन के लिए एकीकरण उपकरण। और इतने समय पहले बीटा स्थिति में, सीधे ईमेल उत्पन्न करने के लिए एमजेएमएल एपीआई का उपयोग करना संभव नहीं हुआ, उदाहरण के लिए, एक मोबाइल एप्लिकेशन के अंदर। बात काफी विशिष्ट है, लेकिन यह अपने उपयोगकर्ता को निश्चित रूप से मिलेगा।

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

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

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

हम एक तैयार ईमेल फ्रेमवर्क का उपयोग करते हैं। ईमेल के लिए फाउंडेशन

जीथब: ज़र्ब / फाउंडेशन-ईमेल
डेवलपर: ZURB
रिलीज की तारीख: 2015
लाइसेंस: MIT
लोकप्रियता: 6885+ सितारे
साँचा: इंकी

यदि आप फ्रंट-एंड की दुनिया में पहला वर्ष नहीं हैं, तो आपने शायद फाउंडेशन के लिए फाउंडेशन के बारे में सुना है (लेकिन - मैंने शर्त लगाई - आपने शायद ही इसका इस्तेमाल किया हो?)। ZURB कंपनी के डेवलपर्स द्वारा बनाया गया यह फ्रेमवर्क लंबे समय तक फ्रंट-एंड वेब फ्रेमवर्क के बीच सबसे लोकप्रिय (बूटस्ट्रैप के बाद) के रूप में अपनी स्थिति को सुरक्षित रखता है।

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

पहली बात यह है कि यदि आप फाउंडेशन CLI को स्थापित करने की कोशिश करने का निर्णय लेते हैं:

npm install --global foundation-cli

तब आप कमांड के साथ एक नया प्रोजेक्ट बना सकते हैं:

foundation new --framework emails

और पत्र विकसित करना शुरू करें।

सच है, आपको कुछ मिनट इंतजार करना होगा जब तक कि सभी आवश्यक मॉड्यूल और घटक लोड न हो जाएं। चूंकि बड़ी संख्या में फाइलें डाउनलोड की जाती हैं, इसलिए फ़ोल्डर के आकार पर आश्चर्य न करें - एक खाली परियोजना का वजन 400+ एमबी होगा। Cli के अलावा, Live Reload बॉक्स से बाहर उपलब्ध है, सभी आवश्यक हैक्स, रेडीमेड टेम्प्लेट और पार्टियल के साथ एक बेसिक बॉयलरप्लेट, साथ ही SASS सपोर्ट।

ईमेल परियोजना फ़ाइल संरचना के लिए फाउंडेशन

FfE का अपना टेम्पलेट इंजन है - Inky। इसके मूल में, यह एमजेएमएल टेम्पलेट इंजन के समान है - यह शॉर्टहैंड टैग का उपयोग करते हुए जटिल नेस्टेड तालिकाओं के साथ काम करना सरल करता है:

 <container> <row> <columns small="12" large="6">Column One</columns> <columns small="12" large="6">Column Two</columns> </row> </container>

कुल मिलाकर लगभग दस टैग हैं, उनमें से तीन का उपयोग ग्रिड बनाने के लिए किया जाता है (ऊपर उदाहरण देखें), ब्लॉक ग्रिड बनाने के लिए ब्लॉक-ग्रिड टैग का उपयोग किया जाता है, दो और टैग एक मेनू (मेनू और आइटम) हैं, और दो और नामों के लिए खुद से बात करते हैं: बटन और कॉलआउट

FfE एक 12-कॉलम ग्रिड का उपयोग करता है, जिसे 2, 3, 4 या 6 कॉलम तक सरलीकृत किया जा सकता है, और आपको मोबाइल और डेस्कटॉप राज्यों के लिए अलग से कॉलम की संख्या निर्धारित करने की भी अनुमति देता है।

पाणिनि और कम्पाइलर की प्रणाली को पाणिनी फाइल कंपाइलर का उपयोग करके कार्यान्वित किया जाता है, जो सरल और सुविधाजनक हैंडलबार्स टेम्पलेट इंजन का आंतरिक रूप से उपयोग करता है।

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

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

न्यूज़लेटर परीक्षण उपकरण

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

लिटमस न्यूज़लेटर का परीक्षण

लिटमस मेलिंग सूचियों का परीक्षण करते समय आपको आवश्यक उपकरण प्रदान करता है। यह html कोड (बिल्डर), और एक मेलिंग एनालिटिक्स सिस्टम, और "चेकलिस्ट" का एक सेट है - प्रदर्शन परीक्षण उपकरण, स्पैम के लिए ईमेल की जाँच, और बहुत कुछ।

सबसे महत्वपूर्ण "चेकलिस्ट" - ईमेल पूर्वावलोकन - 90 + डेस्कटॉप / मोबाइल / वेब ईमेल क्लाइंट में ईमेल की जांच करना संभव बनाता है। यह कुछ क्लिक में किया जाता है। आपको बिल्डर में पत्र कोड डालने की आवश्यकता है, परीक्षण बटन पर क्लिक करें और आवश्यक ईमेल क्लाइंट का चयन करें।

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

लिटमस में प्रोसेस्ड HTML देखें

मुझे लिटमस के साथ दो मंत्रालय मिले। पहला संपूर्ण रूप से UI की गैर-मान्यता है और समय-समय पर होने वाली ईमेल पूर्वावलोकन लैग्स और आपको पूर्वावलोकन बनाने और परीक्षणों को पुनः आरंभ करने के लिए इंतजार करने में बहुत समय व्यतीत करता है।

दूसरा ऋण: मूल्य। न्यूनतम सदस्यता विकल्प की कीमत आपको $ 80 / महीना होगी। इसके अलावा, चयनित योजना सीधे उन पत्रों के पूर्वावलोकन की संख्या को प्रभावित करती है जो उपलब्ध होंगे। इसलिए मैं आपको ध्यान से सोचने की सलाह देता हूं कि क्या आपको लिटमस की आवश्यकता है या यदि आप एक सस्ता विकल्प के साथ प्राप्त कर सकते हैं।

एसिड न्यूज़लेटर्स पर परीक्षण ईमेल

दूसरी सेवा जिसके बारे में मैं बात करना चाहूंगा, वह है ईमेल ऑन एसिड । इसे लगभग सभी पहलुओं में सुरक्षित रूप से लिटमस का "छोटा भाई" कहा जा सकता है।

अपने लिए न्यायाधीश: समाचार पत्र के संपादन के लिए एक वेब-आइड है, पत्र का विश्लेषण करने के लिए उपकरण हैं, स्पैम के लिए परीक्षण हैं, और, ज़ाहिर है, 70+ अनुप्रयोगों में ईमेल परीक्षण भी हैं।

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

अंतिम महत्वपूर्ण कारक: मूल्य। एसिड पर ईमेल बहुत समान कार्यक्षमता के साथ लिटमस की आधी कीमत है। और आपके पत्र के पूर्वावलोकन की संख्या पर कोई प्रतिबंध नहीं है। ये ईओए की निस्संदेह मदिरा हैं।

क्या चुनना है?

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

यदि आप कभी-कभार मेल करते हैं, तो दो वैकल्पिक विकल्प हैं:

7/14 दिनों के लिए एसिड पर परीक्षण लिटमस / ईमेल का उपयोग करें (सेवा के आधार पर) - पहले महीने का पैसा आपके कार्ड पर वापस आ जाएगा;
कम लोकप्रिय सेवाओं के संयोजन का उपयोग करें जिनकी मुफ्त योजनाएं हैं, और मैन्युअल रूप से ईमेल क्लाइंट का परीक्षण करें।

यहां कुछ सेवाएं दी जा रही हैं, जिनका उपयोग सीमित सीमा तक मुफ्त में किया जा सकता है:

प्रीव्यूमीमेल (क्रोम / एफएफ / आईई, थंडरबर्ड, आईओएस 7 के लिए ऐपल मेल के लिए जीमेल);
इनबॉक्स इंस्पेक्टर (थंडरबर्ड 2/3, आउटलुक 2003/2007/2010 / आउटलुक एक्सप्रेस);
डायरेक्टमेल (आउटलुक 2003, जीई में आईई);
पुत्स्मेल + पाइलटमेलर (किसी भी पते पर एक पत्र कोड भेजने के लिए ऑनलाइन सेवाएं, समाचार पत्र के मैनुअल परीक्षण के लिए उपयोग करने के लिए सुविधाजनक);

लंबे समय में आप जो भी चुनते हैं, मुख्य बात यह है कि उपकरण आपकी आवश्यकताओं को पूरा करता है।

निष्कर्ष

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

यदि आप पत्र शायद ही कभी टाइप करते हैं और वे आम तौर पर सरल होते हैं - बेसिक बॉयलरप्लेट, टाइपसेट और "मैन्युअल रूप से" परीक्षण करने के लिए स्वतंत्र महसूस करें। वैकल्पिक रूप से, परीक्षण के लिए मुफ्त सेवाओं का उपयोग करें।

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

और आप कौन सा रास्ता चुनते हैं? टिप्पणियों में साझा करें।

वितरित करें और जीतें: समाचार पत्र बनाने और परीक्षण करने के लिए उपकरण