CSS Support in Email Clients Still Pretty Poor | April 26, 2007

While speaking at web design world, one attendee asked me a question about styling emails with CSS. I gave my stock answer that as a technical person I had a strong dislike of HTML/CSS emails as I feel they were against the spirit of the medium. I really like the simplicity of text as a communication medium, so hate email messages that pretend to be web pages. If I want to read a web page, I’d much prefer to be sent a link.

To me, most HTML/CSS emails are the online equivalent of junk mail, so I have styling turned off by default. If one of these emails gets through my spam filters I have an almost Pavlovian reaction to hit the junk button, before even reading the mail. I’ve spoken to many technically savvy people, and this seems to be the common reaction.

However I did agree that from a purely marketing perspective, HTML/CSS emails do tend to produce slightly higher conversion rates than regular text emails. So if you want to bombard people with marketing offers they probably don’t want or need, I guess HTML/CSS is the way to go. However for the 0.2% of people who respond, you’ll probably end up pissing the other 99.8% of people off. Obviously I didn’t say that last part out loud, but you know what I mean.

Personal opinion aside, my understanding is that styling emails with HTML/CSS is incredibly difficult. This is due to the shear number of email clients out there, and their poor support of web standards. You would imagine that webmail clients would be better, but in many cases they are actually worse – disabling all CSS in emails to prevent clashes with their own style information. So my advise was simple. Avoid HTML/CSS emails if possible.

As a speaker, you occasionally get to see feedback from your presentations. I was pleased that my sessions were reasonably well rated, but amused by the following comment.

I hate that Andy was brought in as CSS expert and he totally balked at the html email question. Giving guidance to avoid html emails it’s too hard—doesn’t reflect the reality we face as marketers.

I have to admit that I’m no email expert. I also feel sorry for any reality that involves having to work HTML/CSS emails on a regular basis. However, if you want the low-down on current CSS email client support, the nice people over at Campaign Monitor have put together their latest finding on the subject. The bottom line seems to be, if you want your emails to work in Outlook, you need still to do table based layout.

Posted at April 26, 2007 11:34 AM

Comments

Scott G said on April 26, 2007 12:12 PM

I also agree as a techy that HTML emails are painful, and I tend to disregard them when they land in my mailbox.

The fact that I have to treat them all differently depending on what mail client I am using (and where) makes them seem amateur.

But they are a reality when it comes to marketing (as you mentioned Andy re: conversions) and if you must make them the tried and true method is from scratch and with tables and old school inline HTML.

HTML rendering sucks in email clients, Microsofts new support sucks for CSS and as a developer, HTML mailouts are just a pain.

Alan Wallace said on April 26, 2007 12:18 PM

As with most things, there is a right way and a wrong way to do HTML emails. My day job involves coding HTML emails with various offers for our subscribers. All of our subscribers have specifically asked to receive these but also have the option to choose to receive plain text versions.

Each email sent has a section set aside where users can instantly unsubscribe or change there text/html preference. The Campaign Monitor blog you linked to in the post promotes loads of good common sense advice like this, it’s a shame that many people are still stuck in the dark ages of unsolicited spam.

Incidentally, I had to learn how to code using tables when I started this job, until then I had only ever used standards based design, I feel sorry for those that had to build entire sites like this!

Frances Berriman said on April 26, 2007 12:49 PM

Email styling just became even more of a pain in the behind with Outlook 20071 using Word formatting instead of IE formatting (before you could pretty much assume that if it looked okay in IE6, it looked okay in Outlook).

As I work at a marketing company, I have to deal with such problems regularly (although we deal with emails to subscribed groups/internal business communications, as opposed to spam!). I’m trying to encourage a movement towards less styled emails (as near to simple, plain, text as possible) or that syndication is the way forward (RSS is becoming more and more of a requested feature)!

[1]The Scoop On Outlook 2007

Tom Armitage said on April 26, 2007 1:02 PM

I appreciate that marketers have leapt upon HTML email for the richness it offers, but the fact remains that with each successive email client, it becomes harder and harder to produce a graphical email that has any semblance of consistency between clients. The effort to do so becomes exponentially greater - and at some point, you’re going to have to consider the cost. Is it really worth 6x the time and money, just to get it to look nice in one or two clients?

From my experience, CSS in email is utter hell, and even you go down the tables route, you still have to make some horrible compromises.

