Creating Responsive Email Design: What to Watch Out For

Have you figured out how to reap the advantages responsive email design? To design for mobile you need to know what to watch out for.

Reading email on desktop is still a wide practice; however, industry reports show that the numbers of emails read on mobile devices and tablets continue to increase. Those increases drive the need to design for mobile and adapt email marketing efforts for the on-the-go crowd, making sure your email marketing campaigns don’t fall on deaf ears, or rather, on screens that can’t render them properly.

Responsive design is here to stay but not everyone has figured out how to reap the advantages of creating emails that display properly on different sized screens or within the mind-numbing hordes of email clients.

Here are some tips about what to watch out for.

What is Responsive Email Design?

Numerous industry statistics tell us how mobile use is catching up and in some cases surpassing desktop use for reading emails. You can do a quick internet search to see the stats for yourself. What kinds of emails are we concerned with? Ones from your cousin Vinny or your dear ole grandma?

First, What’s Our Context?

In a nutshell, responsive email design is a continuation of Responsive Web Design – a special approach that considers the requirements of all types of devices, including mobile, to display a website – or in this case – an email. The focus is on usability and creating an optimal viewing experience. This means it’s always a priority for your emails to look perfect, be easy to navigate, and generate responses. — A Closer Look at Responsive Email Design, Get Response Blog

Ah! So whenever the term “responsive” comes up with respect to email, we are almost always talking about content in the form of emails to blog subscribers, emails to customers, marketing and promotional emails to potential buyers, lead nurturing autoresponder series, follow-up emails to people who have registered for our courses or have joined our membership sites.

That’s our context. We’re not concerned with personal email (nor the predecessor, responsive web design). Note that sometimes the phrase is used interchangably with responsive mobile design.

All elements of the email will not display exactly the same but the most important elements will be seen and consumed without difficulty. In some instances, emails are not viewed in a client native to the device; instead, they may be viewed in a browser opened on the device. RED takes these varying circumstances into consideration.

Good-Looking Emails

In 2012 and 2013, BlueHornet (Digital River) surveyed over 1,000 mobile users around the U.S. then wrote an email marketing metrics report detailing how they use and how they feel about email marketing. A key, but unsurprising, result of their 2013 survey indicated: “Consumer sentiment around mobile coupons and purchasing from mobile emails is generally favorable. However, tolerance for poor mobile design or rendering is very low.”

As you can see, our context is transactional and marketing email. And consumers want those emails to look good.

Working With Different Email Clients

[W]hile the responsive zeitgeist has gathered steam, email design and development has struggled to keep pace. This is due, in part, to the fact that HTML emails are a notoriously tricky medium for developers to work with. Archaic email client technology and a lack of standards have rendered many of the rules of modern, semantic code useless.” — Jack Filose, How to design a responsive HTML email, 11 June 2013

There are so many options for viewing emails: mobile client, webmail client, desktop client and even native apps.

As I searched to see what

the experts were saying about the subject, I was surprised at comments where designers noted that there is an abundance of information about creating responsive emails for different devices but how little information is available about the hordes of email clients being accessed on the various devices.

This begs the question: “Why don’t ALL mobile app design efforts undertaken for the purpose of reading emails automatically incorporate HTML email best practices?” Puzzling, right?

Types of email clients and devices

These are some the many email clients most widely used today:

Desktop email clients

• AppleMail
• Outlook
• Thunderbird
• Sparrow
• Lotus Notes
• Windows Live Mail
• Windows Mail

Mobile email clients

• iPhone
• iPad
• Android
• Blackberry
• Windows Phone
• Kindle

Webmail clients

• GMail
• Outlook.com
• Yahoo! Mail
• AOL Mail

And just to mix it up a bit, and confuse the issue more, on some devices instead of using the native device app for email, mobile users opt to open a browser, then access their email in webmail.

So many options!

Something’s Monkeying Around With Your Emails!

aka Design for Mobile Still Unresponsive

Not all devices created equal, at least when it comes time to display — or not display — your carefully crafted emails … As mentioned by Jack Filose in the quote above, email is tricky to work with.

Even after you’ve given your best effort to creating emails that are responsive on mobile devices, you will find some instances where your hard work is ignored and some devices refuse to display your responsive emails.

Say what?!

 

Some devices don’t do responsive

It’s true: even if you use mobile friendly HTML, there are apps and mobile devices that still don’t support mobile responsive emails; Outlook 2007-2013 uses Microsoft Word as a rendering engine; and Gmail strips CSS in the email head. These actions, which you have no control over, render your responsive emails unresponsive.

So how do you get around that bit of misbehaving web anomaly?

Unfortunately there’s no way to get around this—what we recommend instead is layering a mobile first design that will look great everywhere with responsive elements for the apps/clients that will support it. —- (Justine replying to Hanna, Comments on Litmus Blog

Old and Feeble Phones and Clients

Your emails could be unresponsive because of the (up-to-date) technology you use — which is a requirement for ensuring so-called responsiveness.

“If you build your web page using well-formed, semantic HTML and progressive enhancement, your page will be accessible by many more browsers and devices than you can guarantee that it will work on. But sometimes a browser is so old and feeble that you simply can’t support it,” says authors Lyza Danger Gardner & Jason Grigsby in Head First Mobile Web.

This is probably the case with older cellphones and desktops still using browsers like IE6. (If you get calls from clients or subscribers who say they can’t view your email, and you ascertain it’s because of old phones or outdated browsers, be nice!)

Go Deeper … Resources

Want more? Here are some email marketing and responsive design resources to help you along the way.

Conclusion

With so many devices in use by consumers, designing responsive emails is increasingly important. Experts and data analysts agree that responsive emails enjoy greater open and response rates when they are brief with fast-loading images, have easy to click or tap buttons, sport short but personalized subject lines, and are attractive.

I’d love to hear your thoughts on #RED. (That’s the hashtag I’ve seen in use!) Have you adapted your email marketing for mobile? Are you including some or all of these elements in your responsive email design activities?