Responsive Email Design

Chapter 1

Getting Started

If you read your email regularly using an Internet-enabled phone, you probably know that it's an experience that can swing from awesome to awful. While an email newsletter can look superb in the inbox, when squeezed onto a small screen, it can become absolutely unusable, with small fonts, narrow columns and broken layouts being common issues.

In this guide, we'll look at why designing for mobile has become a necessary skill for email designers, cover the fundamentals of designing and building a mobile-friendly email and back it all up with some neat tips and techniques. We'll assume you know a little about coding HTML for email, but if not, we've also got a couple of great guides to get you started.

Why optimize your email for mobile?

If you send email newsletters, it's likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet or similar. When we last surveyed email client popularity in 2011, we found that almost 20% of email opens occurred on a mobile device, rising dramatically from a mere 4% of the market when we last ran the numbers in 2009. iOS devices accounted for over 90% of these reported opens.

What this means for designers is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in long-standing email clients like Outlook and Gmail. In fact, mobile email client usage is soon set to eclipse both that of webmail and desktop clients, meaning that providing a less-than-optimal reading experience on the small screen may not only inconvenience a few recipients, but eventually the majority. This could lead to diminished response rates, or as Return Path summarized in a recent report:

"...those that aren’t tracking which device their subscribers are reading their emails on, or optimizing their emails or websites for mobile devices stand to lose out. A poor user experience could mean no response, no action, or plainly put, no ROI."
'Email in Motion: How Mobile is Leading the Email Revolution', Return Path, 2011

In this guide, we’ll look at a couple of ways you can improve the mobile email experience, from the use of media queries when coding up responsive layouts, to more advanced techniques. We’ll also cover design considerations when planning your newsletter and even look at how to best cater your subscribe forms to smartphone users


Which mobile devices can you design for?

A quick caveat first - the techniques listed here aren’t universally supported by all mobile email clients. As you may know, not all email clients were made equal - even on the same device, how an HTML email displays can vary radically from inbox to inbox. For example, while the default Android email client that appears on the Google Nexus is renowned for its superior CSS support, the Gmail client that also comes shipped with the handset ignores styles within the tags and can’t make head or tail of many run-of-the-mill CSS2 properties.

Thankfully, the iPhone and other Apple iOS devices can not only boast of near trouble-free email rendering, but also account for a large percentage of mobile email opens, too.

With this in mind, we present to you a non-exhaustive list of mobile email clients and their support for media queries. The skinny is that media query support enables you to use many of the responsive techniques which we'll be covering in this guide.

Default device email clients

Client Media Query Support
Amazon Kindle Fire Yes
Amazon Kindle Fire HD Yes
Android 2.1 Eclair No
Android 2.2+ Yes
Apple iPhone Yes
Apple iPad Yes
Apple iPod Touch Yes
BlackBerry OS 5 No
BlackBerry OS 6+ Yes
BlackBerry Playbook Yes
Microsoft Windows Mobile 6.1 No
Microsoft Windows Phone 7 No
Microsoft Windows Phone 7.5 Yes
Microsoft Windows Phone 8 No
Microsoft Surface No
Palm Web OS 4.5 Yes
Samsung Galaxy S3+ No

3rd-party email clients

Client Media Query Support
Microsoft Outlook Exchange 3rd party app (Android) No
Gmail mobile app (all platforms) No
Yahoo! Mail mobile app (all platforms) No

Many thanks to Style Campaign for their ongoing help with testing many of the above devices - their blog is recommended reading when it comes to mobile email design.

Design techniques

Sign up for free.
Then send campaigns for as little as $9/month

Create an account