CSS support in email clients

First of all, I really don’t like receiving HTML email. I dislike it so much I have configured my email software (Apple Mail) to never display HTML email unless I specifically tell it to.

That said, sometimes I find myself in a position where I just have to create an HTML email newsletter. You know, client demands and all that. Sometimes you just have to do it. And since I’ve long forgotten how to use nested tables, presentational markup and spacer GIFs, I really need to use CSS to style those newsletters.

Unfortunately, many, many people use email software with outstandingly lousy support for CSS. A few examples of such email clients are Gmail, Lotus Notes, and Eudora. Other clients, like Thunderbird and Apple Mail, have excellent CSS support. A CSS support chart for email clients would come in handy, wouldn’t it?

It sure would. And while it does not include every single email client out there, the guide that the people at Campaign Monitor have put together is a good start. A Guide to CSS Support in Email details the level of support for CSS in the most widely used email clients. The guide includes email software for Windows and Mac OS as well as web based email clients.

The bottom line is that unless you know for certain what email software the recipients will be using to read your newsletter, you can save yourself (and the recipients) a lot of trouble by keeping it simple.

Come to think of it, keep it simple even if you know that the recipients all use email clients with top-notch support for CSS. The people who receive your newsletter will thank you.

Posted on April 12, 2006 in CSS, Quicklinks

Comments

  1. Oh how I could have used this last week! I have been up and down the net looking for a resource like this. Found a few good pages, but this is very helpful.

    Thank you.

  2. So, how do you do that ‘Apple Mail … never display HTML email’ magic then?

  3. I’m always surprised to find that many talented people are totally oblivious to this question, while still demanding HTML mails.

    Thanks for finding that detailed link! It will be put to good use.

  4. April 12, 2006 by Roger Johansson (Author comment)

    Ian: I can’t find the exact article that I found the info in, but Force Mail to go ‘old school’ should do.

  5. Wow, those results are even worse than I expected. Being lumped with Lotus Notes at work I would simply say it barely copes with its own proprietary formatting system, let alone a real tech like CSS - so no surprise there.

    Text email is still best. I’ve noticed companies finally making an effort and asking two questions: “can we email you? yes - html or text?”

  6. Thanks for this, it will be very useful when attempting to convince clients that HTML mail is evil: do you think customers would rather see a nicely formatted, easy to read plain text e-mail, or an HTML-based mail that suffers from the it-works-for-me-in-Outlook,-so-it-must-work-for-everyone syndrome, with inconsistent and sometimes disastrous results for many other users.

    I’ve done 2 html mails in the past 2 years (despite passing on my objections). The first used the style element, though I left the company before it was widely tested and never actually saw the results. The second used inline styles with the style attribute. Of course, it was all semantic HTML and so it really didn’t matter whether or not the styles were applied in either case.

  7. Hate to self promote but you may also find this useful - using CSS to ensure the best experience for your hotmail users

  8. Reasons why using html-mails: 1. Subcribers don´t opt out as much as with plain versions. 2. The conversion rate is higher. More clicks, more shopping.

  9. It makes me cringe everytime, but we built mailers with nested tables and inline styles, making sure that everything is kept within the table.

    The reasonning is that header information, and even the body tag, can get completely stripped. We find the method to work pretty well most of the time, and can make some nice mailers with it.

    I think I would personally prefer very simple mails to a decent looking, proper CSS, landing page though (or no eDM at all!!).

  10. Thanks for the link. I don’t typically send HTML emails, but you never know.

  11. To me, HTML email has too many flaws. I have seen WAY too many people butcher the emails themselves. What if I enable HTML but disable images? Sometimes the main point of the email is stored in an image by the sender. That defeats the purpose of the mailing.

    As with all emails I put together, I send multipart/alternative - which selects based on what the mailer can receive. Have a user that LOVES HTML? Built properly, this will display information to them. However, if this person chooses to turn OFF the HTML - they are shown a plain text (Formatted) version. I think asking the question ‘HTML OR TEXT’ is just as lame as only sending HTML. People’s preferences change, often.

    I havent read the above article yet, but I am very interested to see what it has to say in terms of CSS.

    Peace, Nate

  12. I collected few links when putting together my article some time ago, I added them to the CSS-D WiKi page.

  13. April 14, 2006 by Kristin Vågberg

    HTML mail is indeed ugly. To make them work in mail programs and web mail as gmail, hotmail I have a three “layer” approach. This is when the design is very important to the customer.

    1. Font elements with size and colors for gmail and other web mail´s that removes CSS.

    2. Headings for accessibility (together with nasty font elements.) And of course - trying to be as accessible as possible..

    3. CSS for nicer look in Outlook, hotmail and other mail programs that don´t throw it away. (Instead of inline style in elements, I put the CSS directly under the body tag - being nice to hotmail.)

    And of course - old school tables with blank gifs to hold everything togheter.

    I have used Campaign Monitor for a while and I love it: For the good user-interface, and for it is cheap and that it is also easy to test-send mails to check in all mail programs..

  14. April 18, 2006 by rashantha de silva

    i don’t understand why everyone complains above html email. the only accurate negative point is that it is slow for people with analog lines.

    most email clients don’t let you forward an html email. this is also very lame.

    people that complain about html email should also say lets get rid of html/css rich webpages and have plain text web pages.

    security issues of html email should be handled with spam filters emai should have the ability to contain a text message, and html message and thirdly a jpeg image.

    this way everyone has the best of both worlds. turn things off as you wish and allow the flexibility so we designers/advertisers can get the word.

    i love rich advertising email.

    i don’t like personal html email, because i consider email a valuable business tool.

  15. HTML can be useful if you need to send long URLs that may break on line wrap in plain text.

    On the other hand, HTML is more likely to fall foul of anti-spam engines.

  16. I also turn off HTML email in Thunderbird. It annoys me no end when the email is encoded properly so you get the HTML source of some email. It’s not difficult to send multi-part emails.

    But I’m in full agreement, HTML emails are the spawn of the devil. Unfortunately we have to use Outlook at work :(

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.