Welcome (back) to the HTML tables age!…

Diego Massanti — Sat, 12 Jan 2008 09:06:47 +0000

Office 2007 is a great suite of productivity applications, Microsoft Word has been for years my word processing application of choice, same goes for Microsoft Excel when it comes to spreadsheets, and… until some days ago, Microsoft Outlook (not Outlook Express) has been my email application of choice.
Not anymore.
Some days ago i was hired to design and code a series of newsletters for an Argentinian magazine, and even the fact that email marketing / newsletter design is not my main job, i decided to do it because, after all, it is just (x)HTML and CSS, so it should be pretty simple I though… well, i was really, but really wrong.

Round 1 – The CSS deal.

The first thing that you will realize when designing a newsletter with beautifully written HTML and CSS is that 90% of email clients (being them applications or web clients) will just totally strip out your CSS. In some cases like Hotmail or Windows “Live” mail, you can just fix that by including your css inside the element, but still, some other clients like gMail will just ignore it, and all your design goes to hell. Period.
So in order to “fix” that problem, i had to use “Inline CSS” (!!!) and all my beautifully written code became just a bunch of crap, with things like this:

But ok, you can’t expect each and every email client out there to fully support each and every thing, so i was OK with that… at least until the moment when i decided to test my code in Microsoft’s flagship email client “Outlook 2007″. OH MY….

Round 2 – The “I don’t care about standards” deal.

It took a lot of time and effort to educate web designers / developers out there so they write proper code for their pages; code that is semantically correct, code that doesn’t use tables for anything but showing tabular data, and code that is based on Cascade Style Sheets (CSS) when it comes to the visual part of this story.
All this being said, we were in a position where you could write a really good looking HTML newsletter, without using tables, almost totally CSS based, and you could be really confident about the fact that it would render ok in most email clients, or, at least “acceptable” in the worst case scenario (uhmmm… gMail? somebody).
It used to be like this, ’til a new player joined the game: Outlook 2007.

Round 3 – Let’s use this joke…. ermm Render Engine.

The development team in charge of giving us all the new Outlook version had a great idea: Instead of using IE7′s (which is pretty decent, ironically) engine to render the HTML view of emails, let’s use the Microsoft Word HTML rendering engine.
I dont really know the reasoning behind this. Outlook 2000, Outlook XP and Outlook 2003 all used Internet Explorer to render the HTML view of email messages, why change now to that CRAPPY engine.
In any case and to sum up all this, right now Outlook 2007 does not supports 2 of the most indispensable CSS properties: “Float” and “Position”, and without these 2 properties, even thinking about a table-less CSS design is impossible if you want your Outlook 2007 users to see your newsletter with proper formatting.

Ideas, solutions, workarounds ?

I wish i had one, but i don’t. Right now i think that the only solution so far is to go back 6 years in time and “start” designing newsletters with TABLES again, that, if you care about people using Outlook 2007 to read their emails. If you don’t care about them, then just converting your CSS to Inline CSS would be enough.

Visual comparison between different email clients