Responsive Email Design Guide

Editor’s note: Want to make sure your emails look good across all devices? Check out our email design guide for latest best practices and tips.

Introduction

The world is going mobile – no doubt about it. But whether you accept this, adapt your approach, and stay in the game is a different story.

To follow new market trends and cater to customer preferences, you need to acknowledge and comprehend the challenging new landscape we operate in. It’s essential to realize how tech-savvy consumers function and how to leverage this to benefit your business.

In this paper, we’ll explain the importance of this phenomenon and show you how to make changes to your email marketing program, so you can stay ahead of the game and make the most out of this unstoppable change – the mobile revolution.

So let’s cut to the chase and answer one simple question:

Where exactly are we now?

By the end of this year, there will be more mobile devices on earth than people (Cisco 2013). And not just any kind of mobile devices, it’s mainly smartphones – with access to applications, videos, pictures and Internet – that are increasing their coverage fastest.

In the U.S., 56% of adults now own a smartphone. Compare this to last year’s statistic – 46% in February 2012 – which represents an astonishing 21.7% increase, with no signs of hitting a plateau. More important, this year-to-year growth in smartphone ownership has happened in each of the major demographic groups, including the somewhat more reluctant seniors (Pew Internet & Life Project, 2013).

With market penetration of more than 50% on all mobile devices, a clear leader has arisen. Android has taken the lead in terms of data usage and the number of handsets on its operating system. As reported by Nielsen for Q2 2013, Android owned 52% of the U.S. market share, while Apple was second with 40%.

It’s not only the number of devices or the operating system that are changing the landscape but also how consumers use them.

In 2012, global mobile data traffic grew 70%. More than 50% of the total data usage was due to mobile video traffic (Cisco 2013). In line with these findings, another study suggests that by 2014, mobile Internet should take over desktop Internet.

If this isn’t enough, mobile now accounts for 12% of Americans’ media-consumption time – triple its share in 2009 (Digiday 2013). On average, Americans spend 2.7 hours per day socializing on their mobile device. That’s over twice the amount of time they spend eating, and over one-third of the time they spend sleeping.

In addition, mobile-commerce spending reached $4.7 billion in Q2 2013, a growth rate of 24% over the previous year. With the expected seasonal surge in Q4 spending, it’s believed m-commerce will reach an astonishing $25 billion for the year.

While mobile devices have been extremely influential in the overall buying process, they are also beginning to drive a significant percentage of digital commerce, according to recent studies.

As comScore suggests, one out of every ten consumer e-commerce dollars is now spent using either a smartphone or a tablet, and growth in this segment of the market is outpacing that of traditional e-commerce by a factor of 2, (and e-commerce itself is growing at rates in the mid-teens).

Email marketers should take note that in 2011 82% of smartphone users were already checking and sending email with mobile devices (Google: The Mobile Movement, 2011). In line with these findings, a 2013 study by GetResponse found that 41% of all emails are opened on a mobile device.

Needless to say, this mobile revolution is of key importance to marketers. So if you want to generate sales, it’s essential to make sure your website, landing pages and emails look good on mobile devices.

In fact, studies show that 42% of all emails are deleted if they don’t display correctly on smartphones. So you may be missing out on a big share of potential revenue by failing to optimize your emails for mobile devices.

It may seem obvious that the mobile revolution is a fact. But eConsultancy found that only 25% of marketers optimize their emails for mobile.

It’s essential to make your brand experience easier and more pleasant for your customers. It has to be easy to read your emails, surf your website, and purchase your product or service. Failure to adjust these elements may reduce your sales. More important, it may diminish your brand image.

Now that consumers use mobile devices to spend leisure time, read emails and books, and make purchases, any business that wants to stay in the game needs to take mobile devices into consideration and provide an even better experience for their customers.

Since all market reports and forecasts clearly indicate that mobile will continue to grow and shift the landscape, it’s essential to look into your own business and make the appropriate changes to your email marketing program.

Popularity of mobile among your Customers

The mobile approach to marketing is important in every field of communication.

Reports reveal important information about the state of the mobile market. We know the popularity of mobile devices compared to past years, how many smartphone users there are, which mobile devices have the largest share of users, and the number of emails opened by various operating systems, whether mobile or desktop email clients.

It’s easy to acknowledge theory. So let’s focus on practice and find out how to put the data to work in the world of mobile emails.

How to find out where emails are opened

Large organizations such as Return Path have extensive tools that run various tests to create reports that can be found on the Internet.

You might say: Yeah, but those are big organizations; such programs are expensive, and I don’t know how to implement them into my system.

