मेलिंग सूचियों का लेआउट

हेलो, हेब्र!

इस लेख में, मैं अपने ज्ञान को मेलिंग सूचियों के क्रॉस-ब्राउज़र और क्रॉस-मेल लेआउट में साझा करना चाहूंगा। क्रॉस-ब्रोकर शब्द का अर्थ है - सभी ईमेल क्लाइंट में लेआउट का सही प्रदर्शन। मेरा मानना ​​है कि लेख काफी प्रासंगिक है, इस तथ्य को देखते हुए कि यह विषय हब पर कई बार कवर किया गया था, लेकिन कुछ बारीकियां गलत थीं, जबकि अन्य बस पुराने थे। सेवा के परिणामस्वरूप, लंबे समय से मैं दुनिया भर में HTML डाक के लेआउट में लगा हुआ था, और निम्नलिखित नियम निम्नलिखित ईमेल क्लाइंट और वेब इंटरफेस पर लागू होंगे: MS Outlook 2003-2010, mail.ru, rabmler mail, Yandan mail, Gmail, Yahoo! मेल (क्लासिक), थंडरबर्ड 2.0-3.0, हॉटमेल, विंडोज लाइव मेल, ऐप्पल मेल 3-4, एओएल मेल, लोटस नोट्स 8-10.5।

आधार

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

<style> *{ padding:0; margin:0; } </style> 

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

इंडेंटेशन का क्या करें

एक अप्रिय तस्वीर उभर रही है - हम सभी इंडेंट को रीसेट कर रहे हैं। आगे क्या करना है? यहाँ blank.gif हमारी सहायता के लिए आता है - वही एकल-पिक्सेल पारदर्शी .gif, जिसके लिए हम अपने लेआउट का निर्माण करेंगे। इस छोटे, साथ ही तालिकाओं और फिर से तालिकाओं को फिराना होगा। निम्नलिखित पैराग्राफ और सूचियों में दो-स्तंभ लेआउट का एक उदाहरण है।

 <table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;"> <tr> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!--       --> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!--       --> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!--       --> </tr> </table> 

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

पाठ स्वरूपण

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

हाइपरलिंक

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

 <span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span> 

सभी लिंक के लिए, लक्ष्य विशेषता का _blank मान सेट करें, हम मेलर विंडो में पृष्ठ नहीं खोलना चाहते हैं? यह हर जगह नहीं देखा जाता है, लेकिन इसे सुरक्षित रूप से खेलना बेहतर है।

छवि

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

पृष्ठभूमि

रंग के रूप में पृष्ठभूमि को दस्तावेज़ के शरीर के लिए निर्दिष्ट किया जा सकता है, तालिका और इसकी कोशिकाओं को प्रारूप में #xxxxxx या वास्तव में, उदाहरण के लिए, लाल । इसका कारण ऊपर बताया गया है। चित्रों के रूप में पृष्ठभूमि एक वर्जित है। लोहा नहीं, ज़ाहिर है, लेकिन फिर भी मैं मना करने की सलाह देता हूं। अधिकांश क्लाइंट और इंटरफ़ेस बस इसका समर्थन नहीं करते हैं। यही बात किसी चीज़ की पूर्ण स्थिति पर भी लागू होती है, साथ ही लिपियों में भी - इसके बारे में भूल जाते हैं।

परिणाम

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

UPD: इस टिप्पणी का खंडन करने के लिए , मैं अपनी अगली पोस्ट पढ़ने की सलाह देता हूं।