पेशेवर टाइपसेटिंग ईमेल की मूल बातें

यह कोई रहस्य नहीं है कि ई-मेल मार्केटिंग अभी दुनिया भर में गति पकड़ रही है। और रूस के लिए, यह बाजार में एक पूरी तरह से युवा आला भी है। और ईमेल का पेशेवर लेआउट सफलता के घटकों में से एक है। व्यावसायिक लेआउट का मतलब न केवल एक नेत्रहीन सुंदर और विश्वसनीय लेआउट है, बल्कि यह भी कि पोस्टकार्ड की उपयोगिता मार्केटिंग के दृष्टिकोण से कैसे दिखती है, कैसे स्पैम फिल्टर के लिए टाइपोग्राफी के साथ ग्राफिक्स को अनुकूलित किया जाता है, और बहुत कुछ। ईमेल का लेआउट एक व्यापक विषय है, सब कुछ एक लेख में फिट नहीं किया जा सकता है, इसलिए इस पोस्ट में मैं केवल उन मूल तत्वों और तकनीकों का वर्णन करने की कोशिश करूंगा, जिन्हें दुनिया भर में अभ्यास के वर्षों में मज़बूती से परीक्षण किया गया है और दुनिया में सबसे अधिक उपयोग किए जाने वाले ईमेल क्लाइंट में काम करते हैं: iPhone 4S / 5; आउटलुक 07/10/13; आईपैड; Apple मेल Android 2.3 / 4.0 याहू; जीमेल। यदि हम केवल रूसी बाजार पर विचार करते हैं, तो कोई भी मदद नहीं कर सकता लेकिन Mail.ru और Yandex.Mail का उल्लेख कर सकता है।

शुरुआत में आपको क्या जानने की जरूरत है?

तुरंत मैं मुख्य और महत्वपूर्ण बिंदुओं में से कई पर प्रकाश डालना चाहता हूं:

1. हमारे शस्त्रागार में सीएसएस गुणों का एक बहुत छोटा सेट है जो सभी मेलर्स द्वारा समर्थित है। उसी समय, शैलियों को इनलाइन लिखा जाना चाहिए, और सिर में केवल विक्रेता के गुण और वे विज्ञापन इकाइयाँ जो पत्र के मुख्य शैलीकरण को नहीं लेती हैं, उन्हें प्रदर्शित किया जाना चाहिए। खैर, सिर में लिंक का उपयोग करना बेहद अवांछनीय है।
2. मुख्य दृश्य डिजाइन तत्वों में पृष्ठभूमि-छवि का उपयोग न करें और छवियों में महत्वपूर्ण पाठ्य सूचना न डालें। सामान्य तौर पर, किसी को हमेशा इस तरह के विकल्प पर विचार करना चाहिए कि पत्र को एकल छवि के बिना प्राप्तकर्ता द्वारा देखा जाएगा।

ढांचा

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

एक उदाहरण के रूप में, निम्नलिखित से सबसे महत्वपूर्ण तत्वों पर विचार करें, न कि जटिल टेम्पलेट:


यहाँ मार्कअप को इस प्रकार दर्शाया जा सकता है:

<table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> <!--header line statrs--> <tr> <td><img ... /></td> <td><img ... /></td> <td><img ... /></td> </tr> <!--header line end--> <!--content statrs--> <tr> <td colspan="3" align="center"> <table width="540" cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #000; border-collapse: collapse;"> <tr> <td>content</td> </tr> </table> </td> </tr> <!--content end--> </table> <!--footer img starts--> <table width="660" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> <tr> <td><img ... /></td> </tr> </table> <!--footer img end--> </td> </tr> </table> 

यहाँ क्या महत्वपूर्ण है?

1. हमेशा "शून्य" टेबल जो कि आपके द्वारा चौड़ाई में निर्दिष्ट मूल्य के बारे में सुनिश्चित हो:
   

    <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> 

2. तत्वों का संरेखण एक तरीके से किया जाता है:
   

    <td align="center"> style="text-align: center;"   <center></center> 

3. यदि आप आगे के अक्षरों के साथ टेम्पलेट की दृश्य अखंडता को संरक्षित करना चाहते हैं, तो मध्यवर्ती कोशिकाओं को खाली न छोड़ें और nbsp प्रतीक के साथ भरें। बेहतर उन्हें एक पारदर्शी .gif छवि के साथ भरें (नीचे उदाहरण देखें)।

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

  <tr> <td height="10"> <div style="margin: 0; padding: 0; line-height: 0;"> <img src="...indent.gif" border="0" width="1" height="1" style="display: block;" alt="" /> </div> </td> </tr> 

