Responsive & Scalable Email Design: What’s the Difference?

[ 10 By

I recently tuned into a really great webinar presented by Yesmail. Titled “Mobile Email Design: Differences Between Responsive & Mobile Scalable Email Design,” the presentation documents the differences between scalable and responsive design and how to determine which is right for you. With the increase of mobile opens (123% in 18 months!), it’s crucial to start thinking about which mobile strategy is right for you. Yesmail discusses two very prominent mobile optimization techniques in their webinar, which I’ve summarized below.

Scalable Email Design

A scalable email layout is readable & clickable no matter which size environment it is being read in. There is only one version (one HTML file) of the email, but the email scales to look great on both desktops and mobile devices. Scalable designs utilize techniques such as:

  • A grid system for alignment and proportion
  • A single column design
  • Larger fonts (at least 14px)
  • Touch-friendly buttons
  • Key information & CTA in the upper left of the email

Here’s a great example of a scalable email from HP that Yesmail presented in the webinar:

HP Email
This email from HP looks great on a both a desktop & mobile device and is easy to interact with in both environments.

In addition, we recently blogged about the mobile-friendly emails we’ve received from Help Scout, which utilize a scalable email design. Check out that post for another great example of a scalable email design!

Responsive Email Design

Responsive email designs use CSS3 @media queries to render two different layouts depending on the size of the screen the email is opened on. CSS media queries can auto-adjust the layout, content and text size of an email depending on the screen size of the device it is being read on. In addition, images can be swapped out or completely disabled, images & buttons can be resized, and colors can be changed. While responsive design requires two designs and extensive coding, they are they only truly “mobile first” strategy; however, not all mobile environments support media queries.

I’ve blogged about Twitter’s use of responsive design a few times because I think it’s one of the best I’ve seen! The media query not only enables the email look great on small and large screens, but allows Twitter to change the CTA depending on the screen size or device the email is being read on!

Twitter Email
Pinterest also sends fabulous emails that utilize responsive design:

Pinterest's Email

How does Responsive Design work?

Here is a piece of the actual CSS used in a media query:

@media only screen and (max-device-width:480px)

 

What does this mean? If your screen is 480px wide or less, a different set of styles will be used to display your email’s HTML. For example, since an iPhone’s screen is less than 480px, users reading an iPhone would see an email with different colors, font sizes, images, etc. than users reading the email on a desktop. Media queries and responsive design can be used to display minor changes (making fonts bigger, hiding unnecessary text), or two completely different emails based on the screen size they are read on.

For in-depth details on creating a responsive emails, check out Campaign Monitor’s guide, “Responsive Email Design.”

Examples of Responsive Design layouts

In their webinar, Yesmail highlighted some really great examples of the different layouts capable with a responsive design. Below are two of my favorite examples (check out the recorded webinar for more examples!):

3 Columns to 1 Column

three-to-one template

2 Columns to 1 Column, Resized Image, Font Color Change & Resized Button 

two-to-one template
It’s really amazing what you can do with responsive design.

Which option is right for you — scalable or responsive?

Which mobile strategy is right for you — scalable or responsive? Check out the pros and cons of each technique below:

Scalable Design
Pros

Cons

Works everywhere Not a “true” mobile design
Single design
Easy to code
Readable & Clickable in both environments
Responsive Design
Pros

Cons

True mobile-first design Doesn’t work everywhere (works mainly on iPhones & some Androids)
Requires two designs
Coding is complex

As I discussed in my post, “Design for ALL Inboxes,” before choosing a strategy, it’s important to understand your audience and which environments are most frequently used to view your emails (you can do this with Email Analytics).  Once you have this data, you can determine your investment into your mobile strategy.

However, as a best practice, you should use BOTH — a scalable layout that turns responsive! It’s possible to use a single-column design, bulletproof buttons & other mobile friendly techniques and layering responsive design on top of these elements. It’s the best of both worlds.

Do you have a large mobile audience?

Where are your subscribers most frequently opening your emails? How does your email look in the most popular mobile clients? With Litmus’ Email Analytics and Email Previews tools you can find out. Sign up for a free 7-day trial today!

Breakdown your mobile audience →

Additional Resources

  • http://twitter.com/omgitsonlyalex Alex Ilhan

    This is great when you head up a creative team or what-not but when you’re

  • http://twitter.com/omgitsonlyalex Alex Ilhan

    I can’t edit my original comment, sorry about that!

    This is great when you head up a creative team or what-not but when you’re designing and building for a client they don’t want to be limited to single column layouts. They also limit how you can make an email look.

  • http://twitter.com/nadworks Nadja von Massow

    The challenge of 100% compatible responsive emails, which also honour the emerging mobile apps released by popular webmail platforms (Gmail, Yahoo etc.) who do not support media queries is getting ever greater. I have yet to see a genuinely responsive email that does not break or garble up its layout in one or more of the applications it is viewed in.

    In my book, as long as independent email apps for Android or iOX don’t improve their rendering, responsive emails are a no go.

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

      Hi Nadja, thanks for the comment! Email rendering and support has been a challenge for a long time now, and mobile certainly hasn’t made things easier. Anna Yeaman over at stylecampaign has a really nice chart that shows media query support, which is super helpful:
      http://stylecampaign.com/blog/2012/10/responsive-email-support/

      We also recommend making emails mobile-friendly (both on desktop and small screens), then layering some responsive elements on top for those devices that support it. 

      At the end of the day, you have to make the best decision for your company/clients. Even here at Litmus we haven’t gone 100% responsive since we have about 15% mobile openers and a small team. 

  • http://www.facebook.com/jagadeeshlal Jagadeesh Lal

    everything is good
     

  • http://www.facebook.com/jagadeeshlal Jagadeesh Lal

    shall i get the information about how to use icons in responsive UI layout

  • Dinovici

    The emails aren’t scalable by default on Android devices because you have to zoom out to see them. You need media queries to have the email be scaled at the screen size. But using media queries means responsive and not scalable anymore.

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

      A lot has changed in the mobile landscape since we published this post, especially with Android. The Android platform has multiple apps that can be used to read email, and they each handle HTML/CSS a bit differently—for example, the Gmail app doesn’t support media queries at all.

  • Pingback: Email Client Media Query and Embedded Styles Support 2014

  • Pingback: Responsive Email Design | Rosetta Currents