I just got a call from a client, a web designer, whose boss told him he's now in charge of starting up the company's HTML E-mail marketing campaign, and had no idea where to start. He asked, "I can just copy and paste HTML code into a new Mail message and send that, right?"
It felt like hearing your kid look up at you with their big brown eyes and ask, "Mommy, Santa Claus is real, right?"
I spent some time with him breaking it down, pulling liberally from my DesignGeek article about "CSS in HTML E-mail:"
But I had written that story over a year ago. There's been some big news since then, and some new tools as well. Let me catch you up.
Microsoft's Own Time Machine
Anyone who has been creating HTML e-mails for a while is aware of the Great Tragedy Of 2007: Microsoft's decision to rely on Word's HTML engine, rather than Internet Explorer's, to interpret and render HTML e-mails in Outlook 2007. Since Outlook is used by the vast majority of Windows users, and Word is far dumber than IE when it comes to HTML, it was a crippling blow to designers everywhere.
The grim details were best expressed in Campaign Monitor staffer David
Greiner's blog post back in January, shortly before Outlook 2007 was
publicly released, "Microsoft Takes Email Design Back 5 Years:"
Check it out … over 450 comments and counting.
The gist of the debacle is that to ensure your HTML E-mail renders satisfactorily in Outlook 2007, forget about anything beyond kindegarten-level CSS. It's tables, tables, tables baby.
David has updated his CSS in E-Mail chart to include what's supported
and what's not in Outlook 2007, the new Yahoo! mail, and Windows Live
Mail. Here's the link to the PDF version of the chart (90K):
Quality reading can be found in his more recent "state of the state"
blog post, "A Guide to CSS Support in E-mail: 2007 Edition," where he
discusses his chart in more detail:
While investigating this topic, I came across two services that will help ensure your HTML e-mails will render properly in most e-mail programs, both local and web-based.
The first is a free service called Premailer (actually, it's a little Ruby program that a developer wrote as a service to humanity). It will parse any web page — presumably this would be the web page containing your HTML E-mail under development — into a page of e-mail-ready HTML.
What that means is that among other things, Premailer converts relative links to absolute ones, and while it leaves CSS declarations in the header intact, it also applies them in-line, since most web-based e-mail services like Gmail and Yahoo! ignore header code.
You can optionally have it generate a Plain Text version of the URL you feed it. For plain text, Premailer does things like add lines of hyphens or asterisks above and below H1 paragraphs (sort of like what I do here), and adds the full URL (in brackets) after every link.
The other service is called the Inbox Inspector, from HTML E-mail service provider, MailChimp. You don't need to be a MailChimp customer to use it (even if you are one you'll still have to add it separately to your account).
Here's what it does. Paste your HTML into the web-based Inbox Inspector, and MailChimp will show you detailed screen shots of how that e-mail will appear in 16 different e-mail programs — AOL, Gmail, Outlook (including v2007), Eudora, Apple Mail, Yahoo! and so on.
It also analyzes the HTML for typos and broken links, but more importantly, Inbox Inspector runs it through a SpamFilter Check. This results in a report listing how likely your e-mail will be caught in the major spam-catcher nets out there, and explains why, so you can modify the code before you send it for realies.
Inbox Inspector can be purchased for $39.00 for three separate Inspector reports. Use this service toward the end of the HTML development process, as an actual HTML E-mail preflight tool, and it'll pay off big-time.
MailChimp Inbox Inspector