2015-11-27 21 views
11

मेरे पास निम्न जैसे ईमेल हैं। समस्या यह है कि यह जीमेल पर ठीक काम करता है, लेकिन दृष्टिकोण पर, सभी सीएसएस इनलाइन स्टेटमेंट काम नहीं करते हैं।आउटलुक सॉफ़्टवेयर ईमेल में इनलाइन सीएसएस को स्ट्रिप्स करता है

ही एक उदाहरण है:

<a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> 

//The image width is stripped out and the original size is used to display 

वहाँ इस के लिए किसी भी फिक्स कर रहे हैं?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Welcome to Pure Apparel</title> 
</head> 
<body> 
    <table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);"> 
<tbody> 
<tr> 
<td class="space" style="width: 20px; padding: 7px 0;">&nbsp;</td> 
<td align="center" style="padding: 7px 0;"> 
<table class="table" bgcolor="#ffffff" style="max-width: 650px; width: 100%; border-collapse: collapse; margin: auto;"> 
<tbody> 
<tr> 
<td colspan="2" align="center" class="logo" style="padding: 7px 0;"><a title="{shop_name}" href="{shop_url}" style="color: #337ff1;"> <img src="{shop_logo}" alt="{shop_name}" /> </a></td> 
</tr> 
<tr> 
<td colspan="2" align="center" class="titleblock" style="border-bottom: 1px solid #636566; border-top: 1px solid #636566; padding: 7px 0;"><a href="{shop_url}56-new-in" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">New-In</a> <a href="{shop_url}23-women" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Women</a> <!--<a href="{shop_url}40-men" style="font-weight:500;font-size:17px;line-height:26px;width:20%;float:left;color:#555454;text-decoration:none;">Men</a>--> <a href="{shop_url}content/7-fw15" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Lookbook</a> <a href="http://pureapparel.me/" style="font-weight: 500; font-size: 17px; line-height: 26px; width: 25%; float: left; color: #555454; text-decoration: none;">Be-pure blog</a></td> 
</tr> 
<tr> 
<td colspan="2"><a href="{shop_url}content/24-international-shipping"><img style="width: 100%; display: block;" src="{img_dir}en/welcome.jpg" /></a></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566; text-align: center;"> 
<td style="padding: 10px 0px;"> 
<h3 style="margin-top: 5px;">New Collection</h3> 
<p>Enjoy online shopping with our easy check out process and reliable door to door courier service.</p> 
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; margin-bottom: 5px; text-decoration: none;" href="{shop_url}" target="_blank">Shop now</a></td> 
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box1.jpg" /></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566; text-align: center;"> 
<td style="padding: 10px 0px;"><img style="width: 200px;" src="{img_dir}box2.jpg" /></td> 
<td style="padding: 10px 0px;"> 
<h3>be-pure blog</h3> 
<p>With access to our be-pure blog, be the first to know about our newest design, latest yoga & fitness trends and community events.</p> 
<a style="display: block; text-align: center; width: 100px; color: #ffffff; background-color: #58595b; padding: 8px; margin: auto; text-decoration: none;" href="http://pureapparel.me/" target="_blank">View blog</a></td> 
</tr> 
<tr style="border-bottom: 1px solid #636566;"> 
<td colspan="2" style="padding: 10px 0px;"> 
<h3>Have a Question?</h3> 
<div style="width: 100%; text-align: center;"><img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q1.jpg" /> <img style="width: 120px; margin-right: 10px;" src="{img_dir}en/q2.jpg" /> <img style="width: 120px;" src="{img_dir}en/q3.jpg" /></div> 
</td> 
</tr> 
<tr style="text-align: center;"> 
<td colspan="2"> 
<p>Stay connected with us</p> 
<div><a href="https://www.facebook.com/BePureApparel" target="_blank"><img style="width: 35px;" src="{img_dir}fb.png" /></a> <a href="https://twitter.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}tw.png" /></a> <a href="http://instagram.com/be_pureapparel" target="_blank"><img style="width: 35px;" src="{img_dir}ig.png" /></a></div> 
<p>Please add <a style="text-decoration: none; color: #58595b;" href="mailto:[email protected]">[email protected]</a> to your approved senders or address book.</p> 
<p>If you do not wish to receive any eNews, please click here to update your preferences or <a href="{my_account_url}" style="color: #58595b;">unsubscribe</a> from this list</p> 
</td> 
</tr> 
<tr> 
<td colspan="2"> 
<p style="float: left; text-align: center; width: 25%;">@2015 Pure Retail Ltd.</p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}" style="text-decoration: none; color: #58595b;">www.be-pure.com</a></p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/3-terms-and-conditions-of-use" style="text-decoration: none; color: #58595b;">Terms & Conditions</a></p> 
<p style="float: left; text-align: center; width: 25%;"><a href="{shop_url}content/15-privacy-policy" style="text-decoration: none; color: #58595b;">Privacy Policy</a></p> 
</td> 
</tr> 
</tbody> 
</table> 
</td> 
<td class="space" style="width: 20px; padding: 7px 0;">&nbsp;</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

