Scalable, Fluid or Responsive: Understanding Mobile Email Approaches

[ 20 By

Mobile is a wildly popular topic in email design, which makes sense—emails opened on mobile devices have grown more than 400% since 2011, and mobile email opens hit the 50% mark in 2013. We’ve talked before about how important mobile has become to email marketers and the need to optimize campaigns for mobile audiences. But it’s not always clear which strategy works best for mobile audiences.

To make matters worse, many marketers are confused about what strategies actually exist. Eliminating the possibility of not doing anything at all, 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.

Scalable Design

Let’s begin with what many email marketers are currently using: scalable design. Scalable design can 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. While we’re using the term “scalable” to describe this approach, you may have also heard these concepts referred to as mobile aware, mobile friendly, agnostic or mobile first.

definingmobile-scalable

Scalable designs are typically the easiest to implement. Since scalable emails don’t adjust the widths of tables or images between devices, and don’t use CSS media queries (we’ll get to those later) to swap content or change the size of text, it’s important to use a number of techniques to keep the content of 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.

For more information on scalable design, Lauren’s post on the differences between scalable and responsive design is a great place to start. Our Anatomy of the Perfect Mobile Email infographic is another excellent resource.

One thing to keep in mind when designing scalable emails (or any email) is the Android “Grid of Grim.” In some Android email apps, messages are not scaled at all, resulting in the need for subscribers to scroll both vertically and horizontally. Ideally, you should place 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 without the need to drastically change process or introduce new workflows. They typically require no extra coding or knowledge beyond what most email designers already know—it’s just a matter of making mobile users a priority and altering the overall email layout to accommodate their needs.

Check out these great examples of mobile-optimized, scalable emails:

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, similar to what is known as “liquid” layouts on the web. Fluid emails are similar to scalable ones, in that they don’t purposefully alter the layout or content of an email, but they have the added benefit of having content “flow” to fill space on the screen. For this reason, fluid designs typically work best for text-heavy layouts since there’s less control over how copy and images relate to each other.

definingmobile-fluid

Implementing a fluid layout is relatively simple. Instead of using pixels for sizing tables, you use percentages.

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

fluid-wide

Line lengths can become unwieldy in unconstrained fluid layouts

While websites can use the CSS max-width property to constrain the layout to a specific size, this technique isn’t widely supported in email clients. However, we can use alternative methods for limiting the width of a layout. 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:

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

Now, your tables and images will flow beautifully on most mobile devices, while still being readable on larger screens, just like some of these great emails:

It should be noted that fluid email designs are becoming less common these days. Fluid tables and images are almost always coupled with responsive design techniques to allow for the most control over email designs. Don’t let that discourage you from using fluid techniques, though! It’s still an excellent way to optimize for mobile if you don’t have the resources to devote to a completely responsive template.

Responsive Email

Responsive email takes everything from scalable and fluid emails and builds on it by adding more control via CSS media queries. While media queries are also used to help contain fluid layouts, it’s a simple implementation of media queries—nothing too advanced was happening. 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.

definingmobile-responsive

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

@media screen and (max-width: 525px) {
    img[class="hide"]{
        display:none !important;
    }
}

Using media queries, you can perform some impressive 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.

defining-mobile-responsive-switch

Responsive design can be an amazing tool, but some designers have found it hard to wrap their heads around, which is why we made our How-to Guide to Responsive Email Design. Anna Yeaman over at STYLECampaign put together an amazing video that goes into what is possible with responsive email design. Our friends at Campaign Monitor also have a wonderful guide on the subject. Finally, if you don’t have the resources to build your own responsive templates, our friends at Stamplia recently built 7 Litmus-exclusive responsive email templates.

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. We suggest starting small by using simple techniques (enlarging fonts on small screens for example) and then gradually working your way to more advanced concepts as you grow more comfortable with media queries. 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 media queries.

Here are some of our favorite responsive emails:

Which Strategy Is The Best?

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.

Scalable Design

Perfect for:

Testing the mobile waters

Reliable rendering across clients and devices

Teams with limited resources

Fluid Design

Perfect for:

Simple layouts

Emails with mostly text that can flow

Teams with limited resources

Responsive Design

Perfect for:

Large mobile audiences

The most control over layout

Teams with knowledge of media queries

 

Learning More

It’s also important to understand that these three strategies don’t represent every approach for an email campaign. Many designers find that borrowing elements of each strategy and using them together is the way to go. As always, the most important thing is to understand your audience and tailor your solution to fit their needs.

To help, we’ve put together a mobile readiness kit containing our best stats, infographics and articles on mobile to make understanding mobile audiences easier.

CTA-mobile-email-kit
  • rolficak

    Jason, superb article as always! I hope that in the long run everybody will switch to responsive design in emails, since that’s the best solution (especially in case of complex layouts).

  • http://edmdesigner.com/ RolFic

    Thanks Jason for the Mobile Email Kit! Definitely responsive design is the “best” way to go, although it may take double time to code and test the template.
    That’s what we are trying to improve with my startup by creating a flexible, drag and drop responsive email editor.

    • http://www.litmus.com Justine, Litmus

      Once you get up and running with responsive and learn the quirks, your testing and coding time will usually drop considerably. We’d love to see your drag and drop responsive email editor once it’s ready! :)

      • http://edmdesigner.com/ RolFic

        You know better than us, that a software is never ready. :) But definitely it’s live and the registration is open. Would love to hear your feedback about the UX! ;)

      • http://edmdesigner.com/ RolFic

        You can try it any time Justine for free at http://app.edmdesigner.com/register

    • http://thebestofemail.com/ Noya Lizor, TheBestOfEmail.com

      Oooh! I’d like to see the drag & drop responsive email editor too! Just subscribed to your newsletter so that I don’t miss the launch announcement :)

      • http://edmdesigner.com/ RolFic

        Thank you Noya! In fact you can already try it ;)

      • http://edmdesigner.com/ RolFic

        You can try it any time for free at http://app.edmdesigner.com/register

  • Storewars News

    Nice
    read! Very informative. Check this article: Late Easter causes UK retail sales
    to fall in March – BRC. Read it here: http://bit.ly/1t2NkXN

  • Sam

    I disagree with the conclusion, as a mobile Gmail user, I don’t know why I always have to get a terrible experience. Simple fluid with some supporting media queries should be the standard.

    • Jason Rodriguez

      This is a pretty general overview of the options available, and I make a point to clarify that most designers take elements from all the strategies. No one strategy is right for every campaign, it really boils down to knowing your audience and where they open. On mobile, iOS and the Mail app are exceedingly popular and have astounding support for responsive techniques, so it’s likely that a lot of designers are building for that experience to the detriment of people that use the Gmail app or mobile Gmail experience. While you may have a bad experience with a lot of campaigns, the people sending them need to tailor the experience to the majority of their audience.

      • Sam

        The difficulty is that there are no stats on mobile gmail users, so they are treated as if they don’t exist, same, it would seem for people using other android clients. Surely if we’re going to drop support for anybody, it should be those people that view at full screen, since they’re a minority in most cases.

        LinkedIn, Disqus, kickstarter. All these have the right idea in my opinion. It’s a shame they don’t get the credit they deserve.

    • HannahHudson

      I agree with you here, Sam. I tested the above examples of fluid emails in mobile Gmail and I’m sorry, but the text is TOO SMALL to read. It’s a catch 22 though- if you make it 100% (like the fluid approach) then it does get unreadable on the desktop (too long), but if you try to add the tiniest bit of styling to fix the width on the desktop, then you’re screwed in the mobile Gmail experience. I believe it was Justine who advised me a few weeks ago to layer with a mobile first design, but I honestly don’t know how to overcome the above problems.

    • http://emailwizardry.nightjar.com.au/ Nicole Merlin

      @disqus_FgCmK1Lcho:disqus — I am also a huge fan of fluid (with responsive extras) to ensure maximum compatibility with the Gmail, Yahoo and Outlook.com apps.

      Great post, @JasonLitmus:disqus! The only thing I’d say is that in the Fluid example that you guys have shared, if you wrap the whole layout in a table with a fixed width and then use a media query to make that fixed width fluid on mobile, it *technically* isn’t a fluid layout anymore.

      My favourite method is using conditional code to wrap it in a table for Outlook, and then use a min-width media query for desktop Apple Mail since it (weirdly!) doesn’t support max-width. Everything else does :)

  • Annakate Ross

    Are these concepts (scalable, fluid and responsive) the same ones I should think about when developing a new website? I’ve heard responsive before, but never scalable or fluid to explain how different sites adapt to a mobile screen. We’re trying to decide between a fully responsive website and maybe a mobile site. If the mobile experience can be a really good one, we’ll probably go the fully responsive route. Thanks for the great content!

    • http://www.litmus.com Justine, Litmus

      I’d say the options for web probably use the terms responsive, liquid and mobile first more often. Of course, email is a bit different from the web and this article is focused on email. Check resources and articles from Brad Frost, Ethan Marcotte and Luke Wroblewski for great info on mobile-friendly web design.

  • Pingback: Scalable vs Responsive: Creating a Delightful Email Experience | Fixation Marketing()

  • Pingback: マーケティングメールの形式 | 株式会社インゲージ()

  • Praveena Infowave

    @psd I really enjoyed this post. Bookmarked for future reference-thanks for sharing!

  • Pingback: Increase App Installs with Email | Internet Marketing()