We have updated our Privacy Policy and Privacy Options

Got It

CSS in Emails: What You Need to Know

Share

Have you ever opened an email and wondered why it contains one large image instead of a smooth combination of images and text?  Well, the most likely reason is that the email was created to display the same across the most popular email clients.  That should be easy, right?  Of course it should be!  Unfortunately, when it comes to the Internet, it never is.

Let’s dig into some technical background.

HTML 4.01 in Emails

Right now, the best way to get a good mixture of design elements and text into your email and have them look the same across email clients is to use HTML 4.01.  This is basically an archaic way of building HTML pages using tables.  Tables in HTML became standardized in HTML 4 in 1997, and became recommended by the W3C (World Wide Web Consortium) with the release of HTML 4.01 in 2001.   Without the combined use of HTML 4.01 and CSS we are very limited in what can be displayed in the email client using this standard.  With that being said, it is still a step up from using one flat image for building an HTML email.

CSS

Cascading Style Sheets (CSS) was originally proposed at the “Mosaic and the Web” conference in 1994.  CSS is used to enable separation of document content from design presentation.  With CSS1 specification being completed in 1997 and CSS2 becoming a W3C recommendation in 1998, it makes you wonder why some important specifications in CSS1, such as background image, still have not yet been implemented into some dominate email clients.

Now that you have some technical understanding of some basic coding standards, let’s look into some email clients and see how they handle them.  We’ll go in the order of greatest market share according to Campaign Monitor (August 2009).

Microsoft Outlook

Microsoft Outlook is a very widely used email client, but, to some shock, depending on the version you are using there is a completely different HTML rendering engine.  Outlook 2000/2003 use Microsoft’s Internet Explorer’s 6.0 browser to render HTML emails and CSS better than most would expect.  Outlook 2007 currently is and Outlook 2010 will be using Microsoft Office to render HTML.  The reason Outlook is using Microsoft Word for rendering of HTML is said to be ease-of-use for the end user and to expand awareness of Microsoft Word.  Microsoft Word, unfortunately, has very limited CSS rendering capabilities and will surely keep the industry very irritated for some time to come!

Yahoo! Mail

Yahoo! Mail has been fairly good at keeping and adding support for CSS.  Although there is certainly still some added CSS support needed for this email client, Yahoo! has done enough to keep the average developer satisfied for most designs.

Live Hotmail

Live Hotmail also has some support for CSS, but this email client is missing some important elements such as background image and margin.  Being a Microsoft application, Live Hotmail fortunately is not confined to boxed releases like Outlook and can very quickly and effectively be upgraded to add support for these important missing CSS elements.

Google Gmail

Google Gmail has almost the same support for CSS as the newer releases of Outlook, which is very limited support of CSS.  While Google Gmail is trying to break into a very competitive market, I don’t think they can afford to be this limited in their CSS support.

Apple Mail, Apple iPhone, AOL Desk 10

Easily, these three email clients have the best support for CSS and HTML.  I think that other companies in the industry need to look at these email clients as an example on how to render emails properly.

There is little insight into why many email clients are not supporting CSS fully, besides the standard ‘Security Reasons’ response.  Most security issues would be caused by scripts and hidden links, not CSS.  Most of the email clients strip anything outside of the body tags which would cut out any non-inline CSS.  This is fine, but does not explain why they do not support certain CSS elements inline.  (Perhaps someone could explain this to me in the comments?)

In the near future, email will begin to lose its market share if it does not progress at the rate the Internet is currently moving.  Applications like Google Wave will begin to chip away at old email delivery systems on every front if the industry does not start to make some changes for the better.  These change can be easily done, as some email clients have already proven.

Email is here to stay– let’s make it work properly!

Click here for a good resource on up-to-date CSS Support in Email Clients.

Categories