Responsive Email Design

Executive Summary

  •  If your emails are not optimized for mobile and tablet devices, you could be missing out on reaching a large portion of your customer base. One way to combat this would be to take a Responsive Email Design approach which caters to multiple screen sizes.
  • Responsive Email Design uses strings of code that tell the email client how to render the incoming email.
  • Try to tease the offer or message above the fold so that openers get a preview of what is being offered
  • Web teams must learn to work cross-functionally
  • Companies who are looking to utilize responsive email templates must set aside budget as part of their marketing plan
  • Less costly methods that take elements of responsive design into account do exist.
  • To measure the impact of the responsive email, A/B test the creative against a non-responsive email.

Background on Mobile Email Opens

Over the last two years, desktop email opens have dropped 44%. This means if your emails are not optimized for mobile and tablet devices, you are missing out on a large portion of consumer reach. Most recently, Return Path reported that 43% of emails sent are being opened on a mobile device and Mobile Marketing Association is predicting that by 2015, 54% of emails will be opened on a mobile device.

Yet, according to the 2014 “State of Marketing”, ExactTarget states that despite growing mobile adoption, when asked how often they use mobile Responsive Email Design in emails, 42% of survey respondents said rarely or never. This leaves a huge opportunity for the creation of more optimized emails.

Responsive Email Design Template Overview

Responsive Email Design uses CSS3 “@media” tags, which are strings of code that tell the email client how to render the incoming email. A responsive email template allows email marketers to brilliantly adjust the layout, content, and text of an email to render on a specific screen size. This template also gives marketers the ease of manipulating images, swapping them out on different email clients, shifting them, or completely disabling them.

Non-responsive emails create a poor user experience due to:

  • Fonts and buttons that are not legible
  • Horizontal layouts which reduce the size of the creative
  • Buttons that are not finger friendly which make it hard to click
  • Unused space due to the switch from rendering on desktop vs. mobile

How to Design an Email Creative with Responsive in Mind

Before considering Responsive Email Design you must know your audience. Find out who is opening your emails. This is the first step to creating a successful email design that will improve mobile readability and conversions. One simple way to do this is by pulling stats on mobile opens. The opens should be reviewed to see if the majority of your subscribers are opening on mobile devices or tablets. If so, an email which uses Responsive Email Design will help to maximize readability and click through rates.

Know your folds: Different mobile devices have different folds. For example, desktop is sized to fold at 600×500, whereas iPhone is at 320×260, followed by Android at 300×250.

A great way to design with all three in mind is to try to tease the offer or message above the fold so that people can understand what is being offered without having to thumb through the entire email.

Many clients like Android mobile disable images by default; this is why it is important to design a responsive email that has a balance between text & imagery. Subscribers are going to spend about 2 seconds with every email, so make your design and copy impactful enough to make them want to continue reading. Avoid too many images or too much copy. A well-balanced email will keep the subscriber reading even if the images are not displayed.

Brands who seek to make the leap into Responsive Email Design should work with agencies that have the above design, copy, technical and email expertise to construct such emails. Agencies should have a dedicated web division in which content, design and technical teams work in synergy.

This concept brings all team members into play earlier in the conceptual phase and keeps them active throughout, moving the whole vision forward instead of just small parts that may not work together. Building cross-disciplinary teams can also be a great benefit to the work environment as employees will probably pick up another skill or diversify their knowledge of other agency offerings. When hiring candidates to work on the web team, Human Resources has to find people who are willing to learn other skills in addition to those listed on the job description. Without this synergy responsive emails often become cluttered with unusable content and a mediocre user experience.

Responsive Email Design Examples

Below are examples of emails that were designed using responsive codes including the Call of Duty emails that Rosetta designed and implemented. As illustrated, the emails break and render differently on the desktop vs the mobile devices.







Cost of Implementing Responsive Email Design

Companies who are looking to utilize these types of templates must set aside budget as part of their marketing plan. This cost threshold may deter companies from spending money on the expensive template. Since responsive design is one template adapted for multiple needs, these templates could cost up to 20% more than non-responsive emails; however when designing non-responsive emails, multiple templates will be needed in the end making it more expensive to go with the non-responsive email.

Other moderately expensive methods such as scalable design and mobile first design exist. Scalable design is easier to execute as it does not rely on media query support. This type of layout is readable and clickable no matter which environment it is being read in. Scalable design resizes the email without restacking and organizing images and text. Mobile first design utilizes one layout that renders just as well on a small mobile screen as it does on your desktop monitor. This is achieved by using a single column design along with elements such as buttons on the left side that allow users to “tap” with their thumbs when viewing on mobile.

The more cost effective methods, Econsultancy reports, are responsive email templates that are either free or cost no more than $18. Services such as Aqua and Email on Acid offer these templates. When utilizing these templates it should be noted that these take your email design into account and create 3 templates from that design. These templates then trigger based on the screen size. So whereas a traditional Responsive Email Design uses one adaptive design, this method is activated from the best guess on the screen size and may cause rendering problems on newer devices.

Impact of Responsive Email Design

The best way to test the impact of the responsive email is to A/B test the creative against a non-responsive email. This test would look to see if click-through, click-to-open and the conversion rates increase on the responsive email versions. To date, the industry has seen the iPhones engagement metrics having lifted upward of 15.63% for responsive versions.

Key Takeaways

  • By 2015, 54% of emails will be opened on a mobile device
  • Pull your openers stats to see if a large population is opening on mobile. If so, recommend responsive
  • Responsive Email Design allows us to adjust images, logos, and layouts to the proper scale based on the device a subscriber is viewing the email on
  • Know the folds and make sure to balance the text to image ratio when designing
  • Moderately priced methods such as scalable and mobile first designs, which take responsive elements into consideration, do exist
  • The most cost effective methods are responsive emails templates that are either free or cost no more than $18
  • Test! To understand the impact of responsive vs. non-responsive. Make sure to compare click-through, click-to-open and the conversion rates to see if they increase on the responsive versions


Leave a Comment