Responsive Design: Beautiful Email Everywhere

responsive700


Introduction

If you use a mobile phone to read email, you know how inconsistent the experience can be. If emails aren’t optimised for mobile screens, they can come out looking terrible; tiny fonts, un-clickable buttons and images that force everything into weird places.

Luckily, there are a number of ways that you can make sure your email looks good on mobile devices. You can take the easy route, designing one email that looks good in all environments, or you can take the harder route: creating truly responsive email templates that serve the right version for the specific device your subscriber uses to open your email.

Why is Responsive Design Important?DevicesChart

Mobile is huge. Statistics released in September 2013 show that across the board 48% of emails are opened on mobile platforms. That’s an increase of 10% since September 2012. People absolutely want to read email on their mobile devices. If this trend continues, mobile devices will pass the 50% mark by the end of 2013.

What’s more, if an email doesn’t look good on a mobile device, a whopping 80% of people will delete it without reading it. Your message doesn’t only get deleted though, 30% of consumers will also unsubscribe from a newsletter if it looks bad on their mobile device2.

Due to the high adoption rate of mobile email and the response people have to ugly email, it’s really important that you make sure your emails look good on mobile devices. Fortunately, designing emails that look good on desktop and mobile devices is possible.

In the following sections we’ll cover what responsive email is, how it works and how you can implement it in your own newsletters.

What Makes a Great Mobile Mail?

There are a few things that make mobile emails a pleasure to read. The list below sums up the basic techniques that you can use to create great mobile email.

Enlarge fonts Bigger is better when it comes to fonts for mobile devices. Best practice is to have body copy set to 14px and headings of 22+px.iOS devices have a minimum size of 13px and will automatically scale any smaller fonts.
Use the right scale Most mobile operating systems won’t automatically resize your email to fit the device.  If your email is too wide, users will have to scroll to try and read it.Try and keep your emails to 320–550px wide.
Call To Action (CTA) Your CTA must be prominent and easy to tap. Place it upfront and in the centre of the page, and make the button at least 44x44px.
Simplify your design Mobile screens are small. Keep your design simple to avoid cluttering the available space.
Images Make sure you balance your images with plenty of HTML text. Mobile operating systems very often block images by default (only iOS doesn’t do this), so make sure your email looks good even when the images are blocked.Clever use of alt text on images can reduce the harmful effects of image blocking.
Be concise You don’t have a lot of space in mobile emails, so make sure you cut out any unnecessary images, text or links.
Layout When designing email for mobile screens use a single-column layout. This is much more mobile-friendly than multiple-column layouts.
Click here! You need to clearly show that links and buttons are clickable. Use shadows, outlines and other effects to clearly indicate which parts of your design are clickable.Also, try and avoid using the word ‘click’. Mobile users don’t have a mouse to click with.
Fat fingers The mouse is dead, long live the finger. But fingers are big, and buttons are small. When designing email for mobile, make your buttons big, increase font sizes and line spacing, and use more white space to allow your email to breathe.
Ergonomics Optimise your design for single-handed use. Many mobile users use one hand to browse on their device. Keep all your buttons and links in easy reach.

Different Approaches to Responsive Design

The term ‘responsive design’ has become a catch-all phrase for what is, actually, a variety of different approaches to making sure email looks good in many environments. These approaches vary in complexity and you should carefully consider which approach is best for you.

We’ll look at three main approaches to mobile email design:

  1. Mobile-aware email
  2. Scalable email design
  3. Responsive design

Mobile Aware Email

The mobile-aware approach allows you to make a mobile-friendly visual email framework without having to create different versions of the email for different devices. Mobile-aware email design doesn’t require ninja design skills and, because you design one template to look good on all devices, is a lot quicker to implement.

Mobile-aware email design is based on simple improvements to a single design that’ll look good in any environment.

Key elements of the mobile-aware approach include:

  • Single-column design
  • Key info and call-to-action (CTA) in upper left of email
  • Larger text
  • Touch-friendly buttons
  • Key subject line info in the first 35 characters
  • Preheader shorter than 80 characters
  • Preview pane optimisation: Include email intro and primary CTA

Scalable Email Design

A scalable email is one that looks great when reduced to fit on a mobile screen, with its smaller resolution. As with mobile-aware email, you only need to design one version of the email and it scales to suit the reading environment.

Scalable design requires more sophisticated design skills than mobile-aware does.

Key elements of the scalable approach include:

  • A grid system for alignment and proportion
  • A single-column layout
  • Larger fonts (14px minimum)
  • Touch-friendly buttons
  • Key info and CTA in upper left of email

Responsive Design

For truly responsive email design, you need to use CSS3 @media queries to auto-adjust the layout and size of content and text in your email. You also need to design two different versions of each email, one version for desktop and one for mobile emails. Because of the nature of responsive email design, a deeper knowledge of coding is required.

There are three key elements in a responsive email design:

  1. Flexible, grid-based layouts
  2. Flexible images and media
  3. Media queries

Unfortunately, not all mobile clients support media queries. This table, from Style Campaign’s chart of compatibility, shows which clients support CSS media queries:

