Blog

Optimizing CSS presentation in HTML emails

August 01, 2005

This article is a sequel to one that appeared on A List Apart shortly after the CAN-SPAM Act of 2003 was enacted. (If you haven't read it, you might want to take a gander.) The web has made great strides in standards-coding techniques, and my philosophies have evolved accordingly. I now would like to clarify the intentions of my original article and explain how my approach to HTML emails has kept pace with the rapidly changing internet environment.

Preface

A spirited debate took place in the discussion forum for my original article. Many readers, dedicated to standards compliance, immediately denounced HTML emails as nothing more than vehicles for spam. Other readers disagreed, pointing out that while HTML formats are frequently used by spammers, they are also used by legitimate companies for permission-based email communication.

Both sides have valid arguments. But the sole intent of my article was to demonstrate how one could use standards-based markup for HTML emails, not to encourage spam or the use of HTML for general email communication. Like it or not, HTML emails are here to stay. And if we're going to be asked to build them, we might as well do what we can to ensure they are built with accessibility in mind. As for spammers, I believe the likelihood of their dedicating time to learning techniques for standards coding is slim to none.

So for those of you ready to improve the markup of your permission-based HTML emails, let's go to it. Following, is a screen shot of the properly rendered test email:

My approach

Download example

Download a zip file containing the markup and images for the test email.

SampleCSSEmail.zip (12kb)

For markup in the original test email, I utilized a blend of CSS and traditional techniques (Tables, etc.). Take the following markup from the original test-email whereby I used a Table for presentation [shudder] and a TD background to ensure the background would appear even in clients offering poor CSS support:

‹td width="28" background="imagepath"›‹img src="imagepath" width="28" height="25" /›‹/td›

This approach was a compromise, offering extended use of CSS and ensuring design integrity across the board. I have since matured my approach, however, employing fully-semantic markup (my standard practice for websites). Consider the following example:

‹div id="Title"› ‹h1›National Adoption Day‹/h1› ‹h2›‹a href="url"›Learn more‹/a›‹/h2› ‹/div›

In email clients lacking support for CSS, this degrades to an appearance similar to that of rich text:

[screen shot of test email with CSS disabled]

From my perspective, the result is perfection: beautiful designs for recipients with CSS-friendly clients and accessible, functional versions for everyone else. This, too, is a compromise, but only with respect to the integrity of the visual design. Accessibility is never compromised, and that's the beauty behind this approach.

My testing suite

I surveyed friends and colleagues as to their email client of choice because stats on email-client usage aren't published like browser stats. I tried to reach a broad demographic in hopes of using an inclusive suite. The resulting suite comprised the following clients:

Desktop clients

Apple Mail (Mac)
Thunderbird (Mac/PC)
Outlook (PC)
Outlook Express (Mac/PC)
AOL (Mac/PC)
Entourage (Mac)
Eudora (PC)

Webmail clients

Yahoo Mail
Gmail
Hotmail
Squirrel Mail
AOL

Handheld devices

Motorola v551
Zaurus SL-5500

The results

By and large the clients in my testing suite offered pretty amazing support for CSS, barring the pitfalls noted below. Most of the desktop clients fared very well, but the webmail clients’ performance was all over the board. Considering the difference in environments, that was to be expected. Desktop clients have complete control over presentation, while webmail clients are dealing with an HTML page embedded within an HTML page. And each has its own unique method for handling this predicament.

Yahoo Mail alters the contents of an HTML email by changing things like ‹body› to ‹xbody› and adding an all-encompassing container DIV (#message) just inside the Body tag. The “xbody” issue disables all presentational aspects you’ve defined for the body of your document. There is, however, an accessible solution to this problem that minimizes gratuitous markup. Create your own container DIV that envelops your entire email and treat it as though it where the body tag. As for the new #message DIV, it’s relatively harmless (at least in my tests) since Yahoo is considerate enough to add #message to any descendant selectors you might have applied.

So:

#Title h1 {

Becomes:

#message #Title h1 {

Yahoo Mail does, however, attack with irreparable damage when it comes to positioning. Just as ‹body› becomes ‹xbody›, ‹position› becomes ‹xposition›. Unfortunately, I was unable to find a workaround for this issue. The result is that positioned elements behave as if they were not coupled with any styles whatsoever. So unless your email list is void of Yahoo addresses, it’s best to avoid designs requiring positioning.

AOL (desktop client) accepts no background images whatsoever, whether CSS- or HTML-based. If a technique exists for forcing the rendering of background images, I am unaware of it. I suspect the culprit is their use of proxy servers, which already severely compresses images in favor of speed and at the expense of quality. The webmail client successfully rendered my test email, but I was unable to find statistics comparing usage of the desktop client with that of the webmail client. Outside of the background-image issue, both AOL clients successfully rendered my test email.

Gmail will function whether or not scripting is enabled in the viewer’s browser. A warning message is displayed when scripting is disabled, encouraging you to enter with scripting enabled. But the only differences I noticed between the two modes were as follows:

Ads aren’t displayed with scripting disabled.
The client’s GUI exhibited minor visual variances.
With scripting enabled, the entire email is printed with JavaScript.

Irrespective of scripting settings, my test email was identical in appearance. And that appearance lacked any CSS support whatsoever. Gmail takes the liberty of stripping your styles and, “respectfully,” strips any trace of CSS having been used anywhere in your document. For example, it turned this:

‹div id="EmailBox"› ‹div id="Box"› ‹div id="Title"› ‹h1›National Adoption Day‹/h1› ‹h2›‹a href="url"›Learn more‹/a›‹/h2› ‹/div› ‹div id="Sidebar"›

into this:

‹div› ‹div› ‹div› ‹h1›National Adoption Day‹/h1› ‹h2›‹a href="url"›Learn more‹/a›‹/h2› ‹/div› ‹div›

Hotmail, too, strips out your styles but does retain the basic semantic structure of the document. And the primary difference between Gmail and Hotmail is that the latter supports inline styles. So, if for some horribly unfortunate reason you must ensure that your visual design is properly rendered in Hotmail, you can at least spend more time than you have available inserting inline styles.

.Mac accounts can be accessed using either the Apple Mail client or a web browser. Mail has seemingly flawless support for CSS. However, its web-based companion has a couple of major issues, depending on the browser used for access:

Every email message is wrapped in a ‹font› tag, presumably to ensure that plain-text emails look pretty when rendered in their webmail client. This sounds reasonable until we want our CSS-based HTML emails to render properly. CSS properties for type selectors as children of HTML attributes should take precedence. Apple’s default browser, Safari, followed this rule. But in the extremely standards-compliant Mozilla-based browsers (Firefox and Camino) I used to test .Mac, the ‹font› tag commandeered the presentation. Helvetica is declared as the font, so if you’re using a sans-serif font in your design the damage is minimal. Alternately, you’ll need to consider how your email will render when serif fonts are converted to sans-serif.
The message window is fixed to a width of 570 pixels. So if you want your email to properly render in this client, you’ll want to use either a liquid layout (variable or undefined widths) or a fixed width of less than 570 pixels.

Entourage has a peculiar problem that is solely cosmetic. It properly rendered the elements I floated but failed to apply their margin values. Margin was properly rendered elsewhere, just not in the floated elements.

Conclusion

HTML emails that contain semantic markup and CSS fare very well with the most commonly used email clients. And for clients that offer poor or no support, the semantic markup allows for graceful degradation. This amounts to ultimate accessibility for your intended recipients. My philosophy for internet communication is pretty simple: visual-design integrity for people with modern devices and browsers, and information integrity for everyone else. The adverse effects of forcing design integrity for everyone significantly outweigh the benefits for a very small percentage of internet users. Accessibility is king, and I believe that the system I have outlined is a good one for accomplishing just that.

This article was authored for Campaign Monitor by Mark Wyner of Mark Wyner Design, a small web design studio in Portland, OR, USA.

Posted in: Tips & Resources

84 Comments

andipandi
March 24, 2006 8:44am

also, I downloaded your file and was deeply chagrined to find that your css doesn’t have to do any of those tricks, yet displays excellently in all but hotmail and gmail. hotmail refuses to receive it though.
andipandi
March 24, 2006 8:46am

keep thinking of more things to add:

best browsers for compliance I’ve found so far, .mac webmail, entourage, and surprisingly, aol webmail. Who’d have thought that aol would be on top of this??!
Chris
March 28, 2006 11:43pm

My personal choice is plain text every time but marketing managers are always asking for it to look cooler. Not, I may hasten to add because of a potential uplift in sales, but because they get to stick a nice picture into the monthly report.
Jezza_J
March 31, 2006 12:27am

I’ve just changed company where I am now enjoying the delights of Bogus Notes 6.0 and have been tasked with building HTML campaugns. By using css I have managed to get the email rendered correctly but am still seeing issue’s with displaying of images.

I have had varoius people tell me that Notes 6.0 will not display images, can anyone confirm this before I spend hours trying.

In addition, if it can support images, can anyone point me in the right direction as to how to do this…...
Wendi
April 27, 2006 1:06am

Lotus Notes will display images and I found an excellent article of steps you can take to ensure that images are displayed. We tried it here at our company and it solved an issue they’ve been having for ages that even Lotus Notes support couldn’t help them with. Check it out HERE!

Thanks for this great resource - it’s been a valuable source of information for me in trying to create HTML email campaigns that works across most if not all platforms. :)
Jezza_J
May 4, 2006 8:44pm

Thanks Wendi, this is great stuff…
cwilson
May 5, 2006 3:55am

How to fix CSS in Outlook:

My company is sending out HTML emails using inline CSS (these emails are dynamically generated through a website). The recipient of the email will then forward the generated email to their customers.

The problem we were coming across is that when they were forwarding the emails with Outlook, it was stripping the CSS (background images). The solution we found was to go into Tools-Options-Mail Format and unchecking the “Use Microsoft Office Word 2003 to edit email messages” option. Now the table backgrounds display correctly.

This will allow you to keep the CSS in emails that are forwarded (or sent in general)
Clare
May 12, 2006 6:07pm

That is very important. But did you hear about the last CSS in HTML emails???
cwilson
May 14, 2006 1:45am

No. What are you referring to?
sheepi
May 15, 2006 3:10am

Thanks for all, the ZIP file too. But, what can I do with a PHP? I can see it in Dreamweaver and the IE. You forgot to tell us newbies how to put this into my Outlook to try a test email. Attachment doesn’t work. Copy, paste doesn’t work. You forgot to tell how to use the ZIP file.
Dave Greiner
May 15, 2006 8:21am

Sheepi, sign up for a free account and you can test your modified zip file for free.
Stephane Gregoire
May 15, 2006 10:54pm

Hi!

Thanks for this article. and thanks to ben scott for the position of the style tag in the body.

Now, the new Yahoo delete the body tag!
Aled
May 16, 2006 12:00am

Hi,

Great article! Managed to convince my boss to stop nagging me to get the HTML emails looking better in gmail with your bit about it.

Thanks!
cwilson
May 27, 2006 12:48am

Sheepi: If you are trying to have a PHP file run in Outlook it won’t work. PHP, like all server-side languages, requires a web server that converts the code into something useful, like HTML. If I’m understanding you correctly, you’ll have to come up with another solution.
Nocturnal
June 1, 2006 3:04pm

Any idea if there is a way to have Outlook use a specific style sheet to render all incoming HTML e-mails? If anyone knows, could you shoot me an e-mail at .(JavaScript must be enabled to view this email address)? Thanks!
Stas
June 2, 2006 7:42pm

“Any idea if there is a way to have Outlook use a specific style sheet to render all incoming HTML e-mails? If anyone knows, could you shoot me an e-mail at .(JavaScript must be enabled to view this email address)? Thanks!”
NO ideas:(
Stas
June 2, 2006 7:46pm

But I know man who can help us
Yaron
June 5, 2006 1:02pm

Thanks for this very informative info everyone.

Does anyone know if there’s a way to create a clickable button (Form button, Table cell, etc) in an HTML email without having ESPs or clients strip out the code. I’m using “onClick” javascript and it gets blocked (dead button).
HTML Help Guy
June 10, 2006 11:48am

I think some HTML emails have definite legitimate uses.

The spam problem is so rampant, however, that’s it’s hard for many to overlook.

but that’s a very informative article and a good read.
Craig Hoffmann
July 25, 2006 3:07am

My first post to any board - I have an HTML email that a freind created for me that I send to my cycling buddies to alert them to our weekend rides. The email was created on a PC. Now that I am 100% mac, when I forward the email and then try and edit, the email formatting is pretty messed up. Is there an easy fix as I don’t understand most of the direction you give in the posts above. Thank .(JavaScript must be enabled to view this email address)
Scott Haines
August 4, 2006 5:46am

I have been reading over everyone’s posts and I think that in general HTML based email is slowly becoming a thing of the past, people are going to need to begin the slow and ugly process of upgrading ideas and processes to today’s standards. Although most email clients don’t render the CSS emails perfectly, think about how many email clients won’t show anything at all including images, this is an ugly battle because of Spam filters and Serious Junk Mail filters, if we continue to fight the good fight as designers and programmers we will always lose to about 45% of people in our email marketing. We have to accept this as inevitability, it is like a designers fight against Internet Explorer, with all of the new standards being laid down by the W3, we have microsoft years behind, so I guess in the same way, we as designers will always suffer the wrath of companies that don’t realy on standards and yet rather on what will get the next release out quicker and for the least amount of money. <a>newfront</a>
Crystal
August 10, 2006 12:59am

Great info. Thanks to everyone who commented. As usual, differing standards make our jobs a pain in the rear, but what can you do? :)
GonabesJohn
August 15, 2006 6:47am

My company is sending out HTML emails using inline CSS (these emails are dynamically generated through a website)
Kel
August 17, 2006 3:20am

Just an update re: Eudora Mac currently in beta testing for an update to version 6.x. (Also to note, Eudora 7 for Mac IS due to arrive eventually…) The current version of Eudora Mac 6.x adds a menu item to view html emails in a browser (Safari being the default, under 10.3 and higher), which works fine. Otherwise Campaign Monitor and MailBuild emails (with or without a text version) generally render as rich text with images inline. There is no real css positioning support (hence the need to view in a browser) and many folks I know keep Eudora’s images turned off by default.

I expect Eudora’s next Mac version 7 to be “decent” to html emails as they suggest Eudora will use WebKit for both display (and Authoring).

Hope that helps.
Pawel
September 23, 2006 6:15am

Nice article.
And what with clients using thunderbird, not an outlook?
Fafo
September 25, 2006 4:58am

In my little test with CSS, Hotmail present a rare behavior in his interface:

http://www.clowngroup.com.ar/test/hotmail.jpg

If you change the table properties for display:none, Hotmail interface disappear!
Somebody knows what happens?

Code:
**********************************************************

Test2 email

body{background-color: #E4E4E4;font-family: sans-serif;}
p{font-size: 0.75em;}
a{color: #ff6600;text-decoration: underline;}
table{border: 1px solid #333;}
tr{background: #B1B1B1;}
td{border: 1px solid #333;}
i{font-weight: bold; color: Green;}

HTML/CSS in email
This is an example paragraph test.

Table:

Text A1
Text B1

Text A2
Text B2

**********************************************************
Fafo
September 25, 2006 5:01am

Sorry, the original code is here: http://www.clowngroup.com.ar/test/test2.html
Lee
October 27, 2006 12:31am

From what one of my colleagues tells me, Lotus will support background images on the Body tag using styles, e.g.
rahim haji
November 14, 2006 11:19am

Hi All,

i am running a PHP site with the mail() function, however it seems that users with hotmail accounts can not get the emails sent from the site, there include registration emails, forgot passowrd emails, order emails and newsletters. does anyone have any ideas on how to get around this?

any help would be greatly appreciated.

rahim
raz
November 14, 2006 11:21am

i also need help with hotmail issues and yahoo, we are working on http://www.webtrendz.co.uk, http://www.toysgiftsgadgets.com and http://www.pleaseure2me.co.uk

we can not seem to send emails to yahoo and hotmail users, the emails do not even reach the spam filters…. pls help
Charlton
November 21, 2006 5:10am

I have downloaded the example zip file, extracted on Mac OSX. It is real good looking in Dreamweaver MX 2004. But I am wondering how am I suppose to do with entourage email system, how can I import the html page with good layout into the email?

Thanks
Kel
March 7, 2007 3:47am

Interested in seeing an update to this post cnsidering the new Outlook in Vista…
kalechi
April 10, 2007 3:43am

Lotus Notes: it uses IE for the rendering (until R8) so blame MS. Release 6.5 & 7 do a decent job at formating html emails. I found tabled based email design worked the best. images that are passed as a url work better then embedded which sometimes get pulled and added as attachments.
istituto commercio estero vienna
September 21, 2007 10:28pm

download quick time gratis
programma scaricare nuovo cap postale
volont negozio giuridico
macchina domestica cappelletta
brindisi immobiliare
home chubby amateur
scarica gratis sei parte
impermeabilizzazione piatto doccia
cartina regione sardegna
istituto commercio estero vienna
voglio dimenticare
volti disegni
costume vendita fantasy
incontro amicizia brasile
stampa foto on line miss click
mistress padrona dea
site www poliziadistato it polizia
rivista mamma bambino
alojamiento costa brava
servizio fotografico porno

< 1 2

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

@herron_bird That’s totally awesome - thank you for checking out worldview! :D ^RH

Email design guide

Straight to the point advice on creating beautiful emails that work.
Create a free account

Sign up, kick the tires and start sending in less than 60 seconds.
Powerful API

Interact and “sync” with your account via simple web-based methods.