Responsive design aint just for web browsers. With users reading email on more and more devices, it has become increasingly important to send responsive email newsletters. The problem is that it’s a total pain in the ass. However difficult responsive web design is – and it is plenty difficult – email is many magnitudes harder. Think IE8 is hard? Try designing for Outlook. Each webmail client has it’s own list of things that it strips out and/or doesn’t support, and each looks slightly different in every browser. It’s freaking maddening.
We recently launched responsive email across the board for Detailed Image. Not only does this apply to newsletters like the example above, but it also applies to regular communications like order confirmations and tracking notifications. We have big plans for advancing the complexity of our email targeting, but first we had to bring the template up to modern standards so that every email looks good for everyone who opens it, regardless of device, browser, or email client.
Irrespective of future plans, this project was a huge deal for us. Simply changing our newsletter to being responsive has the chance to increase conversions substantially. Newsletters are big revenue generators. Mobile is a huge segment of our audience. When customers view their newsletter on their phone – as they’re increasingly doing – we needed to make it as easy as possible to consume.
After doing a lot of research, and knowing how difficult the responsive design was on the website, we decided to keep it simple. All of our emails are single-column designs. A good simple example is the newsletter in the image above, which can also be viewed on the web in all it’s responsive glory.
Even with our simple approach, testing was daunting. Mike and I spent a full day together testing and tweaking what we thought were our finished designs. To narrow the tests down to a sane number, we did exactly what we do with browser testing: study our audience and then test anything substantial. Our customer base is (unsurprisingly) very Gmail-heavy so our main focus was there. Gmail on the web, iOS, and Android. We also tested AOL, Hotmail/Outlook.com, and Yahoo on the web, along with several clients: Outlook, Thunderbird, Android Email, and iOS Mail (on both an iPhone and iPad). 100% exhaustive? No. But representative of the majority of our audience, and still probably looks OK on everything we didn’t test? Yes.
The biggest pains were Gmail, which strips out an unfair amount of CSS, and Outlook, which renders HTML like it’s IE6. We had to use some Outlook conditional statements to make the newsletter render even close to properly. Ugh.
Here are a few of the resources that we found particularly helpful:
- From Monitor To Mobile: Optimizing Email Newsletters With CSS – Smashing Magazine
- Responsive Email Design – Campaign Monitor
- Responsive Email Support Chart – STYLECampaign
Responsive email is quite a bit behind responsive web design, but it is possible, and certainly worth considering if a large portion of your audience reads their email on mobile devices. You just need some patience…and a few beers afterward.