1. घर
  2. सवाल और जवाब
  3. एचटीएमएल ईमेल डिजाइन के लिए क्या दिशानिर्देश हैं?

एचटीएमएल ईमेल डिजाइन के लिए क्या दिशानिर्देश हैं?

2008-09-24 12 views
90

कई क्लाइंट और वेब आधारित ईमेल इंटरफेस में अच्छी दृश्य स्थिरता बनाए रखते हुए आप ईमेल में समृद्ध HTML स्वरूपण के लिए क्या दिशानिर्देश दे सकते हैं?एचटीएमएल ईमेल डिजाइन के लिए क्या दिशानिर्देश हैं?

स्टैक ओवरफ़्लो पर एक प्रश्न पर एक असंबंधित जवाब का सुझाव दिया:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

कौन सा निम्नलिखित दिशा-निर्देशों में शामिल हैं: <body> के बजाय <head>
कुछ ईमेल क्लाइंट में

  1. प्लेस स्टाइलशीट सीएसएस को सिर से बाहर निकाल देगा, लेकिन अगर शैली ब्लॉक (अमान्य रूप से) में है तो इसे छोड़ दें ई शरीर
  2. उपयोग इनलाइन शैलियों जहां कभी संभव
    Gmail किसी भी स्टाइलशीट हटेगा, <head> में या <body> में है कि क्या है, लेकिन सम्मान इनलाइन शैलियों style="" विशेषता
  3. टेबल
    ईमेल मानकों के लिए वापसी का उपयोग कर सौंपा वास्तव में माइक्रोसॉफ़्ट वर्ड रेंडरिंग इंजन का उपयोग कर आउटलुक 2007 के लिए धन्यवाद हाल के वर्षों में एक विशाल कदम पीछे ले लिया। स्टाइलशीट के बिना स्थिति के बारे में आपने जो कुछ सीखा है उसे अनदेखा करें।
  4. छवियों पर भरोसा न करें
    अधिकांश ग्राहक और अधिकतर वेब आधारित ईमेल क्लाइंट छवियों को प्रदर्शित नहीं करेंगे जब तक कि उपयोगकर्ता विशेष रूप से उन्हें प्रदर्शित होने का अनुरोध नहीं करता।
    5.

मेरे पास कुछ "पुष्टिकृत" सत्य भी हैं जिन्हें मुझे याद नहीं है कि मैंने उन्हें कहाँ पढ़ा था।

  1. तालिकाओं में घोंसले से अधिक दो स्तरों का उपयोग न करें
    क्या यह सच है। अगर ऐसा होता तो क्या होने की संभावना है? क्या कोई विशेष ग्राहक/ग्राहक इस पर चिल्ला रहा है?
  2. कोशिकाओं/टेबल
    में घोंसले पृष्ठभूमि छवियों से सावधान रहें मैं समझता हूँ के रूप में आप जहां पृष्ठभूमि छवि उतरते तालिका/सेल में पूरी तरह से नए सिरे से लागू किया जाता है, और सिर्फ नहीं "के माध्यम से चमक रहा है" स्थितियों का सामना कर सकते। फिर, सच है या नहीं? कौन से ग्राहक?

मैं इस सूची को अधिक दिशानिर्देशों और खाइयों से अनुभवों के साथ बाहर करना चाहता हूं।

क्या आप कोई और सुझाव दे सकते हैं?

अद्यतन: मैं specifially HTML में डिजाइन हिस्सा और की वहाँ स्थिरता के लिए दिशा निर्देशों के लिए पूछ रहा हूँ। avoiding spam filters के लिए सामान्य दिशानिर्देशों के बारे में प्रश्न, और common courtesy पहले से ही SO पर हैं।

स्रोत

2008-09-24 kaa

+0

