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.

Chapter 1

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."

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.

Design techniques

Just as most web designers take a ‘design-first’ approach to their projects, we’re going to cover the visual side of creating a mobile-optimized email newsletter in this guide, before going elbows-deep into coding. This will help you make informed decisions when next planning an email newsletter, plus make it that much easier to conceptualize the techniques we’ll be discussing later on.

We’ve already started talking about responsive email design. If you’re familiar with the use of this term in the context of the web, then you’ll be pleased to know that we’ll be using the same concepts and techniques here for email. If things like ‘adaptive layouts’ are new to you, I highly recommend reading this primer by ‘A List Apart’.

The skinny is that we’ll be designing two CSS layouts of the same newsletter - one layout that looks great in webmail and desktop clients, plus another layout that can be easily read on the smaller screens of mobile devices. For example, here’s an HTML email in Outlook:

Below is the same email, only this time viewed in Apple's iPhone Mail. As you can see, there are significant differences between the two layouts. The mobile version is skinnier, lacks visual clutter and is just as readable as the desktop version. This can be attributed to the use of mobile-specific CSS:

As a point of comparison, the right image is the same newsletter, without this stylesheet. See how tiny and unreadable the text is? Well, that’s the problem that faces millions of email newsletters received on mobile devices, everyday.

Mobile-friendly layouts and design elements

Designing for mobile isn’t simply a matter of taking a crack at writing mobile-specific CSS. Other things to consider are:

Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.

Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.

The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care).

More than ever, keep your message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse.

When possible, use display: none; to hide extraneous details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices.

When mocking up an HTML email or template, our advice is to create two sketches or wireframes - one of the desktop/webmail layout and one of the mobile layout. Keep in mind where your call to action (CTA), such as ‘View deal’ appears on both - is it immediately visible when the email is opened? Or does the recipient have to scroll in order to see it?

Now you’ve seen what mobile stylesheets can do, lets get into the code.

Chapter 3

Coding mobile emails

When web designers talk about mobile stylesheets, usually they’re talking not about a totally separate stylesheet, but the good stuff that appears within the curly brackets of a media query. Here’s what a basic one looks like:

Lets break down what the @media declaration is all about. First of all, in order to make it mobile-specific, we have some criteria that have to be met before the email client uses the styles therein. The @media only screen bit specifies that the email has to be displaying on a screen (unlike being displayed on an accessibility device, or printed via a printer). After that, the device’s viewport can have a maximum width of 480px. This is important, as many, but not all mobile devices have a viewable area of 480px wide or less. While max-device-width: 480px is commonly used (as it’s the width of an iPhone display in landscape mode), you can tweak this to accommodate larger mobile displays, such as those on tablet devices. You can even be ultra-pedantic, like so:

The contenttable class does something really interesting here - when the email is viewed on a device with a screen width of 480px or wider, it has no effect. However, when the screen width is 480px or less, it narrows down the table widths to 320px. Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. We’ve also added !important; to the mobile-specific styles to ensure they take precedence. But otherwise, it’s run-of-the-mill CSS. Similarly, you could feature other declarations, like:

Assuming that the examples in this guide have made sense so far, we’re going to start looking at a couple of more advanced techniques for adapting your email newsletter for mobile devices. Buckle up!

Chapter 4

Building responsive layouts

While one-column HTML email layouts are generally the way to go when optimizing your newsletter for mobile devices, there is an elegant way to create responsive 2-column layouts, without resorting to mile-long stylesheets in media queries.

While 2-column layouts often allow more content to feature above-the-fold on desktop email clients like Outlook, they're a pain to read and navigate on mobile devices. We'll fix that with a bit of old-fashioned coding.

One of the golden rules of email design is 'where possible, use HTML attributes instead of CSS'. Whereas CSS support can be fairly flaky across the gamut of email clients, attributes tend to be rock solid. For example, attributes like align="left" andcellpadding="10" are far more reliable than their approximate CSS equivalents,float: left; and padding: 10px;. It's exactly these attributes we'll be using when building our 2-to-1 column layout.Lets look at such a layout in Outlook 2007:

In the example above, we have a 640px wide container table, with two 320px wide tables nested inside to form columns, similar to our previous examples. These nested columns have cellpadding="20" applied to stop the content from pressing hard against the edges.

When coding for the web, we'd generally apply float: left; to the left-hand column, to get them sitting side-by-side. But instead, we can use align="left". As long as the container table width is more than, or equal to the combined width of the two columns, both will fit nicely in this fashion. Here's the simplified code for the 2-column layout so far:

If the container table is 640px wide, you will get a 2-column layout. But any skinnier than this and the right column will wrap under the left column. Make it the same width as the column tables (320px) and you've got a flush, 1-column layout that fits an iPhone display exactly, with no zooming required. We can achieve this by adding a simple, 1-line media query to our HTML code:

