📦 🧘🏿 🚧 मेलिंग सूची: लिखित रसोई 🧔🏻 👎🏻 🎒

हर दिन मुझे कई सेवाओं से विभिन्न मेल प्राप्त होते हैं, और मैं स्वभाव से उनकी आलोचना करने में प्रसन्न हूं। लेकिन इस बार मुझे पार्टनर स्टोर्स के विज्ञापन के साथ पेपाल से एक पत्र मिला, जिसने मुझे बहुत आश्चर्यचकित किया। इसने मुझे ऐसे समाचार पत्र को "तैयार" करने और आपके साथ साझा करने के लिए प्रेरित किया।

वितरण योजना

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

आधार

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

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center">  ""</td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center">  </td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table>

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

 <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="0"/></div></td></tr>

यह एक 10 पिक्सेल स्पेसर है जो हमें ब्लॉक के बीच एक आयरन स्पेस देता है। हम छवि के रूप में 10x10 पिक्सेल की पारदर्शी .gif फ़ाइल का उपयोग करते हैं। यदि आप TheBat में सही प्रदर्शन के बारे में बहुत चिंतित हैं, तो .gif फ़ाइल की पृष्ठभूमि उस स्थान की पृष्ठभूमि के रंग से मेल खाना चाहिए जहां वह स्थित है, अन्यथा TheBat! पारदर्शी पिक्सेल काले रंग कर सकते हैं, जो प्रदर्शन के लिए इतना वांछनीय नहीं है।

सेवा ब्लॉक "प्रदर्शन"

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

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

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

हमारे मामले में, यह ब्लॉक बहुत सरल है:

 <span style="font-family:tahoma; font-size:11px; color:#404040;">, %username%.     ,         <a href="%view_in_browser_link%" style="color:#0077c0 !important;" target="_blank"> </a>     . ,   <a href="%mailto_link%" style="color:#0077c0 !important;" target="_balnk">mail@sampleshop.com</a>   ,       .</span>

लिंक के लिए लक्ष्य निर्धारित करना न भूलें, अन्यथा कुछ ईमेल क्लाइंट के पास क्लाइंट विंडो में लिंक को खोलने की क्षमता है, जो असुविधाजनक है।

शेष पत्र

अब हम अगले वॉल्यूम ब्लॉक के बारे में बात करते हैं, जिसे हमने ऊपर दिए गए कोड में "बाकी अक्षर" के रूप में रखा है। इस ब्लॉक में नीचे एक "हेडर", "ग्रीटिंग", "कंटेंट" और 2 सर्विस ब्लॉक हैं। मैं इस भाग के लिए ब्लॉक कोड उद्धृत करता हूं:

 <table align="center" width="600" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td><div style="line-height:0;"><img src="hut.jpg" width="600" height="88" alt="sampleshop.com" title="sampleshop.com"/></div></td></tr> <tr><td> <table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td> <table width="100%" bgcolor="#ffffff" cellpadding="0" cellapscing="0" style="border-collapse:collapse; border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; border-bottom:#e5e5e5 1px solid;"> <tr><td></td></tr> <tr><td height="30"><div style="line-height:0;"><img src="blank.gif" width="30" height="30"/></div></td></tr> <tr><td></td></tr> </table> <table width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td> <td>   ""   "" </td> <td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table> </td> </tr> </table> </td></tr> </table>

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

अभिवादन ब्लॉक

स्वागत ब्लॉक महत्वपूर्ण नहीं है, लेकिन एक अच्छा रूप है। हम CA से मिलान करने के लिए एक चित्र का चयन करते हैं हमारे मामले में, छवि "परिवार" दर्शकों पर केंद्रित है, क्रमशः, हम परिवार के लिए उत्पाद बेचना चाहते हैं, न कि कुछ गीक गैजेट्स या हथियार;)

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="215"><div style="line-height:0;"><img src="family.jpg" width="215" height="130" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">, %username%, [br/][br/] -      .   ,      ![br/][br/] !  %shopname%</span></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> </table>