यहाँ एक [संसाधनों की बड़ी सूची] (http है।कॉम/प्रश्न/2229822/एचटीएमएल-ईमेल-सर्वोत्तम-प्रथाओं-विचार-और-कैसे-लिखने-कोड-के-आउट-आउटलुक-जीएमए/21437734 # 21437734) [बहुत समान प्रश्न] पर (http: // stackoverflow। com/प्रश्न/2229822/html-ईमेल-best-practices-विचार और कैसे करने के लिए लिखने-कोड के लिए दृष्टिकोण-GMA /)। – John

उत्तर

12

हमेशा मल्टीपार्ट माइम का उपयोग करें और एक सादा पाठ विकल्प प्रदान करें।

स्रोत

2008-09-24 14:25:40 JeeBee

1
  • पृष्ठभूमि छवियां विश्वसनीय नहीं हैं।
  • प्रैक्टिकल रूप से नो-ब्रेनर, लेकिन कोई जावास्क्रिप्ट नहीं।
  • एक संपादक का उपयोग करें जो आपको वर्तमान फ़ाइल/बफर को ईमेल के रूप में भेजने देता है, या कम से कम, एक प्रोग्राम ढूंढें जो आपको एक फ़ाइल की सामग्री को HTML ईमेल के रूप में भेजने देगा। एचटीएमएल की प्रतिलिपि बनाकर अपने ईमेल का परीक्षण न करें, और इसे (या उस मामले के लिए कोई अन्य मेल प्रोग्राम) में चिपकाएं।

स्रोत

2008-09-24 14:31:35

53

यह वास्तव में है वास्तव में एक सभ्य HTML ईमेल बनाने के लिए, यदि आप इसे एक 'आधुनिक HTML और सीएसएस' नजरिए से दृष्टिकोण कठिन।

सबसे अच्छा परिणाम के लिए, कल्पना यह 1999.

  • है लेआउट के लिए टेबल पर वापस जाएँ (या अधिमानतः - किसी भी जटिल लेआउट का प्रयास नहीं करते)
  • पृष्ठभूमि छवियों का डर हो सकता है (वे आउटलुक 2007 में तोड़ने और जीमेल)।
  • स्टाइल-टैग-इन-द-बॉडी चीज इसलिए है क्योंकि हॉटमेल इसे इस तरह स्वीकार करता था - मुझे पूरा यकीन है कि वे इसे अभी बाहर निकाल देते हैं। यदि आपको सीएसएस का उपयोग करना चाहिए तो style विशेषता के साथ इनलाइन शैलियों का उपयोग करें।
  • भूल जाओ पूरी तरह से के बारे में float
  • याद रखें अपनी छवियों को शायद अवरुद्ध हो जाएगा - उपयोग पृष्ठभूमि और पाठ रंग अपने लाभ के लिए - सुनिश्चित करें कि अक्षम
  • लिंक के साथ बहुत सावधान रहना छवियों के साथ कुछ पठनीय पाठ नहीं है, विशेष रूप से सावधान रहना कुछ भी जो लिंक टेक्स्ट में यूआरएल की तरह दिखता है - आप क्रोध 'फ़िशिंग' फ़िल्टर करेंगे (उदाहरण के लिए <a href="http://domain.tld">www.someotherdomain.tld</a>खराब)
  • याद रखें कि वेबमेल क्लाइंट पर "गुना" पृष्ठ पर बहुत अधिक होता है (1024x768 पर स्क्रीन, अधिकांश इंटरफेस सौ पिक्सेल से अधिक नहीं दिखाएंगे) - अपनी पहचान सामग्री को शीर्ष पर दाईं ओर प्राप्त करें ताकि टी वह प्राप्तकर्ता जानता है कि आप कौन हैं।
  • दृष्टिकोण के हालिया संस्करण में "पोर्ट्रेट" पूर्वावलोकन फलक है जो अपेक्षाकृत कमजोर है - निश्चित रूप से सावधानीपूर्वक चौड़ाई वाले लेआउट से सावधान रहें, अगर आपको उनका उपयोग करना चाहिए, तो आप जितना कर सकते हैं उतना संकीर्ण बना सकते हैं।
  • फ़्लैश, जावास्क्रिप्ट, एसवीजी, कैनवास, या उसके बारे में कुछ भी नहीं सोचें।
  • टेस्ट, बहुत कुछ। सुनिश्चित करें कि आप हालिया आउटलुक में परीक्षण करते हैं (चीजें बहुत बदल गई हैं! अब यह वर्ड का उपयोग एचटीएमएल रेंडरिंग इंजन के रूप में करती है, और यह अपंग है: Word 2007 HTML/CSS support)। जीमेल भी बहुत मुश्किल है। आश्चर्यजनक रूप से याहू का वेबमेल बहुत अच्छा है, अच्छा सीएसएस समर्थन के साथ। ;

गुड लक)

