Optimize for Mobile Design

Contents

Identify Your Users and Your Goal
Strategies to Optimize
Thinking About Mobile Email Design
More Tips for Better Mobile Design
Coding for Mobile with CSS Media Queries

You want your emails to look good, whether they're being opened on a desktop computer with a big screen, a tablet, or a phone. With mobile-optimized, responsively designed templates, you can ensure your messages will render well on any device.

Identify Your Users and Your Goal

Who are your users? How do they view your emails? Use Audience Builder to identify your most active users:

by mobile device/browser
by email domain

This will help you know which segments to focus on optimizing the experience - obviously you want to make it good for everyone, but it helps to know how to prioritize them. For example, if none of your users have mac.com email addresses, then you shouldn't need to worry as much about how mac.com renders your code. What is the content of the template you are coding?

What is the first thing you want a user to see? It's important for your email design to keep the most valuable information at the very top. Remember that the "fold" on a phone is different than the "fold" on a computer screen.
What is the most important thing you want a user to do when they open your email? Important for design - make large, close to top (keep in mind where it will be on a smaller screen).

Strategies to Optimize

There are multiple ways to approach experience optimization. In order from easiest and least technical to most dev-resource-intense:

One single, graceful design - send the same email to everyone, but use our design tips to make sure it will look good on any device.
Segment your users by device usage and create 2 separate campaigns. Send Campaign 1 to the users who open frequently on mobile devices, and Campaign 2 to the users who open most frequently on their computer. This method is also helpful for targeted app campaigns
Use CSS media queries to create 2 different view styles of the same template to send out.

Deciding which strategy you want to use will depend primary on the differences you want between your mobile and non-mobile version. We'll return to this point later, but first let's examine the different options in greater detail. As a graceful design will be useful in all mobile-optimized emails, we'll start by talking about design.

Thinking About Mobile Email Design

What are the main differences between viewing on a mobile device and viewing on a computer?

Screen Size
Input - Mouse (precise) vs. Finger / Touchpad (imprecise)

You can address both of these things with your mobile design and code. The two most important rules for mobile template design: simplify and fail gracefully.

Simplify - users don't scroll through as much content, nor do as much reading or browsing, on a mobile device. Since the screen is smaller, it's important that your design makes it clear what is important and what isn't.
Fail gracefully - @media queries aren't fully supported, so you'll need to make sure that if your user reads your email with a device setup that doesn't support media queries, your email still looks good.

More Tips for Better Mobile Design

Screen size:

Reduce the width of your copy
Consider reducing the length of your subject line - the end cuts off when viewing on a narrow cell phone screen.
Single-column design structure
Larger font for better readability
Consider hiding some content for mobile if you have a very content-heavy email - users may lose patience if they have to scroll around too much on a phone screen.
Remove unnecessary sections like navigation bars

Input:

Anything you can click on should be obvious and easy to hit with a finger - no tiny links! While browsers are much more universally similar, mobile devices vary a lot.
We recommend you do not use code to disable zoom or other user-controlled viewing changes - Make it easy for your users to view your email best on their device. (This is a part of failing gracefully!)

Even if you do want to use media queries, it is highly recommended that you make your regular template design more mobile-friendly with some of these design tips.

Coding for Mobile with CSS Media Queries

In the <head> section of your email, apply mobile-specific styling wrapped in <style> tags.

Step 1: Identify your Target

This step applies to the <head> section of the email.

<style type="text/css">
@media screen and (max-device-width: 480px) {
}
</style>

The above example targets users viewing on a device with a screen, and then targets by max width of the device. 480px is a common device width for phones because it has been the standard iPhone width.

Step 2: Set Classes and IDs

This step applies to the <body> section of the email. In the <body> section of your email, add IDs and / or classes to the elements you want to apply mobile-specific styling to. You will add the styling in the <head> section, but you need to tell the <head> section which parts of the email it should style which way.

<td id="sidebar">

This identifies a table cell as having the unique id "sidebar"

<table class="main_content">

This identifies a table as being a part of the class "main content"

<span class="big_headline">

This identifies a span as being a part of the class "big_headline"

Step 3: Call the Classes and IDs

This step applies to the <head> section of the email. Call the classes and id's so that you can apply styling to them. Add this to example in Step 1:

<style type="text/css">
@media screen and (max-device-width: 480px) {
    #sidebar { }
    .main_content { }
    span.big_headline { }
}
</style>

Step 4: Set the Styling

<style type="text/css">
@media screen and (max-device-width: 480px) {
    #sidebar {display: none !important; }

This makes the mobile email not display anything contained within the id "sidebar".

    .main_content {width: 300 !important; }

This makes the mobile email resize the width of anything belonging to the class "main_content"

    span.big_headline {font-size:15 !important; }
}
</style>

This makes the mobile email resize the font of any span belonging to the class "big_headline"

Step 5: Test!

CSS is currently unsupported or not fully supported by many email providers and mobile apps - what happens if your code doesn't come through? You need to make sure it fails gracefully, and the way to do this is by testing it on as many devices as possible. You should also make sure your code works even when the media queries don't. For example, be careful with using display:none to hide an object. It's great for hiding margins or padding, but not so great for hiding content, because if the CSS isn't supported, the hidden object will be displayed anyway. Make sure this is acceptable (will multiple elements display where there should be only one?). This is also brings back the idea of knowing your audience. While mobile email use is WAY up (and likely to keep increasing!), it is likely that many of your users still open their emails on a computer. You'll want to make sure that the non-mobile experience is not sacrificed for the mobile experience. All the variables at play:

Device - Samsung Galaxy Nexus, Apple iPhone 5
OS - More than just Android vs iOS: iOS version - iOS5, iOS6 Android version - Jelly Bean, Ice Cream Sandwich
App - Default Email app, Gmail app
Domain name - gmail.com, yahoo.com

All these variables can affect rendering. If you notice when you open your email, it doesn't render, try using a different app. Obviously, you'll want to try to fix the issue, but you need to know exactly what's causing it first.

The following pages contain tables showing the kinds of HTML and CSS supported by different devices, OSes, apps, and domains:

How to Use Media Queries in HTML Emails

There's also more information on CSS Media Queries here: http://www.w3.org/TR/css3-mediaqueries/