« Post Campaign Checklist for Email Marketers: | Main | First conviction by a jury under the CAN SPAM Act 2003 »
HTML Email Design Recommendations for 2007
Some of our readers recently sent us this link to a Sitepoint article:
http://www.sitepoint.com/blogs/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/
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.
January 17, 2007 in Tips, Tricks, Best Practices | Permalink
TrackBack
TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341d5a5053ef00d83431f93453ef
Listed below are links to weblogs that reference HTML Email Design Recommendations for 2007:
» Outlook 2007 and HTML email design: a summary from No man is an iland
...The general consensus is that the implications for email marketing are not huge... [Read More]
Tracked on Jan 18, 2007 12:23:20 PM
Comments
I think this is a pretty well thought out article. Lately i've found myself designing a lot of email templates for mass distribution and i have to say that this article cleared up a few things for me. I am happy that i still have access to DIVs but the lack of floats and positions totally blows big time. Hopefully this is something that is corrected because only having limited access to inline CSS sucks to say the least.
Luc
Posted by: Lucas | Jun 14, 2007 2:40:40 PM