एक बार फिर मैं उल्लेख करूंगा: कोड में, BR टैग वर्गाकार कोष्ठक में संलग्न हैं क्योंकि हैबरपर्स इन टैग्स को कोड लिस्टिंग में खाता है।

सामग्री ब्लॉक

सामग्री ब्लॉक उसी ध्यान के ताप मानचित्र के अनुसार ध्यान आकर्षित करने की क्लासिक विधि का उपयोग करता है। मानचित्र पहले लेखों में मेरे द्वारा उपयोग किया गया था, लेकिन प्राथमिक स्रोत जैकब नील्सन है , जो SUN माइक्रोसिस्टम्स में एक प्रयोज्य विशेषज्ञ है।

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

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

~~प्राथमिकी पर आह, क्रिसमस पेड़ पर आह, बुराई भेड़ियों पर आह।~~ ~~एक अनावश्यक जीभ ट्विस्टर, ताकि कोड लिस्टिंग तस्वीर के नीचे रेंगना न हो।~~

"अभिवादन" के साथ सादृश्य द्वारा एक ब्लॉक लगाया जाता है, लेकिन फिर भी मैं कोड उद्धृत करता हूं:

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table>

ब्लॉक "सुरक्षा" और "सदस्यता समाप्त करें"

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

और अंत में दर्दनाक के बारे में - एक उत्तर! लेआउट पर दिखाया गया उदाहरण बेहद सफल है। आप उपयोगकर्ता को पत्र प्राप्त करने का कारण बताते हैं, और यह भी निर्दिष्ट करते हैं कि यह किसके लिए संबोधित किया गया था। पेपल के मामले में, तंत्र को बिल्कुल सही तीन गुना किया गया है, मुझे लगता है! जब आप "अनसब्सक्राइब" लिंक पर क्लिक करते हैं, तो आप उस पृष्ठ पर पहुंच जाते हैं, जहां वे पूछते हैं: "क्या आप वास्तव में सदस्यता समाप्त करना चाहते हैं?" "।

मैं अपने आप से एक और विकल्प जोड़ूंगा, जो किसी भी तरह से बेमानी नहीं होगा: उपयोगकर्ता को वह वितरण विकल्प चुनने दें जो वह प्राप्त करना चाहता है। बड़े शुरुआती लोगों को देखते हुए, HTML पत्रों के विरोधी उन्हें भेजने वालों को तुच्छ समझते हैं। व्यक्ति को एक विकल्प दें, और वह शांत हो जाएगा।

और अंत में, सेवा ब्लॉक का लेआउट कोड:

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;"><b> ,       ?</b>[br/] ,      %shopname%,             .         , ,  ,        .        ,      ,      .   ,            ,  ,   .         ,    ,       %shopname%.          .  <a href="#" target="_blank" style="color:#0077c0 !important;"></a>,          .</span></td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center"><span style="font-family:tahoma; font-size:11px; color:#0077c0 !important;"><a href="#" target="_blank" style="color:#0077c0 !important;"> ?</a> | <a href="#" target="_blank" style="color:#0077c0 !important;"></a> | <a href="#" target="_blank" style="color:#0077c0 !important;">  </a> | <a href="#" target="_blank" style="color:#0077c0 !important;"></a></span></td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;">       dudeonthehorse@gmail.com,                %shopname%. [br/]     <a href="#" target="_blank" style="color:#0077c0 !important;">  </a>.</span></td></tr> </table>

नतीजतन, हम प्राप्त करते हैं!

पुनश्च

इसी तरह हम काम करते हैं। ऐसा लगता है कि कोड बहुत है, लेकिन टैब के सही उपयोग के साथ, कोड काफी पठनीय है। यदि आप अधिक नहीं करते हैं / पागल होने की इच्छा नहीं है, तो संपर्क करें। अपने काम में गुड लक!

मेलिंग सूची: लिखित रसोई