The result is a responsive layout that displays two columns on desktop and web clients, then switches to one column in iPhone Mail and the default Android email client.

Adding Wikipedia-style progressive disclosure

On the web, many responsive sites convert luxurious long-form into ultra-short for mobile devices by using a technique referred to as 'progressive disclosure'. This involves hiding content behind an interactive element like a button or link, then displaying it on-click (or tap). Wikipedia uses it, as do a lot of mobile applications. We can also use it in mobile email. Using CSS to show and hide email content Lets say we have an email newsletter with multiple articles. In desktop email clients, we want a heading and text to display in each article:

However on mobile clients, we we only want the heading to display, alongside a show/hide button (which toggles the text). This turns the email into an interactive table of contents, dramatically shortening the message length:

To do this, we'll firstly need to turn to our HTML code and create an article with a heading, text and a show/hide button. We'll also add a couple of classes to display the show/hide buttons exclusively on mobile devices. Here's a simplified version of the code used for each of the articles:

Take note the classes mobilehide, mobileshow and article - these will be handling most of the action.In our stylesheet, we'll hide the show/hide button when the email displays in desktop and web email clients, by using display: none; in our stylesheet like so:

To ensure that the show/hide buttons are only displayed on mobile devices, we'll turn to our media query. Here's the code, including the earlier .mobileshow and .mobilehidesnippet and some webkit-friendly button styling for good measure:

And if things go well, the result is an email with show/hide buttons that toggle content on the iPhone. If you would like to try applying this technique to your own email campaigns, feel free to view the sample code on Github and adapt it for your own campaigns. Warm thanks to Eric Gideon for his contribution to this project.

Targeting devices with media queries

You may have noticed that we've been using one standard media query in this guide, being @media only screen and (max-device-width: 480px) { ... }. This is great for targeting Apple iPhones and other handheld devices that make up the majority of mobile email client share.

But if you, or your clients want to target tablets, larger-screen Android devices and some of the more exotic screen resolutions that feature in the mobile ecosystem, then you'll need both unique media queries and unique styles to match.

As you may know, media queries are not supported by every mobile email client - for example, Gmail will not show the responsive version of your email, on any platform. For more information on which email clients do and don't support the techniques in this guide, view our support chart.

Fine-tuning your media queries

Lets go back to the max-device-width: 480px rule in our earlier media query. What this tells mobile email clients (and browsers) is that below the 480px threshold, a mobile-friendly layout defined therein should be displayed. Above that, CSS styles outside of the media query should be used.

However, the dimensions you can design for can be even more specific than that, for example, only targeting displays that are 320px or more in width, but smaller than, or equal to 480px. Here's an example:

What a lot of folks don't know is that media queries can be quite focused - apart from designing around a range of widths and heights, you can also design for screen orientations (ie. portrait and landscape) and pixel ratios (how the width of each pixel in an image compares to the width they're displayed at).

This provides is the ability to target devices with obsessive precision. Want to create an iPad-specific layout? Sure. How about targeting devices with Retina displays? Why not. While the effort that goes into adding targeted styles may often outweigh the benefits, sometimes it takes only a couple of lines of code to say, get an email newsletter looking edge-to-edge perfect on both your phone and favorite tablet.

Our friend Andy Clarke created a wonderful boilerplate for targeting popular devices. It's a great starting point for designing and building email designs that aren't limited to two views each side of 480px.

Being paranoid about Android

That said, there are folks who are critical of focusing on creating layouts around fixed widths like 480px, commonly known in the industry as 'breakpoints'. As Marc Drummond argues:

"If you are using responsive web design techniques (and you probably should be!), then this means that using default media query device-width breakpoints is mostly pointless."

Marc acknowledges that there are oodles of breakpoints that exist outside of say, Andy Clarke's earlier boilerplate, particularly amongst Android devices. Besides, new mobile devices come out all the time, so the media query you're using to target the top-of-the-line Android handset today may be redundant tomorrow.

Building fluid layouts with media queries

The proposed alternative is to design fluid layouts that gracefully adjust to the width of the viewport. By using a simple media query that applies a percentage width to elements (instead of fixed widths like 320px), it's possible for your newsletters to feature content that has a standard 'desktop view', but below a certain viewport width, stretches and contracts to fit. As a result, the newsletter can display optimally in a variety of settings, from small preview panes, to the tiny screens on web-enabled Nokia devices:

We have a detailed blog post that goes into the mechanics of fleshing out fluid layouts for HTML email and in the next chapter, will touch on how fluid-width images can be used effectively in your newsletters.

Finally, a word of advice - while it's very easy to become fanatical about tailoring your responsive email design for specific devices, don't lose track of the big picture. If 85% of your mobile-toting subscribers are viewing your email in 320px x 480px viewports, don't feel like you have to break your back for that one guy using a 184px x 307px display (unless it's your client, of course!).

