CSS Support in Email

Tweet

Not long ago, Alex spent some time researching the CSS secrets of Lotus Notes to help get the HTML versions of our email newsletters to display properly in that client. But in the wild and wooly world of HTML email, Lotus Notes is only the worst offender on death row. There are plenty of other badly-behaved email clients out there, and most of them aren’t as considerate as Eudora (which simply doesn’t support CSS at all).

Over at the Campaign Monitor blog, David Greiner has posted a complete guide to CSS support in all the popular email clients, both desktop and web based.

This guide will save you a ton of time, even if all it does is convince you that CSS in email is a lost cause.

Consider: if you want to avoid applying style attributes to your HTML tags, you’ll have to sacrifice support for GMail entirely, and you’ll need to use both a <style> tag in the <body> to support the web email clients and a <link> tag in the <head> to support Lotus Notes.

Sound ridiculous? Tip of the iceberg, I’m afraid…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jason Batten

    Yeah I have been working with HTML emails recently. Done around 5 of them. I feel dirty for using the tag, so very dirty. I’ve not been using any CSS as to avoid errors but it is really difficult using pure HTML.

  • http://www.lowter.com charmedlover

    My main problem is with the web based clients. They constantly apply their own markup to the newsletter. Hotmail and Yahoo! seem to be the worst at this.

    Personally, I think when it comes to displaying HTML emails companies should just adopt one of the popularing rendering engines. Outlook uses IE (which is an improvement I would say) and Opera uses Presto (its rending engine). I would assume Thunderbird uses Gecko as well.

  • Clenard

    Very cool, thanks Kevin! :)

  • http://www.domedia.org/ junjun

    I Didn’t know of Greiners article, surely a god send for those of us that has to deal with these issues on a regular basis. Just found out by trial and error about the Gmail limitation (just recently took gmail into consideration).

  • warjockey

    I use tag soup for html emails and in the end noone can even see pictures. But at least they look more sylish and structured.

    I also use dreamweaver to help me because it takes a bit of time to code it up and get stuff to align. Tables are the devil.

  • Anonymous

    What seems to be the problem? Aren’t tables of any use anymore? Isn’t this only because ‘we just want to use CSS’, while we actually could do without when it comes to emails? Correct me if I’m wrong please…

  • Kisan

    I am in the midst of doing HTML in e-mails which are mailed to users using Lotus Notes, HotMail, Gmail, Outlook Express and Yahoo.

    Lotus notes is the most difficult one to handle which is used by my client to whom I am designing these e-mails. I am using Tables, inline style sheets plus adding font tags for Lotus Notes. This one refuses to read style sheets.

  • http://www.ebslive.com sabret00the

    What seems to be the problem? Aren’t tables of any use anymore? Isn’t this only because ‘we just want to use CSS’, while we actually could do without when it comes to emails? Correct me if I’m wrong please…

    it’s about future-proofing your code.

  • Dave Greiner

    Hey guys,

    We’ve written about the best approach to designing emails with CSS here, and also included a template you can tweak yourself. Another one you might find useful is our recent email design guidelines which covers designing for images being turned off, preview panes and a few other useful bits.

    It’s definitely possible to code a semantic, CSS based email that looks perfect in most email environments and degrades gracefully to a nicely formatted rich text version in those environments with less CSS support (I’m looking at you Gmail and Hotmail). It all depends on what kind of consistency you or your client demands I guess.

  • http://www.calcResult.co.uk omnicity

    sabreTooth: would you like to expand a little on that remark?

    I know that there are loads of essays out there about accessibility of web pages, but surely not every rule applies to emails, and therefore not every bad practice on the web is bad in an email?

  • Tom

    Tables are a designers dream. I don’t see what all the fuss is about CSS. Tables are far superior for vertical postioning.

    DIV’s are annoying.