♂️ 👐 😹 न्यूज़लेटर्स का लेआउट - हमारे पास क्या है? 🔳 ⬛️ ♍️

शुभ दिन

छवि को Dribbble.com से ईमानदारी से उधार लिया गया है

मेरे पहले विषय के प्रकाशन के बाद से दो साल से भी कम समय बीत चुका है। इस दौरान क्या हुआ? Mail.ru, Rambler, Yahoo और Yandex ने मिलकर अपने मेल इंटरफेस को फावड़ा दिया, और परिणामस्वरूप - पत्रों के पार्सर, जो सुखद भावनाओं को लाए, क्योंकि कई बुरा कीड़े तय हो गए हैं। जीमेल ने पृष्ठभूमि छवियों का समर्थन करना शुरू किया। खैर, मोबाइल प्लेटफ़ॉर्म बाज़ार के विकास के लिए धन्यवाद, मीडिया क्वेरीज़ हमारी सहायता के लिए आती हैं।

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

और हाँ, पोस्ट में लगभग कोई चित्र नहीं हैं। तस्वीरों के लिए, मैं css3 सुविधाओं की समीक्षा के लिए कहता हूं।

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

- एमएस आउटलुक के सभी संस्करण
- Mail.ru
- रैम्बलर मेल (नए इंटरफ़ेस में बग्स को बाहर नहीं रखा गया है)
- यांडेक्स मेल
- जीमेल
- याहू!
- संस्करण 2.0 के बाद से थंडरबर्ड
- हॉटमेल
- विंडोज लाइव मेल
- ऐप्पल मेल तीसरे संस्करण से शुरू हो रहा है
- एओएल मेल
- लोटस नोट्स 8-8.5।
- बब! सावधानीपूर्वक परीक्षण नहीं किया गया है, लेकिन कोई शिकायत भी नहीं है

आवरण (पत्र आवरण)

<table width="600" align="center" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> //  </td> </tr> </table>

तालिका के लिए एक निश्चित चौड़ाई सेट करते समय, आवश्यक संरेखण के लिए संरेखित विशेषता का उपयोग करें। कोई मार्जिन नहीं: ऑटो; पास नहीं होगा।

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

एक ग्राफिक पृष्ठभूमि पर, मैं अभी भी अत्यधिक स्कोरिंग की सलाह देता हूं। आखिरकार, आप हमेशा इसी तरह से एक पत्र लेआउट को आकर्षित कर सकते हैं जैसे कि संबंधित तालिका सेल में img टैग को सम्मिलित करके सुंदर तत्वों को पूरा करना।

आउटलुक एक्सप्रेस में कोशिकाओं के बीच रिक्त स्थान का उपचार करें, इसलिए हम लेआउट में सभी तालिकाओं के लिए इस मान को निर्दिष्ट करते हैं।

इंडेंट

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

cellspacing

यह यांडेक्स मेल और थंडरबर्ड में बेहद अनाड़ी काम करता है। अन्य ग्राहकों ने भी जांच नहीं की। इस विशेषता को हमेशा शून्य पर सेट करें।

Cellpadding

यहाँ वह है - लेआउट डिजाइनर का सबसे अच्छा दोस्त। हर जगह घड़ी की तरह काम करता है!

स्पेसर

यदि सेलपैडिंग कार्यान्वयन के लिए पर्याप्त नहीं है और तालिका अधिक जटिल है, तो स्पेसर बचाव के लिए आते हैं। ऐसा करने के लिए, पारदर्शी 10 x 10 पिक्सेल gif लें। यद्यपि आप बबट के पुराने संस्करणों के बारे में चिंतित हैं!, स्पेसर का रंग उसके स्थान की पृष्ठभूमि के रंग से मेल खाना चाहिए, क्योंकि बबट! पारदर्शी पिक्सेल को काले रंग से रंग सकते हैं।

एक किंवदंती है कि स्पैम फिल्टर एकल-पिक्सेल छवियों के लिए अच्छी तरह से प्रतिक्रिया नहीं देते हैं, इसलिए मैंने अंधविश्वास को 10x10 पर रोक दिया। सम्मिलित स्पैकर्स के लिए, आपको एक खाली ऑल्ट विशेषता निर्दिष्ट करने की आवश्यकता है, अन्यथा फ़ाइल का नाम एक छोटी अनलोड छवि में चमक जाएगा, जो लेआउट को बर्बाद कर सकता है।

मैं spacers के साथ और बिना काम करने वाले कोड का एक उदाहरण दूंगा।

 <table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cc 1px solid;"> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> </table>

इस मामले में, हमें चित्रों के बीच 20px और चरम छवियों और तालिका की बाहरी दीवारों के बीच 10px का अंतर मिलता है।

लेकिन क्या होगा यदि हमें कोशिकाओं और सीमाओं के बीच 10px इंडेंट की आवश्यकता हो? इस कार्य के साथ क्लासिक HTML में सेलस्पेसिंग, लेकिन यह वहां नहीं था। मैं छाती में एक एड़ी के साथ नहीं मारूंगा, यह साबित करते हुए कि विशेष रूप से इस मामले में कीड़े होंगे, लेकिन वे समान रूप से देखे गए थे और इसलिए मैं निम्नलिखित समाधान का प्रस्ताव करता हूं।

 <table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> </tr> </table>

छवि

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

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

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

एक और बात है। यदि चित्र टेबल सेल के अंदर स्थित है, तो यह कई पिक्सेल का निचला इंडेंट दिखाई दे सकता है। इसका इलाज दो तरीकों से किया जाता है:

- ब्लॉक में रैप इमेज
- मूल्य प्रदर्शन के साथ चित्र के लिए शैली विशेषता सेट करें: ब्लॉक;

यह बैसाखी छवि को एक ब्लॉक तत्व बनाती है। इसे माइनस के रूप में माना जा सकता है। लेकिन मेरे व्यवहार में, यह बग़ल में नहीं खड़ा था। कभी-कभी यह मांगपत्र हस्तक्षेप नहीं करता है।

सैद्धांतिक रूप से, एक चित्र के लिए ब्लॉक रैपर को शून्य रेखा-ऊंचाई के साथ एक स्पैन से बदला जा सकता है, लेकिन अभी तक इसका परीक्षण नहीं किया गया है।

स्वरूपण

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

पिक्सेल-दूरी पैराग्राफ

 <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> </td> </tr> <tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> </table>

पैराग्राफ लाइन-ऊंचाई पर फैले हुए हैं

 <span style="line-height:1.5em;">   <br><br>   <br><br>   </span>

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

फ़ॉन्ट, आकार और रंग

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

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

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

वास्तव में यही सब है। मैं केवल सीएसएस में नौकरी के लिए पूर्ण हेक्साडेसिमल रंग प्रारूप के संकेत को याद करूंगा। यद्यपि आप इसके प्रत्यक्ष नाम से प्राप्त कर सकते हैं, उदाहरण के लिए काला।

संदर्भ

संक्षेप में और बस।

- हमने मेलबॉक्स के अलावा सभी लिंक के लिए मान _blank के साथ लक्ष्य विशेषता निर्धारित की है : (उनके लिए महत्वपूर्ण नहीं)।
- लिंक छवियों के लिए शून्य सीमा
- महत्वपूर्ण निर्दिष्ट करें! होवर और सक्रिय रंग परिवर्तन से बचने के लिए लिंक के लिए रंग (Yandex मेल यह करता है, कम से कम)

मोबाइल प्लेटफॉर्म

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

क्या पढ़ना है?

न्यूज़लेटर्स का लेआउट - हमारे पास क्या है?