HTML ईमेल डिजाइन के लिए क्या दिशा निर्देश हैं? [बन्द है]


101

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

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

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

जिसमें निम्नलिखित दिशानिर्देश शामिल हैं:

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

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

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

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

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

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


जवाबों:


63

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

सर्वोत्तम परिणामों के लिए, कल्पना कीजिए कि यह 1999 है।

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

सौभाग्य ;)

आगे के सवालों के जवाब देने के लिए अपडेट करें:

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

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

कोशिकाओं / तालिकाओं में पृष्ठभूमि चित्रों के घोंसले से सावधान रहें

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


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

Bgimages stackoverflow.com/a/17358553/413032 का समर्थन करने के लिए समाधान है । एक एमएस-वर्ड html को वैकल्पिक करना। @ smonff मैं आपसे पूरी तरह सहमत हूं। ........ क्यों एमएस-वर्ड द्वारा HTML का प्रतिपादन किया गया!
दावुत गुरबज़

1
चेक ईमेल कोडिंग 101 लिटमस से, आशा है कि मदद करता है।
शाम

13

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




2

मुझे लगता है कि यह आपके द्वारा पूछे जा रहे प्रश्न की तुलना में निम्न स्तर है, लेकिन यदि आप वास्तव में चाहते हैं कि एक html ईमेल को अधिक से अधिक ग्राहकों द्वारा सही ढंग से देखा जाए, तो सुनिश्चित करें कि यह मान्य MIME का उपयोग कर रहा है। विशेष रूप से, किसी ईमेल को मान्य MIME के ​​रूप में माना जाने के लिए, हेडर MUST (शब्द के RFC अर्थ में) में ये दोनों हेडर होते हैं:

MIME-Version:
Content-Type:

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


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

1

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

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

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

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


1

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

ये गलत है :

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

यह अच्छा है :

<img src=cid:myImage/>

हाँ, यह अजीब लग रहा है, लेकिन ईमेल में छवियों को एम्बेड करने के बारे में इस गाइड की जाँच करें ।


0

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

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.