The How-To Guide to Responsive Email Design

[ 17 By

Responsive email design has been growing steadily in popularity, and it’s no surprise as to why: 47% of email opens are on a mobile device, and some brands see upwards of 70% of their emails opened on mobile. These brands turn to responsive design techniques to create better experiences for their subscribers, and in many cases, increase their click and engagement rates.

The foundation of responsive email design is built upon CSS3 media queries, which can be confusing and complicated to learn. And like everything else in email, they don’t work quite the same way in our inboxes as they do on the websites we view in browsers.

Enter our how-to guide for responsive email design. See what is possible with responsive email design, how to implement media queries in your design, and support for responsive emails in various mobile email applications. When you’re ready to move to the next step, check out comprehensive list of mobile email resources, which includes templates, tutorials, responsive case studies, and more.

Click on the graphic for an enlarged view. The entire text of the graphic is also available below.

how-to-responsive-email-design-infographic

Embed this infographic:

Stats to Tweet:

  • 47% of email opens happen on mobile devices [Tweet this]
  • 80% of people delete an email if it doesn’t look good on their mobile device [Tweet this]
  • Studies find people look at their phones an avg of 150 times/day [Tweet this]
  • iPhone Gmail app & Android Gmail app do not support responsive email [Tweet this]

Re·spon·sive de·sign (noun)
A collection of techniques, such as media queries, fluid grids, and fluid images, which aim to provide the optimal viewing experience across various platforms.

Why Responsive Design?

  • 47% of email opens are on mobile devices, yet many emails are only designed for desktop viewing. Text is often difficult to read, details in images are hard to see, and links are impossible to click on mobile.
  • Studies have found that people look at their phones an average of 150 times a day. These brief interactions mean that you must focus on getting your point across quickly.
  • 80% of people delete an email if it doesn’t look good on their mobile device.

What is Possible with Responsive Design?

The possibilities are endless, but some common uses of responsive design techniques include:

  • Changing hierarchy
  • Changing navigation
  • Enlarging fonts
  • Changing colors
  • Changing layout
  • Scaling images
  • Adding padding
  • Changing or hiding content

How to implement responsive email design

Responsive email uses a media query, also known as @media—a special set of CSS styles that act like conditional statements or dynamic rules. Carefully planned, they can help make emails more readable on different screen sizes.

Media queries detect the screen size of a device and then “turn on” different sets of rules based on that screen size. These can be very simple to implement or quite complex, depending on what you’d like to accomplish. They do require more planning and testing than standard emails, and don’t work in all email clients.

The Query

In the context of email, media types define which CSS styles to use based on screen size. This media type states “If the email is viewed on a screen size of 480px or less, use the following CSS.”

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

The Styles

Combined with the media query, the style rules act like conditional ‘if-then’ statements, triggered when the specified screen size is detected. There can be many styles, or just a few.

Change Navigation
This style moves navigation items to their own row that spans the entire width (100%) of the table

table[class="nav"]{ width: 100% !important; padding: 10px 0 20px 20px !important; }

Enlarge Fonts
Here, font sizes inside table cells named ‘body-header’ are increased to 18px

td[class="body-header"]{ font-size: 18px !important; } 

Change Colors
Any fonts contained in a table cell named ‘body-copy’ will display as the color #dddddd

td[class=”body-copy”]{ color: #dddddd; } 

Add Padding
A simple style adds 15px of padding to table cells with a class of ‘body’

td[class="body"]{ padding: 15px !important; } 

Change or Hide Content
The display property can be used to hide table cells

td[class="mobile-hide"]{ display: none; }

THE HTML

Each style in the CSS rule block specifies the type of container or element (for instance, the entire table or just a table cell) the style should effect. These rules must be assigned and referenced in the HTML in order to be applied.

CSS:

td[class="body-header"]{ font-size: 18px !important; }

HTML:

<td align=“left” class=“body-header”>

For example, the element (td) and the class (”body-header”) used in the CSS must match those used in the HTML.

Support for responsive email

Don’t forget to test your responsive design in a variety of email clients and mobile devices to be sure it displays the way you planned—differences in devices, manufacturers, applications and screen sizes can all impact how your email appears. With the help of responsive design, you can simplify your message and make it easier to read and interact with on the small screens of mobile devices. Responsive email design offers benefits such as increased usability, higher read rates, along with better performance and click-through rates.

Responsive emails are supported by:

  • iOS Mail app
  • Android 4.x Email (OEM) app
  • Windows Phone 7.5
  • BlackBerry OS7
  • BlackBerry Z10

Responsive emails are not supported by:

  • iPhone Gmail app
  • iPhone Mailbox app
  • iPhone Yahoo! Mail app
  • Android Gmail app
  • Android Yahoo! Mail app
  • BlackBerry OS5
  • Windows Mobile 6.1
  • Windows Phone 7
  • Windows Phone 8

For a comprehensive list, visit the StyleCampaign blog.

Devices vs. apps: What determines support?

It’s a common misconception that media query and responsive email support is based on the device or operating system being used. In fact, it’s the application used to view the email that determines support. In other words, it’s possible to view the same email in two apps on the same phone, each with different support for responsive design.

About Litmus

Agencies, designers and marketing teams worldwide use Litmus’ email preview and analytics solutions to test, target and optimize their campaigns. We help make email better.

Visit litmus.com/giftcard and use coupon code N8GZLT for a free 14-day trial.

Sources

  • Joe Garite II

    Hey Justine, I thought the formatting of the CSS such as td[class="body-header"] was no longer necessary as it was a workaround for an issue in Yahoo email clients that has been repaired by Yahoo. Is this still needed?

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

      That’s correct, Joe. Campaign Monitor wrote up a nice post about it, here: http://www.campaignmonitor.com/blog/post/3964/yahoo-mail-listens-to-us-now-comes-with-less-quirks

      We’re still using the attribute selectors ‘just in case’ Yahoo! ever decides to change their mind :)

      • http://www.elliot-ross.co.uk/ Elliot Ross

        quick note on those – we do catch all attribute selectors, which makes it a bit easier, eg. *[class="header"] instead of td[class="header"]

        also the general CSS housekeeping things like trying to apply classes to css concepts rather than specific pieces of the layout etc. help keep things tidy

  • https://gplus.to/stephanhov Stephan Hovnanian

    holy moley. fantastic job guys!

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

      Thanks, Stephan!

  • Anders

    Hi! What about the issues related to header and style tags being removed by some email clients? In that case how to use the media query?

    • Jarrod

      The styling isn’t placed in the header, it’s placed in the tag under a tag. For those that support @mediaquery it isn’t removed, so it’s a non issue.
      Edit: Disqus keeps closing my tags…

      • Anders

        Ok:) But is it not correct that style tags can’t be used in gmail?

        • Jarrod

          Gmail for mobile? Correct, as it’s not supported (http://stylecampaign.com/blog/2012/10/responsive-email-support/). As for Gmail Web Mail, there’s no need for it as all styling will be in-line.

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

            Thanks for the assist, Jarrod! While media queries aren’t supported everywhere, they greatly improve the experience for users reading emails on devices that do support them. I’d also encourage anyone to take a ‘mobile first’ approach to their email designs before layering in responsive elements.

  • http://www.gamefed.com/ James Pylyp

    Hi guys. Do you have a reference for the ’80% of people delete an email if it doesn’t look good on their mobile device’?

    I would like to use it with the marketing department where I work to convince them of this!

  • Michael Smith

    Very nice infographic. What I’d really like to see, though, is how people who can’t afford to ignore the non-supporting clients (in my case, largely Android Gmail and various flavors of Outlook) construct responsive emails to account for them.

    I’ve yet to be able to navigate the maze of poorly supported alternatives to a solution I (and the people who have to sign off on them) find acceptable.

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

      Thanks for the kind words, Michael! Believe it or not, all flavors of Outlook will support responsive design (you just need to coax them a little bit!). However, Gmail apps on both iPhone and Android strip out CSS styles in the , making any responsive elements a no-go.

      What we’ve seen many people do (and we take this approach ourselves), is to create a ‘mobile first’ email that will look great in any mobile or desktop environment, and then layer responsive elements on top of that for the clients that support it.

      More info in these links:

      http://www.emaildesignreview.com/email-design-best-practice/a-note-on-responsive-email-design-1447/

      http://www.lukew.com/ff/entry.asp?933

  • alison

    best blog post to date

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

      Thanks for the kind words, Alison!

  • Pingback: The 9 Best Email Marketing Tips From 2013 | Vero Email Marketing Blog