How to Use Responsive Email Design to Optimize Your ROI

Do you know how many of your subscribers use mobile devices to read your emails? Probably a significant portion of your email list, given the trends among mobile users today. If your email design isn’t optimized for mobile, the poor user experience is likely having a negative impact on your response rates and return on investment (ROI). In this month’s feature, we talk about responsive email design and how it can be used to improve your subscribers’ mobile user experience.

What Is Responsive Design?

Responsive design is an email or web landing page that is optimized for the screen or platform it’s being viewed on. In other words, whether you’re viewing an email on a 27-inch desktop computer or on a smartphone, you’ll have an optimal viewing experience and comparable functionality.

Why Is Responsive Email Design So Important Today?

More and more people are using mobile devices to check their email and browse the Internet. Today more than four in 10 adults in the United States own a smartphone, for example, while about one in five owns a tablet. Here are some recent mobile statistics that support why designing email campaigns with your mobile subscribers in mind is vital for your ROI:

• 34% of consumers check their email on a mobile device at least once a day, as reported in e-Dialog’s “2011 Email Attitudes Report: Email Relevance and the Proliferation of Mobile Email Use.”
• Merkle’s study — “View from the Digital Inbox 2011” — showed that 55% of people with Internet-enabled mobile phones use them to check their personal email accounts. Plus, 43% of people who use mobile email check their email four or more times each day.
• According to Knotice’s Mobile Emails Open Report for the first half of 2012, 25.85% of all emails are opened on mobile phones and 10.16% on tablets. This included 19.71% of emails opened on an iPhone; 9.63% on an iPad; 5.88%, Android phone; 0.43%, Android tablet; 0.06%, Windows; 0.04%, Palm; and 0.02%, Blackberry.

7 Mobile-Friendly Design Tips

There are some simple steps you can take to help make your emails easy to read and respond to for your mobile subscribers. Here are seven top mobile-friendly design tips:

1. Design for touch screens. Keep in mind that mobile subscribers are using their thumbs and fingers to select links, rather than a mouse. In addition to spacing out links so they’re not accidently tapped, be sure the calls to action are large — a minimum of 44 by 44 pixels. Plus, navigation bars and advanced search bars are typically not effective in emails designed for mobile devices.
2. Make the message clear, as well as quick and easy to read. Many of your subscribers using mobile devices are “on the go.” So be sure your copy gets to the point in as few words as possible. Plus, keep the key information of your message — including the call to action — near the top and to the left, so mobile users don’t need to scroll down or over to see it.
3. Keep the important subject line content within the first 35 characters for mobile displays, while preheaders should take fewer than 80 characters to convey the main marketing message.
4. Create single-column designs. Plus, primary content should be contained in widths between 320 to 500 pixels for mobile devices.
5. Keep headline text at a minimum of 22 pixels and body copy at 16 pixels to help ensure readability of emails on mobile devices.
6. Reduce the number and size of images. Images can take a long time to download — or not download at all — and their quality is often degraded for many mobile users. So if an image isn’t integral to your marketing message, don’t include it.
7. Don’t forget the landing page. Once mobile users click through the email to your website, be sure your landing page is optimized for mobile, as well, to help drive more conversions.

Coding for Responsive Email Design

In addition to these design tips, the coding of the email or landing page is also critical to delivering a customized experience for mobile subscribers. The use of CSS Media Queries (an extension of the @media rule) in the coding lets the layout of the email or web page adapt to the device and screen size it’s being viewed on. In basic terms, this type of coding sets the page element sizing in relative units, such as percentages, rather than pixels. This means grids and images are “fluid” and won’t display beyond the width of the browser and screen that the code is being read on.

It’s important to keep in mind that not all mobile devices support responsive design techniques in the same way. That’s why you should test your email and landing page designs across a variety of platforms. The iPhone and other Apple iOS devices support media queries, for example, while Gmail and Yahoo! mobile applications don’t. For a good source of information about responsive design coding, check out software company Campaign Monitor’s Responsive Email Design Guide.

Although responsive email design may end up adding a little extra time to your design budget, you’ll see that the greatly improved user experience for your mobile subscribers will drive more conversions and ultimately increase your overall ROI.

Are your email campaigns achieving the best results for all your prospects and customers regardless of whether they’re reading your emails on desktops or mobile devices? The experts FulcrumTech can help you use responsive email design to get the most of your email-marketing campaigns. Email us or give us a call at 215-489-9336 and get started today!