Why responsive email design is more important than ever

_This post is brought to you by GetResponse.

_

The numbers speak for themselves: 47% of emails are now opened on mobile devices, according to a study of over 250 million opens worldwide by email analytics providers Litmus. That statistic speaks volumes not only about mobile device adoption, but also about how comfortable we’ve become consuming email on the go.

It’s only natural then that users expect email to evolve and accommodate their needs when interacting with smaller screens and touch interfaces, just as websites have with responsive designs. Developers and designers have already begun forging the path towards better experiences for mobile email users, and marketers are beginning to see the light: a new era of responsive email design is upon us.

Whether you craft emails to promote your company’s products or design email blasts for clients, it’s worth noting that while most mobile email clients today can scale emails down to fit smaller device screens, that often results in messages that are hard to read, and ultimately ignored. Plus, many users delete emails that don’t look good on mobile devices. With responsive email design, you can ensure an optimal experience across platforms and devices, resulting in greater impact with your messages and higher ROI on your marketing efforts.

Responsive email design: A primer

So exactly what does responsive email design entail? Essentially, it’s a set of techniques and principles applied to email design that includes media queries, fluid layouts and images, and customized copy making for emails suitable for both desktops and mobile devices. While traditional emails generally feature fixed-width frameworks, multiple images and paragraphs of text, responsive emails adapt to the device viewport size and display content accordingly, often skipping elements like blocks of text to allow touchscreen users to read and respond calls to action quickly.

Responsive techniques allow designers to hide, stack, expand/collapse or modify content to optimize content display in emails on smaller screens. So if, for example, you have three short paragraphs in your email, you could hide those paragraphs and instead display a shorter message and a call-to-action on a mobile device — thus allowing the user to engage with your email on the move, with ease. Of course, this takes more than just clever HTML/CSS code: content plays a big part in crafting a memorable and effective responsive email that makes do with concise, yet to-the-point messaging.

Responsive design also includes simple considerations to make emails easier for mobile users to consume, such as large buttons for easy tapping, layouts that follow a hierarchy for content so they work even without image display enabled, and hiding unnecessary content and navigation. In effect, designing with these guidelines in mind also encourages clearer messaging and simpler layouts that don’t seem tedious on a smartphone.

Unfortunately, there isn’t yet a lot of literature available online as to the technical possibilities of responsive emails, and most designers working on them today have to test their templates often on a variety of devices and clients to ensure everything is in its right place. Still, there are a few basic things you can do to get started on the right track:

Design — and write — for mobile first

“Designing emails for a mobile screen forces you to be ruthless with your content and aesthetic and makes you get to the point faster,” says Tom Boates, VP of User Experience at RunKeeper. Cut down on content that is not key to achieving the main goal of the exercise, and focus on action-oriented copy to better utilize your users’ time. Doing so will also make for simpler and cleaner desktop and mobile versions, and probably convert better as a result.

Respect touch-based interface guidelines

Ensure that your mobile-optimized emails follow prescribed guidelines to aid reading and interaction on touchscreens, such as sizing buttons and fonts. Increased usability means that users will feel more comfortable taking action directed by your email.

It doesn’t end with the email

Says Boates, “The reason you create a responsive email is to create the best experience possible for the user around that email… but if the experience you want them to click through to isn’t optimized as well, you’re only solving half the problem.”

Creating a consistently usable experience even beyond the email is crucial to making conversions happen. Whether you’re displaying detailed information on your site, or drawing users to a landing page, ensure that the destination is optimized for mobile viewing; taking care of little details, like pasting a coupon code advertised in your email into a web form on a target page, also goes a long way.

Code for performance and test for compatibility

Building a quality responsive email requires a nuanced understanding of how HTML and CSS work, and clean code is the order of the day. Boates shares an example wherein poorly coded CSS used to hide images could still result in a user’s phone downloading the unnecessary images, hogging bandwidth and slowing down the user in the process.

Amit Das, a UX Designer at Fab, points out that responsive layouts aren’t yet supported on many popular mobile platforms and clients, including Windows Phone 8, and Yahoo! and Gmail on both iOS and Android. He recommends extensive testing across devices to not only look at how your layouts successfully adapt, but also to ensure that they do not break in clients that don’t support responsive emails.

Though it’s still very much in its early days, many companies have already gone responsive with their emails, including Gilt, Monster, Vodafone and Twitter. Plus, many email marketing service providers now offer responsive templates for use in campaigns. Says Das, “I’m happy and impressed to see that lots of e-commerce companies and service/product companies have recently adopted responsive emails. We’re seeing an overwhelming rate of growth in mobile users engaging with e-commerce brands on mobiles, and it becomes our responsibility as web professionals to cater to users’ needs.”

“Designing responsive emails is a different skill set than doing responsive websites, due to the lack of standards and poor handling of emails across clients and platforms,” says North West England-based designer Ryan Downie. That’s the unfortunate truth, but we can hope that as research and innovation in responsive design advances, email software will improve support for these methods and display rich content uniformly across devices. The future of email is indeed responsive, and we’d do well to adapt quickly.

Image credits: PAUL J. RICHARDS/AFP/Getty Images, Thinkstock