Mobile Email: Defining Approaches

Mobile is a wildly popular topic in email design, which makes sense—2013 finally saw mobile email opens reach the 50% mark.

As email marketers look for ways to best engage with a mobile audience, many are left confused about which approach to take. Adding to the confusion of deciding on a good strategy is confusion about what strategies actually exist. Eliminating the possibility of not doing anything at all for mobile, mobile email design can roughly be broken down into three categories:

• Scalable Design
• Fluid Design
• Responsive Design

For marketers to choose the approach that best suits their needs, it’s important to understand the differences between these three approaches. This article attempts to describe and clarify each approach to make that easier.

Scalable Design

Let’s begin with what many email marketers are currently implementing in their campaigns: scalable design. Scalable design can roughly be defined as any design that works well across both desktop and mobile without using code to adjust table or image sizes, or display or hide content between the two platforms.

Scalable designs are typically the easiest to implement. If you’re building emails solely for desktop right now, you are essentially building scalable emails. They might just not be optimized for mobile.

Since scalable emails don’t adjust the widths of tables or images between devices, and don’t use CSS media queries to swap content or change the size of text, it’s important to use a number of techniques to keep the content of a scalable emails enjoyable not only on desktop, but when viewed on mobile devices as well.

• A simple (usually single-column) layout that scales down nicely.
• Large text that is readable on screens of all sizes.
• Large, touch-friendly calls-to-action.

One thing to keep in mind when designing scalable emails (or any email) is the Android Grid of Grim. On some Android clients, emails are not scaled at all, resulting in the need for subscribers to scroll both vertically and horizontally. Ideally, you should keep the most vital information in your campaign on the left side of your email—keeping things like logos, important copy, and CTAs visible without having to scroll horizontally.

When optimized using the techniques above, scalable emails are a great way for marketers to engage with their mobile audiences. They typically require no extra coding or knowledge beyond what most email designers already know. While scalable emails are good for teams that need a quick solution, more advanced solutions allow for better control over campaigns on different devices.

Fluid Design

In between scalable and responsive is what we term “fluid” design. Fluid emails use percentage-based sizing to make the width of tables and images adapt to the screen size on which they are viewed. Fluid emails are similar to scalable ones, in that they don’t alter the layout or content of an email, but they have the added benefit of having content “flow” to fill space on the screen.

Implementing fluid layouts are a simple matter sizing tables and images using percentages instead of pixels.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    ...Content...
</table>

However, Campaign Monitor makes a good point that you will need to constrain the width of your emails on larger screens. If left completely fluid, emails on these screens will be too wide and the copy will be hard to read.

Since the CSS max-width property isn’t widely supported in email clients, alternative methods for constraining width need to be used. The best way to achieve this is by wrapping the content of your email in a container table with a fixed width.

<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
    <tr>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                ...Content...
            </table>
        </td>
    </tr>
</table>

Then, you can make that fixed width fluid by targeting it in a media query which most mobile devices will render.

@media screen and (max-width: 525px) {
    table[class="wrapper"]{
        width:100% !important;
    }
}

Now, all of your tables and images will flow beautifully on most mobile devices, while still being readable on larger screens.

Responsive Design

Responsive email takes everything from scalable and fluid emails and builds on it by adding more control via CSS media queries. While we use media queries to help out our fluid layouts, nothing too advanced was going on. Responsive email, on the other hand, uses media queries to change the layout of emails, adjust the size of text, images, and buttons, and, in some cases, hide or even swap content between desktop and mobile devices.

CSS media queries allow you to target things like device and screen size to set up conditional styles for those sizes.

Using media queries, we can perform some amazing email acrobatics. Content can be shifted around, hidden, and even swapped out, providing email designers with amazing control over their campaigns on mobile devices.

For example, you can take a complex, multi-column layout on desktop and streamline it into a single-column, easy-to-scan, easy-to-scroll design on mobile—complete with larger text and more touch-friendly buttons.

While responsive email design is the most powerful tool for dealing with mobile, designers should be aware that media queries and responsive techniques don’t work everywhere. Depending on your audience, though, you can start using responsive techniques today. And using mobile-aware techniques as a foundation for your responsive emails allows you to design an email that falls back gracefully in clients that don’t support responsive techniques.

Learning More

Once you understand the differences between scalable, fluid, and responsive email design, you can determine which strategy works best for your team. If you lack the know-how or resources to implement a responsive campaign, both scalable and fluid strategies are a great way to keep your emails friendly for mobile subscribers. However, if you have the time to go fully responsive, the added control can be exactly the thing needed to set your campaigns apart from the competition.

Below are a number of articles where you can learn more about all three techniques. We also posted on the Litmus blog about some of our favorite responsive resources. Finally, if you want to go responsive but don’t have the time to build your own templates, our friends over at Stamplia recently released 7 Litmus-exclusive responsive templates on our blog.

Further Reading

Where People Opened in 2013
The How-To Guide to Responsive Email Design
Applying Fluid Layouts to HTML Email Design
From Monitor to Mobile: Optimizing Email Newsletters with CSS
Responsive Email Design Guide
Fluid Mobile Email Design
STYLECampaign Responsive Email Design Video
Responsive Email Support
Mobile Friendliness