Responsive design: creative and code collide to give email a mobile edge

It is no surprise that mobile usage has significantly jumped over the past year. In fact, according to a recent study by Litmus Email Analytics, mobile email opens have increased by 138 percent within the last 18 months, and each month those numbers continue the rise. However, the study also shows that while mobile opens have surpassed desktop with the iPhone holding 23 percent of the email market share, Outlook still follows with a crucial 16 percent. The statistics clearly indicate that although it is more important than ever for marketers to optimize their emails for mobile, neglecting desktop could have a serious, detrimental business impact.

What marketers need to do is find ways to effectively optimize emails for both desktop and mobile environments. So, what is the best solution to accomplish this? Thankfully there are a multiple options available, and the right direction for your brand will depend on a variety of factors, such as:

  • Type of email
  • Frequency
  • Business objective
  • Mobile audience

However, as the focus of this article, I would like to highlight one particular approach that has grown to be more and more of a viable option. This approach is called responsive design.

optimize emails for mobile devicesWhat exactly is responsive design and how can it be leveraged to optimize emails for mobile devices? Well, the term responsive design was coined a few years ago and derived from the idea of creating a responsive Website that would adapt based on the size of the screen used to view the content. Essentially, this would only involve the creation of one unified site, as opposed to creating an entirely separate version of the site for mobile.

This tactic can be similarly applied to email. Although emails cannot support all the coding involved in a responsive site, it is possible to create HTML email layouts that adapt for different devices and screen sizes. For example, by rearranging the email content or restricting the amount of content shown on a smaller device, a recipient can open an email on a large monitor or a small device and always view the optimal version. Moreover, implementing responsive layouts can also greatly reduce the production time on the marketers end.

Here are a few key features of responsive design and basic examples of what you can do with it:

  1. Change the layout of your email: Many two column emails viewed on a small screen will scale content to a small size. Rearranging the content into a single column will create more space, making the email easier to read and interact with.
    Change the layout of your email
  2. Control your copy and hide some content: Removing content from the mobile version of the email can give important information a more prominent position. In the example below, the hero image has been hidden and some copy has been enlarged to help the mobile user focus more on the messaging.
    Control your copy and hide some content
  3. Make small links easier to tap: It’s easier to tap a large button than press on a small text link. The footer navigation in the example below would get lost on a mobile device, but by making it larger and easier to touch, the user experience is improved.
    Make small links easier to tap

Things to bear in mind:

Mobile OpensResponsive CSS email design will work on iPhones, Androids, Windows phones and newer Blackberrys, as well as iPads and most other tablets. Conversely, some versions of Android and non-native email apps (i.e. the Gmail & Yahoo! apps) will not support it. However, it is important to note that out of all email opens, iOS covers about 80+ percent and Android about 19 percent (see chart). As OS updates are happening more frequently and older platforms are phasing out, overall compatibility for responsive emails continues to increase.

To conclude, utilizing responsive design is most effective within a set template. Designing a layout that works in both mobile and desktop environments is important and, by establishing this upfront, you can remove the need to recode templates from scratch each time. In addition, since this approach does go beyond standard HTML coding, extra production time is needed along with extensive QA.

Key takeaways:

  • Mobile opens continue to rise with a 138% increase over the last 18 months
  • iPhones continue to dominate the market share – passing Outlook – While Android continues to climb
  • iOS and Android control most of the mobile opens and should have no difficulty rendering the responsive design approach – two key holdouts are the Web apps for Gmail and Yahoo!, which still don’t support responsive CSS email design, but will show the desktop version
  • Key features of responsive design allow you to hide content, stack it and control system text
  • If considering optimizing with responsive design, it’s best to utilize the approach with a set template, removing the need to constantly recode and test

Visit our Website to learn more about responsive design and the range of template options Experian Marketing Services can provide to help you layout an effective and unique responsive email. Or, contact us for more information.


About Marketing Forward

Marketing Forward is more than a name, it’s a quest. Through data-driven insights, news articles and thought pieces, our experts share their perspectives on the latest marketing and consumer trends, keeping you informed and inspired to think differently and push your marketing strategy forward.

Latest Tweets