DI Emails Have Gone Responsive

Detailed Image Responsive Email

A recent newsletter in the Android email client and Gmail on the iPad

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.

Our Approach

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.

Test!?!?

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.

Resources

Here are a few of the resources that we found particularly helpful:

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.

4 comments on DI Emails Have Gone Responsive

  1. Tim says:

    Interesting post, I see myself embarking on this journey later this year as well :-( Not looking forward to it! Are you using any sort of email blast platform, like Mail Chimp or some other service or are you still doing this in house entirely, i.e. coming from your server(s)?

    • Adam McFarland says:

      We’re still doing everything in-house and I think we’ll continue to for the foreseeable future. Our custom platform gives us a really tight integration with our shopping cart, although some of the APIs from places like Mail Chimp are pretty good so I bet it would be possible to get that same integration. There’s also the cost factor – we send our Daily Special newsletter to a large list every day. A service like Mail Chimp would be $$$. Not that maintaining our own email server is super fun or easy, but it’s so much more cost effective that it’s worth doing.

      • Rob says:

        Are you able to do all the open and click tracking type things that Mailchimp allows by tracking pixel loads etc?

        • Adam McFarland says:

          Yup, it’s pretty full-featured. I wrote a post a few years back about the features http://www.adammcfarland.com/2012/10/11/our-custom-built-newsletter-system/ We haven’t added much to it since then, but within the next few months we’re planning on adding the ability to split-test and the ability to send more intelligent personalized emails. We have a list of about a dozen types of emails we want to send depending upon the customer and the situation. Cart abandonment being the most obvious ones with the biggest potential.

Leave a Reply

Your email address will not be published. Required fields are marked *

Commenting Rules

I'm honored that you found this post interesting enough to leave a comment. Before posting, I have a few ground rules:

  • Please keep your comments as relevant to the post as possible.
  • No personal attacks or any other nastiness.
  • Your first comment is subject to my approval.

Thanks!