HTML ईमेलों को स्टाइल करने के लिए सर्वोत्तम अभ्यास [बंद]

195

बंद हो गया । इस प्रश्न पर अधिक ध्यान देने की आवश्यकता है । यह वर्तमान में उत्तर स्वीकार नहीं कर रहा है।

इस प्रश्न को सुधारना चाहते हैं? प्रश्न को अपडेट करें ताकि यह इस पोस्ट को संपादित करके केवल एक समस्या पर केंद्रित हो ।

6 साल पहले बंद हुआ ।

इस प्रश्न को सुधारें

मैं एक ईमेल न्यूज़लेटर के लिए एक HTML टेम्पलेट डिज़ाइन कर रहा हूँ। मैंने सीखा है कि कई ईमेल क्लाइंट लिंक्ड स्टाइलशीट को अनदेखा करते हैं, और कई अन्य (जीमेल सहित) सीएसएस ब्लॉक घोषणाओं को पूरी तरह से अनदेखा करते हैं। क्या इनलाइन शैली मेरे एकमात्र विकल्प हैं? HTML ईमेल स्टाइल करने के लिए सबसे अच्छे अभ्यास क्या हैं?

html css html-email

— जो मोर्निन
स्रोत

1

यहां डुप्लिकेट प्रश्न पर संसाधनों की एक बड़ी सूची दी गई है ।

— जॉन

128

अभियान मॉनिटर में एक उत्कृष्ट समर्थन मैट्रिक्स है जो विभिन्न मेल क्लाइंटों के बीच समर्थित है और जो नहीं है।

आप लिटमस जैसी सेवा का उपयोग यह देखने के लिए कर सकते हैं कि कई ग्राहकों के बीच एक ईमेल कैसे दिखाई देता है और क्या वे फ़िल्टर द्वारा पकड़े जाते हैं, आदि।

— जिम
स्रोत

9

+1: लिटमस के बारे में नहीं जानते थे। यह एक विशाल समय बचाने के लिए लग रहा है। धन्यवाद: D और कैंपेनमैटर पर ब्लॉग पोस्ट के बारे में मत भूलना, जिसमें कुछ अच्छे सुझाव भी शामिल हैं।

— होर्स्ट गुटमैन

249

मैंने पहले HTML ईमेल की लड़ाई लड़ी है। ईमेल क्लाइंट के बीच अधिकतम अनुकूलता के लिए स्टाइल के बारे में मेरे कुछ सुझाव यहां दिए गए हैं।

इनलाइन शैलियों आप सबसे अच्छे दोस्त हैं। बिल्कुल स्टाइल शीट लिंक न करें और एक <style>टैग का उपयोग न करें (जीमेल, उदाहरण के लिए, उस टैग को स्ट्रिप्स और यह सब सामग्री है)।
अपने बेहतर निर्णय के खिलाफ, तालिकाओं का उपयोग और दुरुपयोग करें । <div>s सिर्फ इसे नहीं काटेगा (विशेषकर आउटलुक में)।
पृष्ठभूमि छवियों का उपयोग न करें , वे धब्बेदार हैं और आपको परेशान करेंगे।
याद रखें कि कुछ ईमेल क्लाइंट स्वचालित रूप से टाइप किए गए हाइपरलिंक्स को लिंक में बदल देंगे (यदि आप <a>उन्हें स्वयं एंकर नहीं करते हैं )। यह कभी-कभी नकारात्मक प्रभाव प्राप्त कर सकता है (यदि आप हाइपरलिंक्स पर एक अलग रंग प्रकट करने के लिए शैली डाल रहे हैं)।
कुछ अलग के साथ एक वास्तविक लिंक हाइपरलिंकिंग से सावधान रहें। उदाहरण के लिए, टाइप न करें http://www.google.comऔर फिर इसे लिंक करें https://gmail.com/। कुछ ग्राहक संदेश को स्पैम या जोड़ के रूप में चिह्नित करेंगे।
आकार में बचाने के लिए यथासंभव कम रंगों में अपनी छवियों को सहेजें।
यदि संभव हो, तो अपनी छवियों को अपने ईमेल में एम्बेड करें । ईमेल को उन्हें डाउनलोड करने के लिए किसी बाहरी वेब सर्वर तक नहीं पहुंचना होगा और वे ईमेल में संलग्नक के रूप में दिखाई नहीं देंगे।

