Responsive Email Design

May 31st, 2012 by Rich Barrett

As more and more email is being read on mobile devices, we strive to find ways to make them look as good as possible in that environment. In web design, there has been a fairly new movement towards what is called “Responsive Design” which allows you to create one website that magically (by “magically” I mean after a ton of thought and work is put into it by designers and developers) reformats itself for optimal viewing on different devices. The same process can be applied to email design but like anything with email what might seem easy on the surface can be steeped with technical challenges.

How Do I Create Responsive Emails?

Let’s start by explaining the basic concept. The way Responsive Design works is by checking the width of the device’s viewport by using a line of code within the head tag called a “media query”. Here is an example:

@media only screen and (max-width: 480px) { … }

What this does is check to see if the screen width is less than 480px wide (which is equal to an iPhone in landscape orientation) and then activates a set of specified styles that would be listed within the curly brackets. If you wanted to target tablet screens you could have another media query that looks for a max-width of 768px. And if you specifically want to target an iPhone in portrait orientation you would use another for 320px.

In addition you’ll need to set the Viewport Meta Tag, which means adding another line of code to the head that will most likely look like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This article on Webdesign.tutsplus.com outlines the different options in this tag and what they do.

What Is The Advantage Of Using Media Queries?

By June of this year, more people will read email on a mobile device than on a desktop computer or webmail client. Wouldn’t you want to make your emails as readable as possible on those small screens? The simplest approach that has become the minimum standard for developing mobile-friendly emails is to use a font size large enough to be readable on both desktop and mobile browsers but it can be difficult to create one design that satisfies such a large range of screen sizes in this way.

If you do nothing else, the biggest advantage of using responsive design in emails is the ability to set different font sizes for different screens. This is most beneficial in text-heavy emails like newsletters. Here is an example from Mass Transmit’s own email newsletter. On the left is a section of the email viewed on an iPhone without the media query in place. On the right is the responsive version where the font size is increased for better legibility.

   

 

Media queries are also useful for optimizing your layout. Again, with our newsletter when you shrink our 640px wide header down to 320px our logo and tagline are barely readable. Now, we just redesigned this logo and really want people to be able to see it. By building the header responsively we can have the tagline drop down to a second line so that neither image needs to be scaled down.

    

 

Other common uses might be: collapsing a two column layout into one column or hiding or repositioning some elements to better prioritize content for the smaller screen.

Why Would You NOT Want To Use Media Queries?

Like I said in the beginning, this isn’t magic. It takes a lot of work and in some cases using responsive design in an email can be more frustrating than with a website. Here are some things that will make you tear your hair out:

Lots of extra planning – Think about your mobile design first. If you have to go back and retrofit media queries into an email that wasn’t designed for it you’re going to find yourself redesigning, rebuilding and rethinking what you’ve already done. But even with proper planning you’re going to find yourself putting in a lot more time in design and development than you normally would for a simple email. But in today’s world of designing for multiple devices this is unavoidable.

You still have to make it the old way too – If you didn’t already know, Gmail strips out any stylesheet information you put in the head tag and that includes media queries. To work around this we’ve always used inline styles (individual styles written directly into the elements they are affecting) but that doesn’t help us here since media queries need to be called from the head. So, to accommodate for Gmail (and other email browsers that don’t support this) we need to cover all our bases and still build the email using inline styles in combination with classes and ids that we can call with the media query. This means that even when you are using media queries you still have to go through the trouble of making sure your email works on mobile screens without them.

Tables and media queries butt heads – We’ve become conditioned to use tables to layout our emails since CSS support is so iffy from email browser to browser. However, the nature of tables contradicts the whole concept of responsive design. It’s hard to reposition or collapse elements when they are set in tables with fixed sizes attached to them. This is not to say it can’t be done and in fact it is probably still easier to use tables than to not use them but you have to be careful about fixing sizes and instead need to control those sizes with inline styles and classes.

Be careful how much you make users download – It’s tempting with both responsive web and email design to use media queries to hide certain graphic elements on mobile or serve up a different graphic created specifically for one screen size or another. The problem with this is that the user will have to download every graphic used in your email whether you’re showing it to them or not. This is an issue if your user does not have a data plan that will support your graphics-heavy emails.

Is Responsive Email Design Right for Me?