अद्यतन आगे सवालों के जवाब देने:

तालिकाओं में घोंसले से अधिक दो स्तरों का उपयोग न करें

मेरा मानना ​​है कि यह एक बड़ी है कमल नोट्स से संबंधित दिशानिर्देश। नेस्टेड टेबल ठीक होना चाहिए, लेकिन वास्तव में, यदि आपके पास ऐसा लेआउट है जो उन्हें आवश्यकतानुसार जटिल है, तो आपको शायद परेशानी होगी।अपना लेआउट सरल रखें।

कोशिकाओं/टेबल

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

स्रोत

2008-09-24 14:39:01 Dan

+2

क्यों HTML ईमेल समर्थन इतना विकसित नहीं हुआ है? हमें इन सभी बुरे प्रथाओं को क्यों लागू करना जारी रखना चाहिए, जैसे कि हम 1 999 में वापस आए थे? – smonff

+0

bgimages http://stackoverflow.com/a/17358553/413032 का समर्थन करने के लिए कामकाज है। एक एमएस-शब्द एचटीएमएल को बदलना। @ Smonff मैं पूरी तरह से आपसे सहमत हूं। ........ एमएस-वर्ड द्वारा प्रस्तुत एक एचटीएमएल क्यों! –

+1

चेक [ईमेल कोडिंग 101] (https://litmus.com/blog/html-email-coding-101-infographic/email-coding-101) litmus से, आशा मदद करता है। – stom

9

अभियान मॉनिटर के पीछे लोगों ने भी अच्छी जानकारी के साथ Email Standards Project वेबसाइट शुरू की।

स्रोत

2008-09-24 14:42:35

2

मुझे लगता है कि यह पूछे जाने वाले प्रश्न से कम स्तर है, लेकिन यदि आप वास्तव में जितना संभव हो उतने ग्राहकों द्वारा एक HTML ईमेल को सही ढंग से देखना चाहते हैं, तो सुनिश्चित करें कि यह वैध MIME का उपयोग कर रहा है।

MIME-Version: 
Content-Type:

बहुत सख्त ग्राहकों कच्चे पाठ एक अगर के रूप में अपने HTML प्रदर्शित करेगा: विशेष रूप से, एक ई-मेल के लिए मान्य माइम के रूप में विचार किया जाना, हेडर (शब्द के आरएफसी अर्थ में) होना चाहिए इन हेडर की दोनों हो सकते हैं या इनमें से अन्य गायब है। आप आश्चर्यचकित होंगे कि कितने बड़े ऑनलाइन विक्रेता जिन्हें बेहतर तरीके से पता होना चाहिए, ने इसे खराब कर दिया है (विशेष रूप से, मुझे HTML ईमेल w/अनुपलब्ध MIME-Version प्राप्त हुआ है: अमेज़ॅन के शीर्षलेख और अतीत में एसीएम)

स्रोत

2008-09-24 15:02:42 jj33

1

तीन शब्द सलाह: परीक्षण, परीक्षण, परीक्षण।

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

,, (लोटस नोट्स से पहले 8.0 सच में, सच HTML मेल के लिए, बदबू आ रही है जिस तरह से)

इसके अलावा बस इनलाइन सीएसएस शैलियों से परे मैं टैग करने के लिए स्विच करने की अनुशंसा जहां भी संभव हो।

स्रोत

2009-02-19 16:45:51 Eli

0

यदि आप स्टाइल ब्लॉक समेत हैं तो ".classname" या "।" के साथ कोई नई लाइन शुरू न करें। कुछ भी। अवधि से पहले एक ब्रेस या कुछ रखो। यदि आप ऐसा नहीं करते हैं तो कुछ वेब मेल सिस्टम आपकी स्टाइल शीट को सही तरीके से प्रदर्शित नहीं करेंगे।

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

स्रोत

2009-06-19 16:13:38 Einstein

1

अपनी छवियों को एम्बेड करें, उनसे लिंक न करें।

यह बुरा है:

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

यह अच्छा है:

<img src=cid:myImage/>

हाँ, यह अजीब लग रहा है, लेकिन इस guide regarding embedding images in emails की जाँच करें।

स्रोत

2010-11-25 15:08:20

संबंधित मुद्दे
नवीनतम प्रश्न

 संबंधित मुद्दे