वास्तव में, स्रोत कोड सीएसएस पट्टी नहीं है, लेकिन यह पृष्ठ देखे जाने, आउटलुक के रूप में यदि सीएसएस किसी भी विचार बाहर छीन लिया जाता है, में कार्य करता है?

अद्यतन (29/11/2015):

तो, मैं अंत में पता चला कि width:50px काम नहीं कर रहा है, मैं आकार को नियंत्रित करने के width="50" उपयोग करने के लिए, के रूप में मैं केवल Outlook 2013 का समर्थन करने की जरूरत है और बाद के संस्करणों, मुझे आश्चर्य है:

  1. यह सही है कि Outlook 2013 आईएमजी टैग पर width:50px तरह इनलाइन सीएसएस का समर्थन नहीं करता?

  2. यदि यह समर्थन करता है, तो क्या समस्या इसके बजाय ईमेल सर्वर पर झूठ बोलती है?

  3. क्या मेरे टेम्पलेट को Outlook 2013 का समर्थन करने के लिए कोई आसान तरीका है?

+0

सभी इनलाइन शैलियों को हटा दिया गया है? – holden

+0

एक पल प्रतीक्षा करें, मैं ईमेल के स्रोत कोड को पोस्ट करूंगा धन्यवाद – user3538235

+0

अपडेट किया गया, कृपया बहुत कुछ लें, मदद के लिए धन्यवाद। – user3538235

उत्तर

8

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

मैंने मेलचंप का उपयोग किया है, यह मैंने उपयोग किए गए प्रत्येक p तत्व के लिए किया था और यह बिल्कुल Outlook और Gmail में समान नहीं दिखता है, लेकिन मैं सबसे नज़दीकी हूं।

<p class="MsoNormal" style="text-align:justify; line-height:150%; font-family:Arial, Helvetica, sans-serif;"> 

मैं Outlook के लिए उपयोग की जाने वाली मार्गदर्शिका यह है। ध्यान दें कि आपको Outlook मार्गदर्शिका प्राप्त करने के लिए अपने समुदाय (नि: शुल्क) में शामिल होना है, जो मुझे लगता है कि यह इसके लायक है और आपको परेशानी बचाता है। https://www.emailonacid.com/resources

पिछला लिंक आपको समझाएगा लेकिन यदि आप अधिक जानकारी चाहते हैं, तो आप हमेशा नीचे दिए गए दो लिंक देख सकते हैं।

आउटलुक/हॉटमेल के लिए, वे आम तौर पर की तरह http://templates.mailchimp.com/development/css/outlook-conditional-css/

कुछ तत्वों है कि ईमेल प्रदाता उपयोग करते हैं, आप यहाँ उल्लेख कर सकते हैं के लिए स्टाइल के सामने एक mso वाक्य रचना की है। https://www.campaignmonitor.com/css/

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

+0

अब तक यह पैडिंग, मार्जिन, ऊंचाई, चौड़ाई, ओह मेरे भगवान – user3538235

+0

का समर्थन नहीं करता है, लेकिन मैं पैडिंग और पृष्ठभूमि रंग के साथ एक बटन बनाना चाहता हूं लेकिन यह – user3538235

+2

के साथ काम नहीं करता है क्या आपके पास बटन के लिए कोड है? पैडिंग में कुछ समस्याएं हो सकती हैं और यदि बटन में टेक्स्ट है, तो इससे कुछ लाइन-ऊंचाई समस्याएं हो सकती हैं। – cweitat

1

आउटलुक इनलाइन शैलियों को अनदेखा नहीं करता है। हालांकि यह कुछ सीएसएस गुणों को समझ में नहीं आता है। जिन चीजें आज हम मानते हैं: फ्लोट, मार्जिन, पैडिंग। अभियान मॉनीटर का बहुत अच्छा table of which things will work in which email clients है।

आप लगभग हमेशा बहुत सारी घोंसले वाली टेबलों के साथ इसे प्राप्त कर सकते हैं। यह बदसूरत है लेकिन यह क्रॉस-प्लेटफार्म है और यह सब मायने रखता है।

कभी-कभी ईमेल मार्केटिंग में आपको यह स्वीकार करना होगा कि यह प्रत्येक ईमेल क्लाइंट में 100% समान नहीं दिख रहा है और ठीक है। जब तक यह प्रत्येक ग्राहक में अच्छा दिखता है, इससे कोई फर्क नहीं पड़ता कि यहां 2px अतिरिक्त अंतर है या नहीं।

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

सीएसएस-ट्रिक्स का एक अच्छा लेख है जो general sort of methodology you should follow पर चर्चा करता है।


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

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