Marketing automation tip: scalable vs. responsive email design

Whether you write an e-newsletter for your business or promotional emails advertising products, designing email for mobile readers is no longer a question. Mobile is the new reality, and its ability to reach and influence consumers is growing.  According to the Litmus “Email Analytics” (June 2013) report, 44% of email is opened on a mobile device, and the Adobe “2013 Digital Publishing Report: Retail Apps & Buying Habits” notes, 71% of mobile purchasing decisions are most influenced by emails from companies.

Your current and potential customers are checking their mobile devices multiple times a day, scanning e-mails, and clicking links to purchase products.  Instead, of asking yourself whether to meet potential customers where they already are, the question to consider is, how can you best design emails to make reading and action easiest for your mobile customers? Scalable or responsive? Responsive or scalable? We’ll explore both to help you decide which technique is the right choice for your business.

Understanding the differences between scalable and responsive design 
We get it – mobile is super important, and it’s not going anywhere, but what the heck is responsive and scalable mobile design? Responsive and scalable e-mail designs are created with the screen size limitations of a smart phone and tablet in mind. There is less real estate available on a mobile device than your desktop computer, so designing one e-mail to be read on disparate screen sizes means one of your viewing experiences will suffer. By designing scalable or responsive emails, you improve your customers’ user experience. This can be tricky, as different mobile devices render emails differently. For example, a two-column email will stay two-columns whether you read it on a smart phone or desktop, but if it is opened on an iPhone, it will shrink to fit the smaller screen. If you open the same email on an Android device, it will only show the upper left hand corner of the email (sample below). To make matters worse, you are dealing with different operating systems and email programs on these devices, which can also affect the way your email renders. Never fear! We will guide the way.

Scalable Design
As the name implies, an email built following scalable design is easily read and clicked on regardless of the device used to open it.  How can you accommodate users on all these different devices? Think: larger text, larger call to action button, and minimal design and content clutter, so it is still easy to read and click buttons. A good scalable design e-mail will have a single column layout and a narrower width (below 500 pixels), so it is legible regardless of the screen size.

Responsive Design

To create a responsive design e-mail, you code the email to change layout and display based on the screen size. This means that a responsive design email could have slightly different content, text sizes, images, and colors, if it’s opened on a desktop, versus an iPhone, versus an Android device. On a mobile device, content might shift to one long column instead of several columns, and the navigation can change to suit both your key message and the viewer’s device. Responsive design takes a bit more effort, but will pay off if you already have a highly mobile audience.

An iPhone (left) shrinks e-mail content to fit screen size. Notice, you can still see the entire e-mail content, just on a smaller scale. Instead of resizing the content, an Android phone (right) displays the upper left hand corner of the e-mail and the user has to use their finger to scroll down and to the right.

Android iPhone Whereoware

The two samples below illustrate the differences between design techniques. The scalable JCrew email has a one column layout, larger text, and larger button making it easy to read and click through on any device.

The responsive design looks like a pretty normal email when viewed on a desktop. When viewed on a smaller screen, though, the responsive design e-mail content moves to a single column, eliminating all but the most essential information – the call to action and the value proposition. Paper Style included only the most important top navigation links to minimize clutter: Baby, Wedding, and Party links.

scalable vs responsvie design Whereoware

Scalable vs. responsive designs: which is right for your business?

A scalable design e-mail can be created quickly and is less expensive, since there is no additional coding or creative work involved. The downside to scalable design is that readers may still need to move around the screen to see each piece of content, and you can’t customize text or content specifically for a mobile device.

The biggest advantage of responsive design is its flexibility.  The responsive design email can be created as a separate layout from the one seen on a desktop, so you can deliver desktop or mobile specific content. Keep in mind, creating two distinct layouts means increased time to code the email and possibly develop creative images. Unless you have a significant portion of mobile email readers, you may not see a return on this investment.

Key considerations for mobile design:

  1. How are your emails read? Dig into your email analytics – if more than 50% of emails are read on a mobile device, it may be worthwhile to invest in responsive design.
  2. Is your website mobile friendly? Beautiful responsive design emails won’t matter if the reader clicks through to a website that is difficult to use.
  3. What’s the purpose of your email? For example, pretend you’re promoting a newly developed mobile application. A responsive design email will recognize if the reader is opening the email on a mobile device and can include a large call to action button linking them directly to the app store. Voila! They can download the application to their smart phone. A scalable design email would not be optimal in this instance, because the reader would be clicking to the app store from their desktop.
  4. Do you have the time and staff to create both scalable and responsive emails? If you have limited resources, choose to design only the most important emails using responsive techniques.

Remember, your customers are holding smart phones in one hand and tablets in the other.  Every step you take to make it easier for your customers to read your e-mails, access your site, and purchase your products or services, is a step in the right direction.