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.
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.
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.|
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:
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:
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:
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:
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 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|
|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|
|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|
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.
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.
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.
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.
Recently, DEG Digital redesigned marketing emails for Crocs. They went from traditional desktop layout to a true responsive design.
This image shows the traditional desktop email design as viewed on a desktop and mobile device.
This image shows the re-designed, responsive email in desktop and mobile clients.
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:
(Litmus defines ‘read’ as a subscriber engaging with your message for more than 10 seconds).
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.
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.
The desktop version retains its two-column look, while the mobile version is cleaner and less intimidating.
In addition to the decrease in unsubscribes, The Fetch also noticed an increase in mobile shares and forwards for their responsive email design.
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:
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:
This example states ’If the email is viewed on a screen 480px or narrower then use the following CSS’.
Responsive email uses styles as ‘if-then’ statements which are triggered when a specific screen size is detected (less than 480px in this example).
This style moves navigation items to their own row, which spans the entire width of the table.
This style enlarges fonts within the “body-header” table cells to 18px.
Any fonts within the “body-copy” table cell will be displayed as colour #dddddd.
This style adds padding to table cells within the “body” class.
You can use the display property to hide table cells on certain screen sizes.
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.
Remember to test your email design on a variety of devices before you send it to your subscribers.