iPhone native Yes
iPhone mailbox app Yes
iPhone Gmail app No
iPhone Sparrow app Yes
iPhone Evomail app Yes
iPhone Boxer app Yes
iPhone Yahoo! Mail app No
iPhone Outlook app Yes
iPad native client Yes
iPad Birdseye Mail Yes
iPad Incredimail Yes
iPod Touch native Yes
Android 2.1 Eclair native client No
Android 2.2 Froyo native client Yes
Android 2.3 Gingerbread native client Yes
Android 4.0 Ice Creme Sandwich native client Yes
Android 4.1, 4.2 + 4.3 Jelly bean native client Yes
Android 4.4 KitKat Yes
Inbox Gmail (Android and iOS) No
Android Outlook Exchange via native client No
Android Outlook.com app (including Hotmail) Yes
Android Gmail app No
Android Yahoo Mail app 1.4.6 & 2.0 No
Microsoft Surface tablet (Outlook.com/Hotmail) Yes
Windows Mobile 6.1 No
Windows Phone 7 No
Windows Phone 7.5 (Mango) Yes
Windows Phone 8 No
BlackBerry OS 5 No
BlackBerry OS 7 Yes
BlackBerry Z10 Yes
Palm webOS 4.5 Yes
Original Kindle Fire + HD (New vr. of Silk) native client Yes
Good.com Mail app Yes
Sony PlayStation Vita game console (Gmail) Yes

Fluid Grids

Just like water filling a glass, email needs to conform to the size of the screen it’s being viewed on. One way to do this is to design the email using a fluid grid. What this entails is defining a maximum width for the design and dividing it into a grid with a certain number of columns. These columns are assigned a certain percentage of the screen width, and elements of the design adjust their height and width to suit the proportions of the screen.

Different elements in your design can spread over more than one column, and this will be maintained when rendering on various screens.

Fluid Grid

A six-column grid with elements using varying percentages of the full width

Designing a fluid grid from the ground up can be daunting, but there are many templates and grid generators available. The following links can help you get started more easily:

These grid frameworks come with advanced features and will have been tested across multiple platforms.

Fluid grids are integral to both scalable and responsive email design, and go a long way to helping you make your email look good on any device.

Are People Using Responsive Email Design?

Despite the rapid move to reading email on mobile devices, very few companies are updating their email to meet this change in the market. According to eConsultancy, 71% of marketers have a basic or non-existent strategy for optimising their email for mobile.

Should You Design Responsive Email?

Every business is different, and consumer behaviour in one industry may not apply to you. Before you start designing emails for mobile, spend some time looking at how your customers are reading your email. If you have more than 10% of your opens on mobile devices, it’s a good idea to start looking at some form of responsive email design.

Case studies show that designing emails to look good on mobile devices can have a significant impact on opens, reads and clicks. Let’s look at a few of these case studies to see how other companies are approaching mobile email, and what results they’re getting.

Emails sent to this list should definitely be designed with mobile in mind.

Emails sent to this list should definitely be designed with mobile in mind.

Case Studies

Case Study 1: Crocs

Recently, DEG Digital redesigned marketing emails for Crocs. They went from traditional desktop layout to a true responsive design.

Before

This image shows the traditional desktop email design as viewed on a desktop and mobile device.

CrocsBefore

After

This image shows the re-designed, responsive email in desktop and mobile clients.

CrocsAfter

Results

Based on an A/B split test with group A receiving a responsive email and group B receiving a static desktop version (similar to the ‘After’ image above), the following results emerged:

  • Responsive showed a click-to-open-rate 7.66% higher than desktop
  • iPhone ‘read’ engagement had a 15.63% increase for the responsive version over the desktop version
  • Mobile ‘read’ engagement had an 8.82% increase for the responsive version over the desktop version
  • Revenue on the mobile site was consistent for both versions
  • Revenue on the site was lower for the responsive version

(Litmus defines ‘read’ as a subscriber engaging with your message for more than 10 seconds[9]).

Case Study 2: The Fetch

When events newsletter, The Fetch, switched to a responsive email design they noticed a marked decrease in unsubscribe numbers and were flooded with positive comments from their subscribers.

Before

The original design of The Fetch has a two-column layout with many links to upcoming events. This link storm can be very intimidating and unsightly for mobile users.

TheFetchBefore

After

The desktop version retains its two-column look, while the mobile version is cleaner and less intimidating.

 

Final desktop vs. mobile versions.

Final desktop vs. mobile versions.

Results

In addition to the decrease in unsubscribes, The Fetch also noticed an increase in mobile shares and forwards for their responsive email design.

Code Samples

Responsive email design uses a @media query which comprises a set of CSS styles that act as dynamic rules for presenting email content.

The @media query detects the screen size of a device and activates different rules based on that information. These rules apply to all aspects of the design, from fonts to navigation layout.

This is the entire code; we’ll go through each segment in detail below:

CSSCode

The Query

With responsive emails, media types determine which styles to use based on the size of the screen the email will be viewed on.

This is an example of a @media query:

MediaQuery

This example states ’If the email is viewed on a screen 480px or narrower then use the following CSS’.

The Styles

Responsive email uses styles as ‘if-then’ statements which are triggered when a specific screen size is detected (less than 480px in this example).

Change Navigation

This style moves navigation items to their own row, which spans the entire width of the table.

CSSStyle1

Enlarge Fonts

This style enlarges fonts within the “body-header” table cells to 18px.

CSSStyle2

 Change Colours

Any fonts within the “body-copy” table cell will be displayed as colour #dddddd.

CSSStyle3

 Add Padding

This style adds padding to table cells within the “body” class.

CSSStyle4

Change or Hide Content

You can use the display property to hide table cells on certain screen sizes.

CSSSTyle5

The HTML

Having set the styles in the CSS rule block, you must reference these rules in the HTML in order for them to be applied.

For example, the element (td) and the class (”body-header”) used in the CSS must be the same as those used in the HTML. The HTML in this example has been reduced for illustration purposes.

CSSHTMLref

Remember to test your email design on a variety of devices before you send it to your subscribers.

Translate »