jason310771 Posted April 9, 2011 Share Posted April 9, 2011 I have created my email layout in Dreamweaver using html with doctype, html, head and body tags and it shows ok in IE and Firefox and in Windows Live Mail I have placed all of the CSS inside the email code inside the head tags. When this is emails to someone with Outlook, Outlook completely changed the html and the CSS section ?! How do I prevent this from happening or better still how to code this so that Outlook does not have to change anything. Quote Link to comment Share on other sites More sharing options...
raindropz12 Posted April 9, 2011 Share Posted April 9, 2011 you need to use inline stylesheet, don't place your css file inside head tag Quote Link to comment Share on other sites More sharing options...
jason310771 Posted April 9, 2011 Author Share Posted April 9, 2011 so i need to remove all the class="**" and replace with style="****" and put the css code in here instead ? or could i just place all the css in an external files and link it in the email code ? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 9, 2011 Share Posted April 9, 2011 To layout an email one needs to apply all bad practices there are. Use tables and inline style.(only with emails) maybe want to have a look at the standard templates of mailchimp to get the idea. There are quite some articles on designing emails. just google it. Quote Link to comment Share on other sites More sharing options...
stevengreen22 Posted April 9, 2011 Share Posted April 9, 2011 Would you mind elaborating why? Is it the way the email client renders / reads the files? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 9, 2011 Share Posted April 9, 2011 indeed! I can elaborate, on it, but like i said if you want a quick a working way, download a template from mailchimp and follow the guide/tips. As far as the mail format: this what your looking for: http://www.faqs.org/rfcs/rfc2822.html Quote Link to comment Share on other sites More sharing options...
Philip Posted April 10, 2011 Share Posted April 10, 2011 I frequently create marketing emails, so I can give a few more tips: Keep the design simple, trust me, it'll make your life easier later down the road Use tables (ugh, I know) and inline CSS Don't bother with things like p, h1, h2, etc tags in the table. It'll just complicate your life more and adds no value to the code Don't bother with paddings / margins. You should use spacer images instead (again, ugh) For hotmail & images you'll notice there are probably some spacing issues (extra padding above and below the image). You can easily fix it by doing the following on all images: Before... <td><img src="http://mysite.com/images/logo.jpg" width="100" height="50" alt=""></td> After... <td style="line-height:0;"><img src="http://mysite.com/images/logo.jpg" width="100" height="50" alt="" style="display:block;"></td> Be sure to place height/width attributes on images Do not place height/width attributes on td/tr/tables.. Use inline css height/width. http://premailer.dialect.ca/ is an AMAZING tool. Use it! I can't believe I'm actually referring someone here, but: http://litmus.com is a good tool to use to preview across different email clients. It's a bit pricey if you're a solo developer ($50/month), and to be honest the service isn't terribly reliable - it provides the proper screenshots, but the access to the different email clients is very unstable IMO. If you have any specific questions, or need more tips for certain clients let me know! Quote Link to comment Share on other sites More sharing options...
Philip Posted April 10, 2011 Share Posted April 10, 2011 I just wrote an article that goes into a bit more depth on creating emails. You can find it over here Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 10, 2011 Share Posted April 10, 2011 I just wrote an article that goes into a bit more depth on creating emails. You can find it over here Nice one! Quote Link to comment Share on other sites More sharing options...
stevengreen22 Posted April 10, 2011 Share Posted April 10, 2011 Awesome! Well worth bookmarking, I may not need to use it btu uit's a fantastic resource to be aware of and informative too!!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.