Jan 17, 2007

HTML Email Design Recommendations for 2007

Some of our readers recently sent us this link to a Sitepoint article:


It’s basically all about how Microsoft Outlook 2007 is changing its email rendering engine from Internet Explorer (which rendered HTML email really nicely, since it was a browser) to Microsoft Word (which is a steaming pile of turd in the minds of most web designers).

It’s a great article with lots of good points. But frankly, nothing’s really changed…

The article’s main concern is that it’s a step backwards for web developers. We were presumably on our way to full CSS support in HTML email, thanks to the efforts of Mozilla Thunderbird and IE7. Things were looking up for a while. Cool, right? Then Microsoft drops this bomb on us:

  • no support for background images (HTML or CSS)
  • no support for forms
  • no support for Flash, or other plugins
  • no support for CSS floats
  • no support for replacing bullets with images in unordered lists
  • no support for CSS positioning
  • no support for animated GIFs

Well, that kinda stuff has never been very reliable in HTML email anyways. We’ve always recommended against it. And to be honest with you, at the risk of sounding like an old fart, I’m really not so sure I’d want support for Flash in my email program. I love Flash websites as much as the next guy (I’m hooked on DesignFlood), but c’mon—not in my emails, please.

One of our readers, Kevin from Pivot+Levy, did point out that according to the MSDN article at the Microsoft website, the switch to Microsoft Word would lose support for  ALT tags. So if people have their images turned off by default in their email programs, you won’t be able to write enticing little alt-text for your images to convince them to turn images on. Which is why you always want to link to an online, archived version of every campaign you send (we just launched that feature, btw).

Anyways, the whole Outlook 2007 thing is nothing to lose sleep over.

I’ll tell you what is, though…

Browser-based Email Services

We recently had to re-program all our HTML email templates because so many people are switching from desktop email programs (like Outlook and Thunderbird) to browser-based ones (like Yahoo!Mail, Gmail, AOL Webmail, .Mac, ). Why are people switching? Those services are getting easier and easier to use. And thanks to all their cool AJAX technology, their interfaces give you almost the same instant feedback as desktop programs. The problem is that most of the browser-based email services we’ve encountered are starting to drop support for embedded CSS.

Who cares about floating DIVs and CSS-positioning.

But c’mon, you’re stripping embedded CSS? That’s just cruel.

If you’ve been coding HTML email long enough, you’ve learned by now that linked CSS files don’t work so well (even if you use absolute paths). So what do we use instead? Embedded CSS. Even then, we’ve learned that browser-based email programs tend to strip out the <HEAD> code in our HTML email (we think because your CSS could theoretically override theirs), so we all learned to move our embedded CSS below the <BODY> tag. It made us feel kinda "dirty" when we coded that way, but it worked.

Now, browser-based email programs appear to be totally stripping out any embedded CSS, no matter where we put it.

That means we’re down to using inline CSS.

For the record, at MailChimp we still use a little embedded CSS in our templates, but only for superficial stuff (like link colors). If it’s critical, we use inline CSS (or good old-fashioned <font> tags).

Don’t Forget Mobile Devices
I know what you crafty web designers are thinking right now. But before you try to figure out some kind of rig to deal with all the browser-based email programs so that you can keep using your fancy code, you’ve still got to deal with the fact that more and more people are switching to mobile devices. And the only thing that works for those recipients is plain-text, pretty much. In terms of mobile devices, rendering isn’t the only problem. When people just forward email from their corporate servers to their Blackberry or Cingular mobile email accounts, authentication complications arise (we’re seeing more and more of these kinds of errors in bouncebacks).

So What To Do?

Because of all this, some people have predicted 2007 to be a year of "email rendering" issues. Maybe you’ll want to subscribe to those services where you can preview what your email will look like in every email program. ReturnPath and Pivotal Veracity have some solutions for you.

Or, just embrace simplicity.

What’s wrong with simplifying our HTML email designs? Why not worry about the message more than the wrapper? Form follows function, right?

In 2007, we’re going to start seeing more and more HTML emails that look like this.