Optimizing images for mobile

The limited amount of screen real estate available on mobile viewports means that images should be added thoughtfully to HTML email. However, solid CSS support in clients like iPhone Mail has meant that there are a number of ways you can be clever about their use.

In this chapter, we'll look at some techniques that take advantage of supported CSS properties like background-image. These techniques will not only allow you to display mobile-optimized images throughout your designs, but ensure they look crisp at any width.

Using background images for better headers

We usually run a mile before recommending that anyone use background images in their email newsletters, but in the case of iPhone and Android default Mail, we're talking about clients with pretty solid CSS support and all the benefits that media queries can bring. One of these benefits is being able to substitute images when an email campaign is viewed on a mobile device, by hiding the original and letting the beautiful, mobile-friendly image shine through.

Traditionally, we've recommended that images be resized as to fit within the viewport of mobile devices. However, the issue with resizing images in this way is that it can make any information therein too small to read or understand. A better option is to create a unique image specifically for mobile-toting subscribers. We'll do this by surrounding the image in a table cell or div, then creating a media query that hides the original and shows another header image as a background image instead:

Here's how things look before and after the header images have been swapped out:

An advantage to using this technique is that you can shorten the length of emails by providing significantly shorter images (pictured). When it comes to mobile email, the shorter, the better.

Resizing images for fluid layouts

The issue with the background image swap method above is that it's only really effective with static-width email designs. These days, mobile devices can come in all sorts of shapes and sizes, therefore making fluid email layouts a popular option. While the obvious solution seems to be to set background-size: 100% in the earlier media query, as Elliot Jay Stocks points out, the better option is to use background-size: cover:

Thankfully, Webkit-powered email clients offer full support for background-size, which means it gets the all-clear in iOS and Android default mail. If in doubt, we recommend going the traditional route, which is to stick to using a regular <img> image in a fluid layout and resizing it like so:

The trick is to create key images at twice the size you actually plan on displaying them, thus making the image look super crisp on iPhone 4, 4S and iPad displays. For example, using our earlier background image hack, we'd create a header image that was really 650px x 230px (eg. header-325@2x.png), but then shrink it down for mobile screens. Here's how the media query would look:

While this header image will only be super-sharp on said displays, the issue at hand is that all media query -supporting email clients will be burdened with downloading the high-res image. Indeed, the drawback to using this technique is that bigger images will of course have bigger file sizes, resulting in longer email load times in the inbox. So use this technique sensibly, especially as not everyone is set to benefit from high-res images.

Optimizing your subscribe forms

Optimizing your email campaigns for mobile isn’t just limited to making sure your newsletter can be read on small screens. After all, what’s the point of sending mobile-optimized campaigns, if mobile users can’t subscribe to your lists in the first place?

The good news is that mobile devices like iPhone and Android handsets generally do a good job of making forms at least remotely usable these days, however there are a couple of things us designers and coders can do to make them as easy-to-use as possible. The obvious benefit to optimizing your forms is that they require less time and effort to fill in on a mobile device. To you, this means higher completion rates and more subscribers.

We'll cover a couple of pointers, plus feature a simple example you can use as a starting point for your own subscribe forms.

Top-aligned labels A common issue when using forms on a mobile device are having labels that reside out of sight when a form field is selected in a mobile browser. At the initial zoom-level, a left-aligned label like 'Enter your email address:' may be visible, but as soon as you start entering text, the viewport zooms-in and the label is flung out of sight. The solution is to either use a top-aligned label, or add the form label as a text-field value. The latter requires less vertical real estate, but can be a little annoying if the field you've just started filling in was initially hidden by the phone's "Form Assistant" or keyboard.

Use input type="email" If you useinput type="email" on the email address form field, a special keyboard will display in iOS devices, featuring commonly used characters like @.

Narrow down your forms (if not the entire site) Adding mobile-specific CSS using media queries to go narrow-gauge and remove visual clutter can really improve the usability of forms. After all, there's nothing more clunky than having half a text-input field disappear off the screen. Personally, I favor using fluid layouts for mobile devices, simply because you can't predict the viewport's dimensions or orientation. Simply making a text field's width say, 80% of the viewport width can massively improve the appearance and usability of our subscribe forms.

Be mindful of multi-option fields While we're talking about narrow layouts, it's prudent to force all content to flow in a single column - particularly checkboxes. When inline form options wrap, things can get all kinds of hairy. Often drop-down lists are a better option over radio buttons and reduce the amount of scrolling required to navigate the form.