और अंत में, परीक्षण, परीक्षण, परीक्षण ! प्रत्येक ईमेल क्लाइंट चीजों को एक ब्राउज़र की तुलना में अलग तरीके से करता है।

— माइकल Irigoyen
स्रोत

2

जब एक पृष्ठभूमि रंग को एक पर रखा जाता है <div>, तो आउटलुक रंग को सामग्री से आगे नहीं बढ़ाएगा, जिसका अर्थ है कि पैडिंग रंगीन नहीं होगी।

— माइकल इरिगॉयन

70

क्यों, इंटरनेट? हम ईमेल के लिए अच्छा html क्यों नहीं कर सकते? हिलाता है मुट्ठी

— simonlchilds

8

तो हम प्रिटियर स्पैम प्राप्त कर सकते हैं?

— ब्रॉक हेंसले

6

@DavidRivers हो सकता है कि यह बताया जाना चाहिए कि "एम्बेडेड छवियों" छवियों को जोड़ने के लिए इसका मतलब यह नहीं के रूप में संलग्नक, बजाय वे के रूप में बेस 64 एन्कोडेड तार यूआरएल "सामान्य" में संदर्भित की जगह शामिल किया जाना चाहिए <img>ताकि तरह, टैग:<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

— टीमो

3

@MJafarMash ईमेल में छवियों को एम्बेड करने का गलत तरीका है। आपको अलग-अलग लिफाफे बनाने होंगे और इसके आधार पर छवि को संदर्भित करना होगा cid।

— माइकल इरिगॉइन

37

मेल चिंप क्या करना है पर काफी अच्छा लेख मिला है। (मुझे पता है कि आप जो चाहते हैं उसके लिए यह गलत तरीका लगता है)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

सामान्य तौर पर उन सभी चीजों के बारे में जो आपने सीखा है कि वेब डिज़ाइन के लिए बुरा व्यवहार करना html ईमेल के लिए एकमात्र विकल्प है।

मूल बातें हैं:

छवियों के लिए पूर्ण पथ हैं (उदाहरण के लिए। https://stackoverflow.com/random-image.png )
लेआउट के लिए तालिकाओं का उपयोग करें (कभी नहीं सोचा था कि मैं इसकी सिफारिश करूंगा!)
इनलाइन शैलियों का उपयोग करें (और पुराने स्कूल सीएसएस भी, सबसे अधिक 2.1 पर, बॉक्स-छाया उदाहरण के लिए काम नहीं करेगा;);

जैसे ही आप अपना सुझाव प्राप्त कर सकते हैं, या लिटमस का उपयोग किसी अन्य ईमेल क्लाइंट के रूप में कर सकते हैं, जैसा कि ऊपर सुझाए गए किसी और व्यक्ति ने किया है! (जिम को श्रेय)

संपादित करें:

मेल चिंप ने इस उपकरण को समुदाय के लिए उपलब्ध कराकर बहुत अच्छा काम किया है।

यह आपके सीएसएस कक्षाओं को आपके एचटीएमएल तत्वों को आपके लिए इनलाइन पर लागू करता है!

— सैममुल्लिंस
स्रोत

1

MailChimp लिंक टूट गया है, शायद यह इन लेखों, में से एक है kb.mailchimp.com/article/common-html-email-coding-mistakes या इस kb.mailchimp.com/article/common-mistakes-to-avoid

— नाथन Koop

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

— सैममुल्लिंस

CSS inlining टूल के लिए धन्यवाद। मुझे लगता है कि उपयोगी होगा।

— राजेश पॉल

10

यहां पोस्ट किए गए उत्तरों के अलावा, सुनिश्चित करें कि आप इस लेख को पढ़ते हैं:

http://24ways.org/2009/rock-solid-html-emails

— स्टीफ़न मुलर
स्रोत

6

जिस संसाधन को मैं हमेशा HTML ईमेल के बारे में बताता हूं, वह है कैंपेनमैटर सीएसएस गाइड ।

जैसा कि उनका व्यवसाय पूरी तरह से ईमेल डिलीवरी के आसपास तैयार है, उन्हें अपने सामान के साथ-साथ किसी को भी पता है

— गैरेथ
स्रोत

5

'डर गया तो। मैं स्टाइलशीट के साथ एक HTML पेज बनाऊंगा, फिर प्रत्येक तत्व के स्टाइल अट्रेक्ट के लिए स्टाइलशीट लागू करने के लिए jQuery का उपयोग करें। कुछ इस तरह:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

फिर DOM को कॉपी करें और ईमेल में उसका उपयोग करें।

— नेथन मैक इननेस को दिखाया
स्रोत

2

आपको इसके साथ थोड़ा सावधान रहना होगा ... हालांकि यह मूर्खतापूर्ण नहीं है। जैसे यह चीजों की चौड़ाई को गड़बड़ कर सकता है, इसलिए भेजने से पहले सब कुछ जांचें।

— नाथन मैकइन्स

उस समस्या को हल करने के लिए, आप पूरे दस्तावेज़ को पहले jQuery के साथ छिपा सकते हैं, फिर इस कोड को चला सकते हैं (और शायद अनहाइड करें) - इस तरह से वास्तविक सीएसएस नियमों को गणना किए गए परिणाम (जैसे कि चौड़ाई के लिए) के बजाय पुनर्प्राप्त और लागू किया जाता है

— बड़ी।

1

मुझे लगता है कि छवि मानचित्रण बहुत अच्छी तरह से काम करता है। यदि आपके पास कोई हेडर या फुटर है जो चित्र हैं, तो सुनिश्चित करें कि आप bgcolor = "fill in the blank" लागू करते हैं क्योंकि अधिकांश मामलों में आउटलुक छवि को लोड नहीं करता है और आप एक पारदर्शी हेडर के साथ रह जाएंगे। यदि आप कम से कम एक रंग को नामित करते हैं जो ईमेल के सभी महसूस के साथ काम करता है तो यह उपयोगकर्ता के लिए एक झटका से कम नहीं होगा। कभी भी स्टाइल की चादरों का इस्तेमाल न करें। या सीएसएस बिल्कुल! बस इससे बचें।

निर्भर करता है कि आप किसी शब्द या साझा किए गए Google डॉक से सामग्री की नकल कर रहे हैं (कमांड + एफ) सुनिश्चित करें (सभी) (') और (") खोजें और उन्हें अपने संपादन सॉफ़्टवेयर (विशेषकर dreemweaver) के भीतर बदलें क्योंकि वे कोड के रूप में दिखाई देंगे और यह अच्छा नहीं है।

ALT आपका सबसे अच्छा दोस्त है। अपनी सभी छवियों के लिए टेक्स्ट में जोड़ने के लिए ALT टैग का उपयोग करें। क्योंकि बाधाओं वे सही लोड करने के लिए नहीं जा रहे हैं। और वह ALT टेक्स्ट वही है जो लोगों को (चित्र देखें) बटन पर क्लिक करने के लिए मिलता है। अपनी छवियों को भी परिभाषित करें चौड़ाई, ऊँचाई और बोर्डर 0 बनाएं ताकि आपको अपनी छवि के चारों ओर अजीब लाइनें न मिलें।

फ़ोटोशॉप के भीतर सभी छवियों को प्रत्येक पक्ष पर एक 15px बोर्डर के साथ संपादित करने पर विचार करें (पृष्ठभूमि को पारदर्शी बनाएं और छवि के PNG 24 के रूप में सहेजें)। कभी-कभी ईमेल क्लाइंट किसी भी गद्दी शैली को नहीं पढ़ते हैं जो आप छवियों पर लागू करते हैं ताकि यह किसी भी अजीब प्रारूपण से बचा जाए!

इसके अलावा, मैं विशेष रूप से कष्टप्रद लिंक के तहत लाइन पाया अगर आप लागू <शैली = "पाठ-सजावट: कोई नहीं; रंग: # रंग जो भी आप यहाँ चाहते हैं!" > यह लाइन को हटा देगा और आपको वांछित लुक देगा।

एक बहुत कुछ है जो वास्तव में ओवर ऑल लुक और फील के साथ गड़बड़ कर सकता है।

— स्टीफन
स्रोत