जहाँ तालिका तालिका के लिए ऊँचाई मान के साथ ऊँचाई बदलती है। पारदर्शी .gif का उपयोग सेल भरण के रूप में किया जाता है। इसका वास्तविक आकार 1x1px नहीं होना चाहिए, यह थोड़ा अधिक करना बेहतर है (उदाहरण के लिए 20x20px) और संपत्तियों के वजन या ऊंचाई का उपयोग करके संपीड़ित करें। इस प्रकार, आपको अपलोड किए गए चित्रों के बिना एक पत्र को देखने पर एक दृश्य दोष से छुटकारा मिलेगा और अपने आप को जंक बॉक्स में एक पत्र प्राप्त करने से बचाएगा। सेलपैडिंग और सेलस्पेसिंग टेबल की विशेषताओं के बारे में मत भूलना। वे हर जगह महान काम करते हैं, लेकिन उनकी मदद के साथ मिलना हमेशा संभव नहीं होता है।

पाठ डिजाइन

यहां चीजें कमोबेश अच्छी हैं। विनिर्देशन 2.1 से लगभग सभी सीएसएस गुण समर्थित हैं।

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

    div, p, span, strong, b, em, i, a, li, td { -webkit-text-size-adjust: none; } 

3. एक लिंक को पार करने के लिए, निम्नलिखित निर्माण की आवश्यकता है:
   

    <a href="#" target="_blank" style="color: #267f00 !important; text-decoration: underline;"><span style="color: #267f00;">link</span></a> 

   
   स्पैन में लिंक को फिर से लपेटना और रंग सेट करना आउटलुक के लिए आवश्यक है, क्योंकि वह प्राथमिकता को नहीं समझता ! महत्वपूर्ण है , और इसके बिना Yandex.Mail होवर इवेंट के दौरान आपके लिंक को लाल रंग में दोहराएगा ।
   लक्ष्य = "_ रिक्त" विशेषता केवल तभी आवश्यक है जब आपके पत्र में पत्र के वेब संस्करण का लिंक हो ताकि इस संस्करण में लिंक नए टैब में खुले। और इसलिए, सभी ईमेल क्लाइंट अपने दम पर ऐसा करते हैं।
4. यदि आप हर जगह काम करने के लिए लाइन-ऊंचाई चाहते हैं, तो इसे केवल ब्लॉक तत्वों ( td, div, p, li ) के लिए निर्दिष्ट करें।

छवि

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

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

 <div style="margin: 0; padding: 0; line-height: 15px;"> <img src="..." border="0" width="600" height="15" style="display: block;" alt="" /> </div> 

अक्षरों में गोल कोनों

सीमा-त्रिज्या वर्तमान में सबसे लोकप्रिय ईमेल क्लाइंट का समर्थन करता है, लेकिन एमएस आउटलुक 07/10/13 का नहीं, जिसके उपयोग का हिस्सा ~ 18% है। आप अक्षरों में गोल कोनों को कैसे बना सकते हैं, इसके बारे में, आप लेआउट के कार्यान्वयन का एक एकल उदाहरण दे सकते हैं। मैं उपरोक्त लेआउट में उपयोग किए गए विकल्प को दिखाऊंगा:

  <tr> <td align="left" valign="top" style="background-color: #0BB40B;"> <img src="round_l.png" /></td> <td style="background-color: #0BB40B;"> <img ... /></td> <td align="right" valign="top" style="background-color: #0BB40B;"> <img src="round_r.png" /></td> </tr> 

गोलाई के लिए छवियों के रूप में, मैंने पारदर्शिता के साथ दो छवियों का उपयोग किया, जिन्हें मैंने साइड कोशिकाओं में रखा।



यह विधि अच्छी है क्योंकि भविष्य में, यदि आप पृष्ठभूमि का रंग बदलने का निर्णय लेते हैं, तो आपको बस पृष्ठभूमि-रंग के मूल्य को बदलने की आवश्यकता है। नुकसान यह है कि मूल ब्लॉक की पृष्ठभूमि का रंग छवि में निर्दिष्ट रंग से मेल खाना चाहिए (मेरे मामले में यह सफेद है)।

आखिर में आपको क्या जानने की जरूरत है?

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

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

• अक्षरों में चित्रों और पाठ का अनुपात 30/70% होना चाहिए
• बहुत उज्ज्वल रंगों में पाठ को उजागर न करें (# ff0000, # 4CFF00, आदि)। यह ध्यान देने योग्य नहीं है कि पृष्ठभूमि के करीब फ़ॉन्ट रंग सेट करना एक हैकनीड और लंबे समय तक काम करने वाली चाल है।
• ऊपरी मामले में लिखे गए बहुत अधिक पाठ (खाते में पाठ-परिवर्तन: अपरकेस; ) या एक पंक्ति में कई विस्मयादिबोधक बिंदु दोहराए जाने से भी स्पैम की संभावना बढ़ जाती है।
• बड़े प्रिंट में बहुत सारा टेक्स्ट न लिखें। अनुशंसित फ़ॉन्ट-आकार 12pt = 16px से अधिक नहीं और 7pt = 11px से कम नहीं
• और हां, किसी ने भी अभी तक मान्य HTML / CSS को रद्द नहीं किया है।

अंत में, मैं एक बार फिर ध्यान देना चाहता हूं कि ईमेल का एक अच्छा लेआउट आपके विपणन में एक महत्वपूर्ण लाभ देता है। स्वच्छ और आकर्षक पोस्टकार्ड बनाएं। आपका ध्यान के लिए धन्यवाद!