The one thing text guarantees is consistency of display. I’d hope that marketers would agree that consistency of display is probably more important to a brand, than half your audience getting a nice email, and the other half getting ugly trash.

Whilst the conversion rate may be slightly better - and it really is only slightly… the conversion rate compared against the cost of production is a far more interesting statistic to consider.

The answer about CSS and email clients really is “forget it, unless you’re a masochist”. With the way Microsoft want to take the next version of Outlook - using Word as the rendering engine - this doesn’t look like it’s going to change in future.

Andy Budd said on April 26, 2007 1:16 PM

The one things I would say in favour of HTML/CSS email is better typographical control and hence improved legibility. So I actually quite like the emails I’ve received from events like Flash on the Beach and FOWD, as they keep the graphics to a minimum, and focus on making the content digestible. However good HTML/CSS email design is the exception rather than the rule.

soxiam said on April 26, 2007 2:13 PM

I have some experience with this from working for a large-scale online travel site with portion of their healthy revenue being generated from their newsletter business. In my research, I’ve found there are 2 golden rules for compatibility is of utmost importance:

1. Use table-based layout (like you’ve pointed out).

2. If you need to use CSS, use in-line CSS.

I know both of these practices will lose me points with standardistas, but it nevertheless is the reality.

By the way, the mentioned Campaign Monitor is THE source for keeping up-to-date with the latest news regarding email marketing in general. Any data they publish is straight from their own business and their best practices have been spot on as long as I’ve been following them.

Nate Klaiber said on April 26, 2007 3:22 PM

I recently had to sit down with our Marketing department to discuss this issue. We initially used CSS/HTML (thought Campaign Monitor) - minimal images, but attempted to control some layout/typography aspects.

After reading recent results, I see our only option is to go back to table based email layouts - especially with our given target audience.

This is frustrating, extremely frustrating, to have to develop two layouts for any given project like this (tabled for email, css for web).

I sure hope email can catch up soon.

Bramus! said on April 26, 2007 5:11 PM

Very well said! Sent a mail to all colleagues at work today with guidelines for slicing html mailings: first sentence was “no css whatsoever should be used” :D

NatalieMac said on April 26, 2007 7:27 PM

I’ve recently fallen into a job where creating HTML emails is probably close to 50% of my work. Ugh. I hate them. It’s all tables and inline CSS and with the new Outlook, there’s no background images at all, with CSS or otherwise.

It’s been so very long since I had to do anything with tables. I can’t believe I worked in only tables for as long as I did.

Andy Budd said on April 26, 2007 9:54 PM

I feel your pain people.

Mathew Patterson said on April 27, 2007 1:34 AM

Andy said “However good HTML/CSS email design is the exception rather than the rule.”

I know we’ve talked about this before Andy, and we have different opinions, but I do think you could drop the ‘email’ from your quote above and it would still be true.

As standards based designers we can live in a little bubble of nicely designed, well built pages. However, in the wider web this is still very much the exception. I can tell you from experience at Campaign Monitor that there are a lot of really great, beautiful, readable emails like the FOWA one you mention.

There are also a huge number of ugly emails of course. The tools and information are out there to make emails which provide a better experience than plain text can - line heights, heading sizes and so on.

If well known standards based designers only ever discard html email as pointless or harmful, then the people designing html emails are unlikely to come from the web standards crowd, and things will not improve like they could.

Nobody is forcing you to send your own html emails, but some people really do prefer them, and they deserve a good experience as much as a visitor with a web browser does.

Andy Budd said on April 27, 2007 9:09 AM

Oh I agree that I’m being hypocritical. There are loads of badly designed websites out their, so why aren’t I saying the same things about the web? Well I guess it comes down to personal experience.

I very rarely come across badly designed websites because, as you rightly say, I live in a bubble. However in reality most people do the same, as we all make choices based on our own personal preferences. I choose not to go to badly designed sites, in the same way as I choose not to go to bad restaurants or tacky shops.

The problem with a lot of HTML/CSS email is that the choice option isn’t there. Email I’ve not requested or am not interested in get sent to me in the vein hope that I’m one of the 0.5% in can pique an interest in. Even if I may have checked a box in the past, or more likely failed to uncheck a box, doesn’t mean I’m interested in the messages I’m being sent.

