Welcome (back) to the HTML tables age!…

Microsoft Outlook 2007 IconOffice 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 <body> 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

Below is a visual comparison between different email clients showing the exact same newsletter which is HTML / CSS based, without the use of tables for positioning.
Click on each link if you want to see a screenshot of each application doing the HTML rendering:
Outlook Express 6 on Windows 98: Even good old OE6 does a better job!
Yahoo Mail: Just perfect!
Thunderbird: Just perfect!
Microsoft Office Outlook 2007, just HORRIBLE, i really have no words for this. A shame.
gMail, doing a good job on rendering, but still needs improvement.

2 Responses to “Welcome (back) to the HTML tables age!…”

  1. Do we really need all flashy CSS in Emails? Personaly, i hate flashy “marketing mail” as is. I just convert it to plain text to make it readable.

    Give a link to the newsletter, if I want to read it I will. I just don’t buy all this email marketing (spam) stuff.

    by Armand, January 15th, 2008 at 12:06 pm

  2. Well, i think you are missing the main topic of this post. Im not discussing here if it is ethically correct (or not) to send html newsletters, the whole post deals with the fact that outlook became a piece of crap and the intention is to help other designers facing my same problem.
    In my case, what i am designing is not even close to “spam” as you called it.
    Plain text newsletters have a purpose, and i love them sometimes, but there is also a purpose and a place for html newsletters. and i love them too.

    by Diego Massanti, January 15th, 2008 at 2:39 pm