Having just finished the most advanced responsive HTML email project I’ve worked on yet, I thought I’d share a few things I’ve picked up.
- Use the Zurb Ink mail framework: It’s restrictive, but it’s the fastest way to get good results in the majority of clients
- Start with the desktop. There are two reasons to do this. Firstly, desktop clients are the least capable mail clients. (if you have Outlook 2011, thank your lucky stars. It actually does a pretty good job). Secondly even on mobile, many people will get the desktop view. Many mobile clients can’t parse media queries, so your finely crafted mobile view gets thrown out.
- Outlook 2013 is your worst nightmare. It’s terrible. Test that first, worry about everything else next. Outlook 2007 is probably second worst of the most-used desktop clients. Remember people upgrade email clients pretty infrequently.
- Try and make your mobile view simply a collapsed version of your desktop view. Many designers are used to the flexibility of responsive design in the browser. For web pages, you can practically include two or three completely different designs. Mobile clients don’t have the space or the smarts.
- If your design requires you to hide an element, hide it for mobile. Campaign Monitor have detailed a supposedly effective method of hiding content for desktop and webmail clients. I’ve had limited success with it. The
.hide-for-smallclasses included with Ink work well, though. - Inline your CSS with MailChimp Lab’s Inliner. It seems to have a few more smarts around avoiding over-ridden classes. Just remember to uncheck the option to strip out the style tags, or you’ll lose your media queries.
- Test with Litmus. It’s expensive, slow, and suffers from frequent outages, but I don’t think there’s another option.
Update: The W3C have announced a community group for HTML email. It’s currently just a few days old, but looks promising. Their goal is to document the current state of HTML email and figure out a way to improve things. Hopefully client vendors and companies like Litmus, MailChimp and Campaign Monitor get involved!