So while my experience of the web is under my control and mostly positive, my experience of HTML/CSS email is largely out of my control and negative. I agree it would be nice if these marketing emails were better designed. However the fact that I don’t want and am not interested in the majority of this information, means I’m also not particularly interested in the medium.

By your logic you could argue that if I’m interested in good design, why and I not also interested in improving direct mail or magazine advertising. The reason I’m not interested is that I honestly don’t care. Does that mean I’m doing all the people who like receiving direct mail but wish it looked a little nicer a disservice? Maybe.

I’m not sating that other people shouldn’t get excited about improving standards support in mail clients and allowing people to produce more professional spam, er targeted email advertising campaigns. Just not me.

Of course, if I worked for a big HTML/CSS email, service, I’d probably think differently. Maybe you should talk to WASP about starting a new email client campaign.

Jason Beaird said on April 27, 2007 1:02 PM

Having had the opportunity (read:challenge) of putting together both CSS styled and sliced-image email campaigns, I have to say that achieving any sort of visual consistency with CSS styled email is difficult. The problem is the sheer number of entities you are designing for. All of the web-based email services have their own sets of issues, and then there’s all of the different versions of the many desktop email clients…and they all have their own quirky ways of rendering CSS/HTML. If you want to do basic text styling, yes, CSS can help. For a visual layout, it’s still best to slice and dice in Photoshop. Just my humble opinion of couse.

Raanan Avidor said on April 28, 2007 7:39 PM

I have no problem with HTML e-mails. I prefer receiving my newsletters in HTML format and not in plain text. For example, HTML e-mail (if built right) is easier to scan then text e-mail. Would you like to browse a site built in plain text or HTML? What is the difference?

I still remember the days where building pages was only possible with tables. I even remember the days where we even didn’t use table for layout of pages.
Pages built using CSS are the best, but at the time, before CSS 2.0, pages built with table where better (in many ways) then pages not using tables.

Right now there is no way to send an HTML e-mail built only in CSS, and you have no choice but to use tables.

We (as the people who need to build those e-mails), should demand from the e-mail client providers (web based or other) to support CSS 2.1, or even CSS 3.0, since it will take a long time till they will get there. Browser providers didn’t built the support of CSS just because they thought it is cool, they did it because we demanded it.

Adrian Turner said on April 30, 2007 2:18 AM

At my job, the other Front-End Developers call me the HTML email expert. I dislike them so much. No not my coworkers, creating the emails.

Most of the emails that I have to create might as well be web pages.

zara said on April 30, 2007 2:44 PM

I have thinking about html e-mail for a while as I think it can create a lot of problems in terms of accessibility. I have seen many times marketing e-mails that are just a bunch of images sausaged together with no equivalent content. I have always been surprised by the seemingly lack of interest on this topic by the accessibility community since e-mail remains one of the top, if not the top, communication method over the Internet and is used heavily in corporate marketing and communication strategies.

Luke said on May 2, 2007 5:14 PM

You say “…I had a strong dislike of HTML/CSS emails as I feel they were against the spirit of the medium. I really like the simplicity of text as a communication medium, so hate email messages that pretend to be web pages. If I want to read a web page, I’d much prefer to be sent a link.”

First of all, who defines what the “spirit of the medium” is? I believe - of course, another opinion - that the spirit of the email medium is whatever it takes to most efficiently and effectively communicate to your intended audience. If that means text, than text it should be. But a great vast majority of emails of the marketing type I believe need to be coded in html/css in order to be good at what they do - produce emotional reactions in potential customers and to reinforce the brand’s image. If you settle for simple text with this kind of email, there is no positive visceral reaction to the email, unless the reader happens to think text is exciting. Also, simple text would greatly reduce the efficiency of understanding many messages. A picture [or graphic] is not just a superfluous entity, it is - if used appropriately - a very quick and more interesting way to communicate with a variety of people.

If your primary reasons for email are interpersonal communication, than by all means text is more appropriate for elegant and quick to understand emails. If providing types of information that thrive on visual stimulus for interest and efficient comprehension, most likely well-designed graphic emails will fare better with most. The fact that email is “not a website” is irrelevant to whether it should look like one or not. If a website aesthetic makes the email quicker/better to understand, than it should be used. Unfortunately, as you know, most are not well-designed and do not produce the desired results, but in many designers’ experience, if the emails are done right, the effort can be truly worth it by the reactions produced by the email audience.

