The Responsive-Aware Approach: Optimized Design Effort With Great Gains

[ 0 By

Sometimes it seems like the choice in email design is responsive or nothing. But that’s not the case. There are several buckets of email design that vary in terms of mobile-friendliness, technical expertise needed, and production time requirements.

The 5 levels of mobile-friendly email design

5) Responsive email design: Email content and layout adjust to user’s screen size

4) Responsive-aware design: Headers and footers are responsive, while remaining body content is mobile-aware

3) Mobile-aware design: Single-column layout, large text and images, large and well-spaced buttons and links

2) Quasi–mobile-aware design: Header and footer are desktop-centric, while significant portions of the remaining body content are mobile-aware

1) Desktop-centric design: Multiple columns, small text and images, tightly clustered buttons and links

In the past few months, responsive email design has become the most popular email design approach, with 32% of B2C brands using it for their promotional emails as of June. Responsive design adoption has driven much of the gains in mobile-friendly email design use over the past two years, and there’s every reason to believe that it will remain dominant for some time.


However, it’s responsive-aware design that’s really caught my attention lately. As the name implies, it’s hybrid of responsive design and mobile-aware design. In most cases, brands will use responsive for their headers and footers, and mobile-aware for their primary content block and any secondary content blocks.

I’ve been tracking email design approaches since late 2013, but this is the first time I’ve broken responsive-aware out as distinct from responsive. While I don’t have historical data, currently about 9% of B2C brands use this approach for their promotional emails. And I suspect that we’ll see an increase in the months ahead.

This is a savvy approach to email design for a few reasons:

First, this approach uses responsive design in the portions of an email where the highest link densities and smallest text font sizes are found. Using responsive design to turn an 8-link desktop navigation bar into a much more tappable 3-link one for mobile, for instance, or converting a horizontal nav at the top of the desktop email into a vertical nav at the bottom of the mobile email makes the subscriber experience much better. And navigation bar links generally convert at a high rate, so ensuring that they’re easily tappable with a finger is smart business.

Second, header and footer coding is built into your templates, so once you convert them to responsive, all you need to do is periodically check them to make sure they’re current and optimized. The one-time investment you make in responsive headers and footers pays you dividends every time you send an email, making this a high-ROI move.

And third, if you’re not quite ready to go full-responsive because of your audience’s use of mobile isn’t quite high enough or you’re concerned about the added email production time, graduating to responsive-aware is a great intermediate step. You gain some experience with responsive and you make it a little easier to take the next step up.

What does responsive-aware look like?

In general, brands using responsive-aware design have their navigation bar horizontally at the top of their emails in the desktop rendering and have it vertically at the bottom of their emails in the mobile rendering.

Here’s a great example of this from a recent Banana Republic email:


Instead of moving the nav bar down, some brands used responsive to reduce the number of links in their horizontal nav at the top of the email, while others dropped their nav completely, which I wouldn’t recommend.

Nav bar links generally perform quite well, especially when you judge them by conversions. So be thoughtful in how you change them from desktop to mobile, and make sure that you thoroughly A/B test difficult options.

More on the 5 levels of mobile-friendly email design

For a discussion of all 5 levels of mobile-friendly email design, check out my latest Marketing Land column.


5 Responsive Templates

Optimize your emails for small screens with these 5 free responsive templates! They’ve been tested in Litmus and are completely bulletproof—they even work in Outlook!

Download Now