Embracing responsive design in email marketing.

(The following blog entry was originally posted on Blogger on 05/17/14)

One of the items that suddenly appeared on every senior marketers "action items" list this year is Responsive Design. For those of you who don't know what it is, it's a relatively recent change in the way digital content is displayed on your device. In the old days (as in, mid-2000s), one size/format fit all, sort of. Then came adaptive design, which reflowed the content of a site or banner ad depending on the size of the device on which it was viewed. Now, we're moving into a yet another new phase: Responsive Design. Meaning, digital content will query your device and respond to its screen display dimensions. If you'd prefer to watch a video on this topic rather than read through this blog, please visit STYLECampaign's brilliant tutorial on responsive email design. It's about 2 hours long, but worth every minute.

Back to the story. Some of our clients aren't bothering to address this Responsive Design issue and others are. The steady rise in the use of smartphones and tablets suggests that marketers (and their agencies and design firms) need to promote to these devices in a new way. And because there are so many different screen sizes and resolutions now available to professionals and consumers, deploying ads and emails to those devices has required a new approach. And when I say "new", I mean using technology that's been around for 3-4 years. Plus, marketers are becoming aware that you have a very narrow window of opportunity with consumers. So if they see your ad or email, they should be able to read it clearly, see the offer and calls-to-action, and then tap to a point of sale.

There's a longer historical narrative here in terms of email apps and how they evolved over time, but don't worry, I won't bore you with all that minutia. Suffice it to say that over the past 20 years or so, email apps have been able to grow and mature. They went from being able to display text only, to the full display capabilities of a Web browser. This evolution in growth and functionality has carried forward into the mobile device world as well, and apps like Apple Mail (which I use every day on my Mac, iPhone and iPad) and Android devices' native mail apps are requiring us designers to up our game. Add to that the higher resolution of devices and tablets that have hit stores in the past 2-3 years, and we have a bit of a problem: ad banners, emails and other graphical content looked like crap on high-def devices. This is because most graphics are optimized for lower-res (72 pip) desktop monitors.

When it comes to email design for example, the workflow in our shop had been relatively simple for many years. The rule of thumb was to limit the fixed width of your email design to something like 540 to 600 pixels, and use graphics that were 72 ppi. Body copy fonts could be 10pt or 12pt, and that would look fine on desktop mail. But the high-def displays that began with the release of the Retina Display on the iPhone 4 (and subsequently on the iPad, MacBook Pro, and then a lot of other manufacturers' devices), 72 ppi graphics looked blurry. And 10pt or 12pt text was way too small to read.

So now we have two interconnected issues: we have emails whose graphics looked poor/blurry on a smartphone and/or tablet, text that's now too small to read, and email formats that aren't fluid across all devices. If more and more consumers are reading emails on their computers during working hours, on smart phones in between destinations, and on tablets at night, then marketers are risking losing that consumer if their email promotion is impossible to read or view. Enter the role of responsive design.

What responsive design can offer marketers is the ability to "sniff out" the device you're on with a media query. I'm not a coder so I can't tell you exactly what the CSS code is, but basically the CSS that's embedded inline in the code will perform a media query. It's a series of "if, then" statements that determine your device's platform and screen size, and then adjusts the content accordingly. This allows marketers to tailor the experience to your device, and make it easier to read. For example, an email with a 2-column layout on your desktop can reflow/reformat itself into a single column when viewed on your mobile phone. Given the smaller screen size of your phone, a responsive design approach can serve larger headlines, body text, buttons and navigational elements, as well as branding elements. And this is all done in 1 single email creative. It's a win-win.

However, designers have to be aware that their graphics can't be 72ppi anymore. We've begun implementing a workflow that requires graphic assets of an email become 2x larger than what's shown in our Photoshop layouts. That will guarantee they'll be crisp on a high-res device. Another recommendation is to use as much HTML-generated content as you can, since it's device independent, and will be high-res not matter what it's viewed on.

You may be wondering how we QA test across the dizzying array of devices out there. The first level of testing is to simply deploy the email through a service like MailChimp, and view it on as many devices you can get your hands on, literally. We can test iPhones and Android (between our shop and our coding group), and their related native mail apps. We can also test standalone apps like Yahoo! Mail, Gmail, Hotmail and AOL Mail. We use Litmus, which is a browser-based service that will emulate many of the available email apps, and it even displays your email on a simulated picture of the device it's on. Once you subscribe to Litmus, you deploy your email (from say MailChimp) directly to a Litmus email address that's provided for testing, and it will show you how your creative holds up onscreen in a series of contact sheets. Litmus doesn't emulate every single app on the market, but it's way easier and faster than trying to view your creative by hand on a bunch of different devices, and via 4 or 5 different email apps on each device.

The only perceived negative side to the Responsive Design approach is the price tag. Responsive Design requires a lot more coding up front than a typical fixed-width email design. Marketers will have to weigh the extra cost of Responsive Design and potentially higher consumer response rates vs. the lower cost of fixed-width design and poorer response rates. And as direct mail becomes more expensive (and as the future of the USPS becomes more tenuous and uncertain), marketers are most likely going to increase spending on direct response emails. Responsive Design is probably going to play a more prominent role in the future of email marketing. And if my creative efforts look great no matter which device is on, I'm a happy creative director.

So be sure to view that tutorial video I mentioned at the beginning. It's super informative, and the lab environment they've built at STYLECampaign to do the hands-on device testing is really impressive. I hope this has helped someone out there do better work. Good luck!