Designing for email, and feeling dirty because of it.

February 23rd, 2009

Back in my first Designing For Email post, I discussed workable dimensions and some common-sense techniques when you’re approaching designing for email. Most of that still holds true, but I’ve discovered an unpleasant lack of support in a few email clients for an important bit of CSS: floating, clearing, and margins. The lack of this one bit makes good design wholly in CSS nearly impossible. I’m officially peeved. What’s really weird is MS Outlook. Outlook 2003 supports floating just fine. Outlook 2007 does not. So what does this leave me with? Table-based design.

Yeah, I know. Seriously. After all this time when CSS has (finally!) become a standard method of layout. When people are finally getting the whole point of separation of concerns when it comes to content versus layout, and browsers are getting good support, and for the most part I can get my designs to be pretty consistent across browsers without much effort as long as I closely follow the rules… I’m having to retrofit my CSS-based layout into a table-based design.

As I was coming to grips with this I did a sanity check by looking through the last few months of my inbox and looking at the adverts (non-spam) I’d recieved. A quick look at the source confirmed that they were ALL table-based. Dang. And now the fellow across the hall is making fun of me. He knows how dirty I feel for having to violate standards to make something layout correctly. Oh well. For what it’s worth, I did stumble across the Email Standards Project, which is what confirmed that Outlook 2007 and Gmail (!) both lack support for floating/clearing. So, have fun dusting off the table-based design knowledge you’d accumulated and then happily buried when CSS finally became a viable alternative.