In the end, the decision to use the Responsive Design approach for email will depend primarily on three considerations:
Audience: If a large portion of your audience is reading email on a mobile device, responsive design may be a good idea.
Budget: Additional design and development time will be required.
Content: Text-heavy newsletters will benefit from responsive design, while graphic heavy emails it may be easier to design one email that reads well across all devices.

  • http://twitter.com/DoodleMatt Matthew LaFleur

    I spent countless hours working on a new responsive newsletter design for the company I work for. All seemed to function well. Then we tested it on a Windows machine running Outlook 2007/2010. We discovered that Outlook would only display the one column mobile version. I’m guessing this has to to do with an issue like the one in Gmail? We scrapped it (for now) since most of the industry we serve is on PCs w/ Outlook and the majority isn’t reading their email on mobile devices. Too soon, I guess.

  • Anonymous

    Approved

  • Anonymous

    Matt, I think the issue there is that Outlook has limited and iffy CSS support. If you’re laying out your columns with positioning or floats then I think Outlook ignores those still. That’s part of what makes this all so frustrating. At this point there’s only so many email readers that you can satisfy so like you said you have to pick which ones are going to be the most important ones to target for your particular email.

  • Orchata8

    Great informative post.

  • Anonymous

    Approved

  • Pingback: Responsive Email/Webpage Design – Basis « Juan Matías de la Cámara Beovide

  • Steven Daoud

    How could you ever possibly know what email clients any given user could be using? In the actual article you make no mention of the vast spectrum of email clients that could possibly be rendering a given email. Furthermore, the idea of designing for some clients and not others is not only a disservice to your client but irresponsible. The idea of a “responsive” email is gimmicky and ridiculous, unless of course you’re using plain, wrapping text and nothing else. 

  • http://masstransmit.com/ Mass Transmit

    Steven-
    Rich (the author of this post) is on vacation this week but here’s some additional information for you.

    You can determine what email clients your audience is using through a variety of methods. We rely on Litmus Email Analytics (https://litmus.com/email-analytics) to help us understand that. We’ve learned that nearly 34% of our newsletter recipients use mobile devices to open their emails and that we still have about 5% using Lotus Notes. So analytics like that help us understand how recipients receive our email.

    As for the design, the solutions we’ve presented are tailored to work on as many email clients as possible. Even the responsive solution has a fallback to assure that the email will look good on email clients that don’t support media queries. So we’ve found using responsive design is not “gimmickly and ridiculous”- it actually provides a better viewing experience for the 34% of our audience on mobile devices, and those that don’t see the responsive design still get a normal-looking message. So there’s really no downside to including responsive elements other than the additional time for development and testing.

  • http://yannick-mireur.blogspot.com Yannick Mireur

    Hello,An idea for how to make an element appear ONLY in mobile e-mail clients?
    I tried:@media only screen and (min-device-width: 350px) {.element {display: none !important;}}
    But many e-mail clients don’t support “display-none”…

  • richbarrett

    Yannick, “display: none !important;” should work on any email client that is going to allow CSS and media queries to begin with. If I’m reading your comment correctly you might be structuring it backwards though. The display:none should be set as the default and actually used as an inline style on the element itself. Give that element and ID as well and then overwrite that attribute in the media queries. By using min-device-width: 350px (should be 320 I believe) you’re targeting the mobile device rather than the desktop so that may be your problem right there.

    Another possible workaround to display: none is a bit more complicated but you could set the element off the stage with absolute positions and a left:-9999px or something like that. I’ve used this on websites but never tried this in an email but again, this and display: none should work on any client that is going to read any of the CSS to begin with.

  • retlaw7

    Calm down there buddy. Use a company like Litmus or ReturnPath and you can have a very crystal clear idea of what email client your users are using. And responsive email is not gimmicky. I’ve found it extremely useful when I find a company using @media. Sign up with a company like Toms Shoes email, and see for yourself.

  • retlaw7

    Well said.

  • Pingback: Game-Changers In Email Marketing Best Practices | wacarra

  • Pingback: Be The Go-To Expert On Your Email Marketing Team | wacarra

  • Pingback: Today’s Delicious Links « distractions

  • http://graphility.com/ Hector Hurtado

    I’m having the same or very similar issue here. I created a responsive template that I want on two columns for displays > 320px, and on one column elsewhere.

    I paid attention to code using tables for layout when they made sense, and CSS to style the rest. My code now works perfectly on IE8 + all modern browsers, but of course is only “good enough” on Outlook 2003-2010.

    Outlook is displaying everything in one column, no matter what.