क्या मुझे HTML ईमेल कोडिंग करते समय स्पेसर छवियों का उपयोग करने की आवश्यकता है?

Question

मैं समझता हूं कि HTML ईमेल को वास्तव में पुराने स्कूल लेआउट का उपयोग करने की आवश्यकता है - SO पर कई अन्य उत्तरों के अनुसार (उदा। HTML email: tables or divs?, HTML Email using CSS)।

हालांकि, कुछ बहस हो रही है कि ईमेल में स्पेसर gifs का उपयोग करना अभी भी एक अच्छा विचार है या नहीं।

DIMENSIONS:

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"></td> 
    </tr> 
</table> 

स्पेसर GIF के साथ

:

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

स्पेसर GIF के साथ

और DIMENSIONS:

<table cellpadding="0" cellspacing="0" border="0" width="100"> 
    <tr> 
    <td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td> 
    </tr> 
</table> 

कैसे

उदाहरण के लिए, इन तीन लेआउट तुलना क्या मैं उन्हें आयामों के साथ? क्या कोई ईमेल क्लाइंट है जो अभी भी स्पेसर gifs की आवश्यकता है? क्या कोई नुकसान किसी भी तरह से किया गया है?

Answer 1

व्यक्तिगत रूप से, मैं कभी नहीं स्पेसर gif, उपयोग करें, क्योंकि वे लेआउट जब छवि अवरोधन बंद कर दिया है, तीन कारणों से नष्ट:

1. वे सब पर प्रस्तुत करना नहीं है, तो किसी भी लेआउट कि स्पेसर छवि की आवश्यकता है खो गया।
2. यदि वे गलत तरीके से प्रस्तुत करते हैं (जैसे कि उनके मूल आकार में, या आनुपातिक रूप से उनके मूल आकार में) वे लेआउट तोड़ते हैं।
3. भले ही वे ठीक से प्रस्तुत करते हैं और लेआउट काम करता है, तब भी छवि छवियों को प्रदर्शित किया जाता है जब छवि अवरोधन ईमेल के संदेश से विचलित हो जाता है।

आसपास समस्या # 2 पाने के लिए, आप प्रत्येक छवि को अपने वास्तविक आयामों से सहेज सकते हैं। बहरहाल, यह स्पष्ट रूप से बढ़ जाती है:

• का निर्माण करने के
• चित्रों की संख्या समय ग्राहक

से डाउनलोड किया जा करने के लिए और यह मुद्दों # 1 समाधान नहीं करता है और # 3।

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

तो जब तक आप किसी रिक्त कक्ष पर पिक्सेल चौड़ाई को परिभाषित कर रहे हों तो आप ठीक हैं।सवाल में उदाहरण के लिए वापस जाने के लिए:

• आयाम-केवल - काम करता है केवल जब छवि अवरुद्ध
बंद कर दिया है - के साथ और केवल
• स्पेसर छवियों सभी प्रमुख ईमेल क्लाइंट में छवि को अवरुद्ध करने के बिना काम करता
• आयाम और स्पेसर छवियों - केवल काम करता है जब छवि अवरुद्ध

इस वजह से

, आयाम तथा न स्पेसर gifs का उपयोग करना चाहिए बंद कर दिया है।

विभिन्न लेख

• http://www.banane.com/workblog/?p=61
• http://www.campaignmonitor.com/design-guidelines/

Answer 2

आप निश्चित रूप से स्पेसर gifs का उपयोग कर से बचने कर सकते (पृष्ठों पर 'स्पेसर छवियों' के लिए खोज) के रूप में अच्छी तरह से इस सवाल के बारे में बात करते हैं।

मुझे लगता है कि निम्नलिखित कोड सभी ग्राहकों में काम करता है। मैं आमतौर पर या तो इन खाली कोशिकाओं की चौड़ाई या ऊंचाई निर्दिष्ट करता हूं।

<tr> 
<td style="line-height: 0; font-size: 0;" height="10">&nbsp;</td> 
</tr> 

Answer 3

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

इस प्रारूप अपने खाली स्पेसर सेल इस तरह से भरपाई करने के लिए:

<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")>&nbsp;</td> 

Answer 4

आप अपनी कोशिकाओं से अधिक 19px (आउटलुक के मिनट डिफ़ॉल्ट ऊंचाई) रखने के हैं, तो आप line-height उपयोग करने की आवश्यकता कभी नहीं, और एक सरल <td height="20">&nbsp;</td> महान काम करता है। उदाहरण:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td height="20"> 
     &nbsp; 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     bottom 
    </td> 
    </tr> 
</table> 

लेकिन, लंबवत स्पेसिंग के लिए, ज्यादातर मामलों में आप शायद कर रही से बचने और ऊपर या नीचे पंक्ति में गद्दी जोड़ सकते हैं:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center" style="padding-top:20px;"> 
     bottom 
    </td> 
    </tr> 
</table> 

या इस तरह, गद्दी के बिना:

<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"> 
    <tr> 
    <td align="center"> 
     top 
    </td> 
    <tr> 
    </tr> 
    <td align="center"> 
     &nbsp;<br> 
     bottom 
    </td> 
    </tr> 
</table> 

अंतिम उदाहरण पर ध्यान दें कि मैंने के बजाय &nbsp;<br> का उपयोग किया था। ऐसा इसलिए है क्योंकि Outlook किसी भी पंक्ति या सेल को ध्वस्त कर देगा जिसमें इसमें कोई सामग्री नहीं है। यही कारण है कि मूल उदाहरण में स्पेसर सेल में   भी है। आप नीचे कई पंक्तियों या गद्दी जोड़ने के लिए थे, तो यह इस प्रकार दिखाई देगा:

<td align="center"> 
    &nbsp;<br> 
    &nbsp;<br> 
    &nbsp;<br> 
    bottom 
    <br>&nbsp; 
    <br>&nbsp; 
    <br>&nbsp; 
</td> 

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