The truth is, you don’t need to spend a lot of money on custom programs and tools that deliver big data about your subscribers or hire a team of programmers to handle a costly development project.

GetResponse Email Analytics provides insights about where subscribers open your messages.

It let’s you:

View the percentage of desktop opens versus mobile.

Below the overall statistics, see the breakdowns showing where the selected email was opened on various devices and email clients.

So if you’re a GetResponse user, just start using this feature and adjust your email marketing practices to your audience preferences.

The behavior of mobile-active subscribers

You’re probably wondering what happens after a subscriber opens the message on their mobile device. Does this mean they won’t open the message again on desktop? No. The fact that a subscriber opens an email on a mobile device doesn’t mean they won’t open it again on their desktops.

That’s why – Responsive Email Design is so important!

How to send mobile-friendly emails

Now that you’ve decided to adjust for mobile devices and avoid the risk that 42% of your emails will be deleted, you need to choose the best way to communicate with your mobile readers through email.

The main three methods most marketers choose are:

• URL link to “Open this email on a mobile device”
• Segmentation based on history of opens
• Responsive Email Design

The first popular method is to place an “Open this email on a mobile device” URL in the preheader section of your newsletter. The link typically opens a new tab in the browser and takes the reader to a separate web page where a mobile-optimized version of the email is displayed. This approach isn’t ideal for a couple of reasons.

First, the first impression has already been made. Your reader has seen the above-the-fold part of your newsletter, which has not been optimized for mobile devices. Not only did it look bad, it also required extra effort for the reader to access your message. This certainly would affect your conversion, as it’s often hard enough to persuade the subscribers to scroll down the email, let alone to open up a new browser tab.

Second, we’ve already agreed that it’s essential to make the email experience effortless and pleasant, especially for the most loyal subscribers. Now that you’ve gotten them to open your email in the browser, should they really be punished further by being redirected back to the email client to read the rest of the communication? The answer is no.

Another popular method is to segment your subscribers by their history of email-opens.

There are a couple of obvious pitfalls.

First, although subscribers prefer mobile, they do open emails on different devices throughout the day. While mobile phones are most frequently used upon waking up and while commuting home after work, laptops and PCs are still commonly used throughout the day. On top of that, subscribers often switch between laptops and mobile phones when surfing the web or reading emails, depending on whether they are at their desk or on the sofa.

Second, subscribers often reopen emails on laptops or desktops after previewing them on a mobile device. So if you capture the reader’s attention, then lose it because of a badly designed newsletter, it could affect your brand image adversely and would be a waste of resources.

The best approach is Responsive Email Design. It allows you to send your emails to various devices without worrying about rendering problems.

What exactly is Responsive Email Design?

In a nutshell, it’s a continuation of Responsive Web Design – an approach that adjusts for the requirements of all types of devices, including mobile, to display a website or 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.

Responsive Email Design is an answer to all of the problems of the previously mentioned methods for several reasons.

You send only one email design to all subscribers, with no worries about the device the newsletter is viewed on.

You create a great first impression for everyone, with an attractive, eye-catching and appealing header section.

Since Responsive Emails display well on all devices, subscribers can reopen them on laptop or desktop, if they are more comfortable making a purchase there.

Since no additional browser tabs are needed, and CTAs are adjusted for the size of the readers’ fingers, the experience becomes enjoyable rather than frustrating – no need to pinch or resize the email to read it, just scroll down.

This sounds great in theory. But to make sure your Responsive Emails are effective, follow these 10+1 commandments for Responsive Email Design.

One design for all

Your design should work on all major devices your readers might use, even if they switch from one to another. Make sure your email looks great at full resolution and at half size. Be smart about what goes inside your email, what is highlighted, and that functions are easy to access.

Main offer at the top

Mobile content is typically displayed in stacked blocks, and screen size limits the amount of information that can be viewed without scrolling. So place the main offer at the very top left corner of your email to catch the attention of readers who skim.

Invite the reader to scroll down

Even though you place the main offer at the top, you want subscribers to view everything. So mention what’s hidden below the fold: a special offer, discount code or an answer to an important issue. This is a great tactic for keeping subscribers interested and engaged.

Be concise

Instead of forcing readers to scroll, prepare a design that’s concise and to-the-point. It keeps them interested and shows that you value their time. Single column, narrow email designs work best for mobile devices, so take this into consideration!

CTAs

Make sure calls-to-action are easy to click. Don’t expect readers to pinch or resize the screen to access your content. Clickable areas should be approximately 44 x 44 px (minimum 29 x 44 px) to allow for easy navigation.

Padding and spacing

