Search for:
Quick Category Links

SharePoint
Project Management
Professional Development
Office Applications
Categories
Tags
AJAX briefing Business Certification Conferences Consulting CorasWorks Document Management Education and Training Email Enterprise Project Management EPM Events Excel Knowledge Management Maintenance Meta element Microsoft Microsoft Access Microsoft Excel Microsoft Office Microsoft Outlook Microsoft PowerPoint Microsoft Project Microsoft SharePoint Microsoft Windows Microsoft Word Mondosoft Office 2007 Ontolica Operating Systems PMI PMP PowerPoint press release Project Management SDPS search seminar SEO SharePoint Designer Social Media Twitter Windows Server 2008 Windows Vista
Other Links

Meet Our Authors

Mar

Two Tips - CSS in Email Newsletters

By Marge R (18 posts -- read other by posts Marge R)

Anyone who has tried to create an email newsletter using cascading style sheets already knows that there are issues with certain email clients. So let’s talk about which clients have problems, what causes some of the problems and a couple of suggestions on how you create an email newsletter that will look ok in all clients?

Let’s start by looking at the cause. Gmail is one of the worst. In fact, a good rule of thumb has always been that if you can get your email newsletter to look ok in Gmail, then it is a pretty safe bet that it will look ok everywhere else.

Gmail is a browser-based email client, which means that it is already an HTML page. So if your newsletter contains the standard HTML page tags (ie. <head>, <body>), Gmail strips them out, because they are basically redundant with those same tags that already exist within the Gmail web page. And if you think about it, that automatically impacts any external or page embedded CSS that you may have used.

So tip number one is to only use inline styles when creating your newsletters. If you’re working with Dreamweaver, this means some hand-coding, since there is no simple way of creating and applying inline styles in Dreamweaver.

Taking this one step further, don’t bother putting even inline styles inside your <body> tag, because remember that the HTML clients strip out the <body> tag. You can try putting the whole newsletter inside a <div> tag and then apply your inline styles to that. That will work for some styles, while others will be ignored. Be sure to test it before sending it.

The use of inline styles exclusively will handle most of the issues inside your HTML clients. But then there is Outlook 2007, which took us even further back in time to before web pages could be built entirely using CSS positioning. Probably the biggest thing here is that Outlook 2007 does not support CSS float or position attributes, and ignores the CSS box model almost entirely. (You want to use padding and margins? Forget about it!)

So tip number two to creating passable email newsletters is to layout your page with tables. I can’t believe we have to recommend this … we’ve come so far in web design, and have finally reached the point where we can safely use CSS for positioning and eliminate all of those slow loading, inaccessible, nested tables. And here we are back there all over again.

For more in depth information about what Microsoft supports and what it doesn’t, read this article on CSS Rendering Capabilities in Outlook 2007 on the MSDN site.

(No Ratings Yet)

Loading ...

Comments