Take a stand on scale Finally, a lot of these tips here haven't been specific to forms - more like web design in general. Included is the idea of setting the initial scale/zoom on a mobile device using a viewport meta tag, especially when building stand-alone forms. When applied, they can prevent the user accidentally zooming in unnecessarily and losing sight of most of the form. Here's what a typical viewport meta tag looks like in the head of an HTML page: <meta name = "viewport" content = "width = device-width, user-scalable = no" /> For a couple of variants on this, check out Apple's viewport meta tag documentation

To show you how to optimize your forms, we created a simple CSS template that you can plonk our 'Basic formatting' subscribe form code into. You can view it in your browser and on your mobile device using this short link: http://goo.gl/7xDuu.

You can repurpose the CSS, play with the media queries and use it either as a stand-alone form, or on your pages.

Creating mobile-friendly plain-text email

Not wanting to limit our advice to HTML email design, we wanted to add some pointers for optimizing plain-text campaigns. When it comes to formatting them, there are two camps - those who add a line break every 60-65 characters to their message, then those who don't. Both have pros and cons, depending on which email client your message is viewed in.

We have found the 60-65 character limit works best in desktop and webmail clients. This is because there is effectively no limit to how wide paragraphs of text can run in most reading windows or preview panes. Paragraphs of text can become very much unreadable after 60 characters or so - traversing from the end of one long line to the beginning of another is just too much visual work for effective scanning.

However, on mobile devices, things are very different. In iPhone Mail (see pictured), you can see how 65-character line breaks combined with wrapping text results in a very jagged message. It's arguably worse than reading an infinitely long line of text.

If you're sending HTML email with a plain-text version containing line breaks, most mobile email clients won't ever have to fall back to viewing it. So it isn't quite time to undo the app's handiwork when it automatically creates a nicely formatted text-version of your HTML campaign. However, if you're sending plain-text campaigns only, it's worth having a look at your email client usage reports when deciding which way to go. If you have plenty of subscribers reading their email on a mobile device, it may not be an appealing idea to add your own line breaks. But in other instances, putting the time into formatting may be worth it.

Case study: Twitter

Now we've got the theory, let's put some of these techniques into practice by applying them to a real-world email. Not just any email, but one that's send to millions of people every day.

In the not so distant past, Twitter's email notifications were less-than-flash on mobile devices. The problem was, a combination of tiny text and a wide layout pushing out the zoom made them nearly unreadable on small screens.

We decided to do something about it. In 5 minutes, we applied a simple fix that made a world of difference to the usability and readability of their notifications... And potentially can help you significantly improve how your email campaigns display on mobile devices, too.

In this case study, we'll show you how we took a humble email notification and turned it into something tweet-worthy when viewed in iPhone or Android Mail, or any mobile email client that supports media queries.

Taming the tiny text

First of all, we wanted to approach the most apparent issue with Twitter's notifications - tiny text. The reason why the text looks so small is because the 710px wide layout in use forces the email client on mobile devices to zoom out significantly to view the entire width of the message. Let's address this with a media query targeting small displays:

@media only screen and (max-width: 480px) { ... }

If you've read much on Responsive Email Design, you may know that you add these declarations to your <style> tags - the stylesheets within can only be interpreted by HTML email clients that meet the @media only screen and (max-width: 480px) criteria. So lets put it to use on adapting the layout here. First up, there's two tables surrounding the body of the email message:

The widths used above are significant, as on the iPhone in particular, the display width is 320px in portrait orientation. By narrowing the email layout to 320px, it will be viewed at 100% zoom by default, which means that not only will the whole design be visible, but text and images will look as crisp as can be.

Putting a harness on the header image

Now, the above technique would be all well and good if it wasn't for that infernally wide 'Twitter' header image. So we'll do something a bit crafty and split the header image into 3 images. Sections which don't need to be displayed in our new, narrow layout can simply be hidden. Here's the original code:

You may have noticed the class, logo on logo-left.png and logo-right.png. Hiding these bits is pretty straightforward - simply add the following to our existing media query:

img[class="logo"] { display: none !important; }

At last, we've got a header image and layout that's trimmed down to size on mobile screens.

Now, on top of the above re-factors, we added some extra padding around elements and adjusted font sizes to taste. But ultimately, most of the major changes were achieved with a couple of lines of code and only a few minutes' work. The results speak for themselves (pictured).

Hundreds of people showed their support for these changes and joined us in lobbying Twitter to improve their notifications. The happy result was that Twitter heard us and conducted a major redesign of their email notifications the following week.

Of course, you too could make a slightly smaller list happy by applying these optimizations to your own HTML email designs. Here’s the code, free for you to test out at adapt for your own campaigns:

Now we've got you started...

This guide was designed as a starting point for your own adventures with optimizing email for mobile devices. The mobile landscape is always changing and likewise, so are the techniques for best catering your email newsletters for the variety of email clients out there. So if you have a suggestion as to how we can improve this guide, or any questions about Responsive Email Design, be sure to get in touch with our team. Happy designing!