Include extra breathing room between CTAs to make clicking easier. Add 10-20 px of extra space around clickable areas to keep from frustrating mobile subscribers!

Copy and fonts

Reading emails on the go is different from reading while seated and in full focus. Wording should be concise and powerful, for the short focus of mobile readers. Some like to skim your email before deciding whether to read it, so highlight important points. Use larger fonts than usual, so subscribers don’t need to pinch to read; try 14 px for regular text and 22 px for headlines.

Images

Double-check how images display on mobile. Images typically stretch to fill the entire screen of the device, so with different screen resolutions your hero shot may look poor to say the least. Make sure image quality is optimal so you don’t create the opposite effect intended. A picture is worth a thousand words, so even the greatest offer is doomed if the photos look bad.

Landing page

Don’t rest just yet! The point of most emails is to get readers to click-through to your website or landing page. What would be the point of Responsive Email Design if it leads to a landing page that doesn’t look good on mobile devices? More and more, consumers like to make purchasing decisions while on the go. So eliminate flash animations, reduce the loading time, and focus on easy finger-navigation to keep those conversions high!

Test, test, test!

Knowing the Responsive Email Design commandments is just a first step. Apply the rules and see how your design displays on mobile devices before you launch a new campaign. If it looks good and is easy to navigate even on mobile, try testing different approaches and observe how your subscribers react. Try to find an optimal design that fits your customers’ preferences.

Which devices can you design for?

Not all of the rules above are supported by all mobile email clients. Native email clients behave differently from those offered on download regardless of the operating system. This table shows media query support on various devices.

Responsive Email Design in GetResponse Email Creator

With GetResponse Email Creator you don’t have to worry about coding and media queries to make your emails look good on any device. Why? Because anything you create with GetResponse Email Creator turns out great on mobile devices.

It’s the first solution of its kind on the market.

So lean back and enjoy designing your newsletters as always. Everything else is automatic. In fact, you can switch on Mobile Preview and see how every change you make to your template displays on mobile devices.

No coding. No tech. It just works.

Responsive Email Design Lookbook

Here are some examples of Responsive Emails. We recommend that you plan, design and send your emails, newsletters, and autoresponders in a mobile-friendly format that looks beautiful on every type of device your subscribers may use.

How Responsive Email Design affects ROI

Now you understand how mobile devices are shaping the landscape we operate in. And you’ve learned the rules to follow when designing Responsive Emails.

Whether you’ve already made the decision or are still weighing the options, it’s equally important to learn about the effectiveness of Responsive Email and its influence on ROI.

Here are the main reasons why you should implement Responsive Email:

Improved user experience

Your readers can access your emails while they’re on the go. They can easily navigate without having to pinch, resize or scroll sideways to get the message. With bigger and better-spaced CTAs, they know where to click to make the purchase without worrying about imprecise clicking. If you’ve captured their interest, they can read the rest of the emails and return to your email on a different device.

Better conversion metrics

If your emails and landing pages follow the responsive design rules, low conversion rates due to faulty design rendering on mobile devices are a thing of the past. By matching how you sell your products or services with how your subscribers shop, you can get orders regardless of where your readers currently are. Whether they are on the move or seated relaxed on the sofa, you are always ready!

Bigger sales

Now that you’ve captured the reader’s interest, does he or she prefer not to make the purchase on a mobile phone but rather on a laptop or desktop? That’s great! Responsive Email looks great on all devices. If your readers prefer to make the purchase decision while seated and relaxed, you’re likely to sell even more. You made a great first impression and can then show a wider offer!

Lower unsubscribe and complaint rates

As we said before, 42% of all emails are deleted if they don’t display well on mobile devices. So if you created a great first impression and avoided frustrating your readers, there’s no need to worry about high unsubscribe or complaint rates.

Measuring the effectiveness of Responsive Email

If you’ve already introduced Responsive Email to your email marketing campaigns, you probably have observed changes in the level of subscriber engagement.

It’s useful to have access to metrics prior to the change, to determine whether the transition was carried out properly. Take a look at your open rates, click-thru rates, unsubscribe rates, complaint rates and, most important, conversion rates.

If the change in the numbers isn’t evident yet, take a closer look at subscribers who open your emails with mobile devices. The experience of these readers should be vastly improved (especially if they are using Android OS). This should result in increased conversion rates and ROI, provided your offer was as good as before.

Is this enough to persuade you to optimize your emails for mobile devices? If not, take a look at the data below.

Return Path reports that emails generate twice as many conversions as search or social. And studies of average order value by device show a higher order value on mobile phones and tablets.