Grant said on May 3, 2007 12:49 AM

Hi Andy.

I much prefer plain-text emails myself, but I quickly learned it’s not only marketing departments that are keen on HTML emails.

A lot of people I’ve spoken too see HTML emails as a sign of professionality, and prefer them coz they’re easier to skim.

This is especially true when you have emails that have multiple “sections”.

That said, plain-text is a must for improved deliverability. So mixed mode plain-text/HTML, or providing a preference to a user, is critical.

I remember reading research about user preferences somewhere that indicated HTML was more popular - but, alas, I can’t find it…

From a marketing perspective, HTML emails also provide a much richer opportunity for brand re-inforcement and development.

Jorge said on May 3, 2007 3:51 PM

Thanks for posting on this, Andy. Good discussion can only lead to change.

I’m a standards-based designer at heart, and part of my job is to create these table-based abominations (I won’t nest them though!).

As web designers, we have to work within, or around, the limitations of the different browsers in order to give the user the best experience we can, be it on a visceral level or in terms of readability for delivering information. Designing HTML email is no different, except of course in the magnitude of difficulty.

It’s very important to note that not all HTML email is spam. We send HTML email only to people who have requested it, we offer a text-version alternative, and we make it easy to unsubscribe.

Andy, you choose to only visit sites that are well designed. Content being equal, I think you would rather visit a well-styled site rather than one without CSS.

If we’re going to be truly idealistic, the original intent of HTML had nothing to do with visceral presentation or branding. It was a way to share documents. But people like visiting sites that are nice to look at, and companies benefit from marketing and branding, so we style up HTML with CSS and all the rest of it.

Of course, the tables and lack of standards are the ugly parts of all this, which is why I drink some nights. But if most email clients supported CSS, I don’t anyone that didn’t have to would opt for text-only.

Gary Barber said on May 4, 2007 1:46 PM

It’s so easy as standards based web designers to turn our noses up at the evils of the HTML emails and the rendering engines of the email readers. We now work in a world where we can successfully create pretty much whatever we like design wise via using css based layouts.

However business and the real world reality does creep into out lives via HTML email. This is the stuff that “joe public” views, this is the stuff that looks good, is easier to read quickly, it engages people. Plain text does not. If you are distributing a newsletter you want people to be engaged with the email, just like they are with your web page. HTML based email does this. Does “Joe Public” really care how his HTML newsletter is rendered CSS or tables, no not really.

Lets just step outside the bubble for a minute or two.

Andy, nice summary, good to see the surfer dudes from Campaign Monitor getting a plug.

Nazim Beltran said on May 4, 2007 9:36 PM

yes…once again the dreaded request for an embedded so called “standard” embedded css/hmtl/whatever signature “aka” newsletter request…we are in the middle of doing one of these jiffy’s!! and I agree 100% wiith Andy…its not worth the effort…a link is a much better solution…but try to explain that to a client that is adamant on using such a solution…oh..yes call our IT consultant…what version of Outlook do we use…hmm…not sure on that…an endless nightmare…when you find yourself spending endless hours trying to figure out why Outlook Office decides to automate the process of recoding your clean CSS signature file…then you know you have reached email/css/signature nirvana…i cringe when our studio get’s these requests..also billing such issue’s is a nightmare (well…our IT guys says its quite simple…bla..bla..bla..)..

Michael Persson said on May 5, 2007 11:52 AM

There is a way of doing these email newsletters but there is a compromising way of delivering newsletter emails to Gmail, Yahoo or Hotmail that also works in Thunderbird and Encourage.

I have been successful in creating newsletter emails with Tables, and inline CSS direct coding,. It works fine and actually this is how it is recommended. The questions is, who do want HTML email newsletters. I personally throw them away as far as possible… i mean drag them to the GARBAGE…

In General clients want nice neat pretty styled and designer newsletter because they think its nice and they also think it looks the same everywhere… information is the solution but its not always working either… so maybe learning by not seeing is a way!!

Michael

Stéphane Deschamps said on May 8, 2007 9:02 PM

I’m surprised no one so far has mentioned the HTML email W3C workgroup that will take place in Paris at the end of May.

http://www.w3.org/2007/05/html-mail/

There may be something going on.