Grow your CSS skills. Land your dream job.

Ideas Behind Responsive Emails

Published by Chris Coyier

Say you've designed an HTML email with 3 columns. Because of limited and weird CSS support in email clients, email design is done with tables. That 3 column design looks great on large-ish screens, but it squishes awkwardly on small screens. Theoretically a media query would save us here, but as we can't even count on floats we sure can't count on those. There is still a way though.

In this article, I'm just going to poke at some ideas around responsive email. These are not robust, production-ready ideas, I just thought it was fun to think about. It was inspired by listening to Fabio Carneiro speak recently. Fabio works for MailChimp doing all this hardcore email layout wrangling and shared some of the ideas behind responsive emails in that talk. He also has a Treehouse Course on email.

Jason Rodriguez also wrote a bit on the topic recently.

Rows with align="left"

Here's some chunks in a layout:

You might think: each of those will be a <td>. But no, if that was the case you'd never be able to get them to wrap in the limited CSS world of emails.

Actually, each chunk is a <table align="left">. Align is an ancient, deprecated attribute, but it's still supported in all email clients. It's sort of like float, but we can't use float. I think of it more like you're making the table behave like an inline-block element. You can control it's width, it can sit on the same line as other stuff, and it can still wrap.

So that would be like:

<table class="main-wrapping-table">
  
  <tr>
 
     <td>
  
         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

         <table align="left" style="width: 33.33%">
         </table>

    </td>

  </tr>

</table>

There would be slews of other inline CSS in there as well, doing centering and whatnot, but this is the layout concept.

Extending that idea to some other rows with different numbers of chunks, we get this:

Not too bad of a base for using nothing any email client can't use.

Breakable Rows with min-width

Some email clients support min-width. So if we put that on the chunks that need it, we can get those rows breaking at a reasonable place.

You could put the CSS right on the table chunk, like:

<table align="left" style="width: 33.33% min-width: 200px;" class="chunk">
<table>

A bit better. Now each chunk will break where it needs to and never get too squishy.

Fill space with @media query

Some email clients support @media queries, so if that's the case, we'll target those chunks and make sure they fill the space better when those breaks occur.

/* Figure out where the breaks happen and use that in the media query */
@media (max-width: 400px) {
  .chunk {
    width: 100% !important;
  }
}

A little bit better yet. You could do better than I did there, making sure all the breaks all happen just as you plan.

Not too wide with max-width

Just as too-squishy is bad, too wide can be bad too. Might as well limit the container table in browsers that support max-width.

<table style="max-width: 600px; margin: 0 auto;" class="main-table">

</table>

Demo

Again, this isn't quite production-ready, it's just demonstrating the ideas.

See the Pen "Responsive" Email by Chris Coyier (@chriscoyier) on CodePen.

If you want production-ready, I'd probably use Email Blueprints by MailChimp. Seems like they use a rigid, fixed breakpoint. So it just either displays a "desktop" or "mobile" version depending on screen space available. "Adaptive" design, as it were. I could see that being desireable in HTML email design.

Comments

  1. Jay

    Good stuff. Thanks!

  2. A Cool Idea but I am wondering if Email client can read External CSS/LESS/SCSS with media queries why we are creating email templates on tables when it could be make on divs and that will make life more easier.

    • Gumnos

      I’m pretty sure that most mailers wouldn’t allow it (I’d have to test a variety to make sure), but it has the same information-exposure vulnerability as allowing external images to be loaded. Each email could reference http://example.com/${UNIQUE_TRACKING_TOKEN}.css which would then let the sender know if/when an email was opened/viewed. So I’d expect that, even if it was possible, the user would need to explicitly enable it.

    • Felix Susanto

      you can’t load external css or at least not all email client supports it, to my knowledge you can’t rely on layout with div either, as email clients have varying supports of CSS.
      chris have some article and guidelines on this topic, and some explanation why we have to stick with table layouts. and last, one way too use CSS preprocessor such as LESS, SASS is to compile them into regular CSS. put inyo head tag, and use a link to convert them into an inline style css.
      hope this helps

    • Felix Susanto

      Sorry, on my last comment what I meant by ‘link’ to convert is to use this link : Premailer that can be found on Chris’ article using-css-in-html-emails-the-real-story

      Hope this helps!

    • Shaz3e

      I am confused with media queries I need to test it out once to clear mind.

    • Email will not read external styles. Add them to the head of your document then paste them in to Mailchimp’s nice tool for dumping your styles inline. http://templates.mailchimp.com/resources/inline-css/

    • One reason they don’t read external styles is that you could easily record when emails are opened with some creative server-side code. You’d have IP addresses and assuming some query-string tomfoolery, you’d be able to track habits of people pretty clearly. There are privacy implications. Although you may not do this… there are many email marketers who most definitely would.

      Only Google is allowed to track individuals (and you wondered why Google Analytics was free to use for 99% of its user base) :-)

  3. Insightful article as usual, Chris!

    To piggy back off Felix:
    Most email clients completely remove any head and even body tags, so inline styles is your only safe bet. Luckily there’s [Premailer] (http://premailer.dialect.ca “Premailer”) to help you inline all your external or internal styles when ready.

    If you want more great resources on where to start with designing Responsive HTML Emails, I wrote an extensive tutorial a few months ago. It has a free template you can use to start making your own email. Just click on the link to my website, or click here for the tutorial.

  4. Nour Akalay

    I know that you’re not a big fan of frameworks Chris, but since you are recommending Mailchimp why not Ink by Zurb
    It’s reponsive and claims to let you:

    Quickly create responsive HTML emails that work on any device & client. Even Outlook.

  5. Yeswanth

    Excellent article…
    Really like it …. dude…
    It is good article not only in the sense of the relative layout in email clients. But it is also saying, what e-mail clients won’t allow us to use, what they allow….

    Thanks Chris

  6. Jack

    Nice one man!
    So its better to use the Mailchimp mail client for this Chris?

  7. I work as a front-end engineer, but in a Marketing department so email development is part of my daily life. Sadly…

    I really like Zurb’s email templates, http://zurb.com/playground/responsive-email-templates . I know you have mentioned them before on your show. I think what troubles people about email is when you start adding images, borders, CTAs and all of the pieces together while trying to maintain a balance and with good percentages without going insane.

    I think this is what frameworks like 960grid, Bootstrap, Zurb have been saving people from.

  8. I agree with using the mailchimp blueprint email templates. They are fantastic and have helped me out in the past. I feel so much appreciation for the guys and girls who must work on those!

  9. Brendan

    Margin: 0 auto isn’t going to work in a few of the most popular clients, you could use align=”” or even though.

    What you can/can’t use

    http://www.campaignmonitor.com/css/

  10. Paul van Steenoven

    Floating tables is a dangerous thing. I work in e-mail design and especially outlook 2007, 2010 and 2013 they handle floating tables quirky, adding margin and depending its contents it stacks the tables like a ladder revealing white space.

    The safest way across all email-clients, in my experience, is to still handle columns as TD’s and put the min-width and display block, width 100% in the media query.

  11. I’ve made quite a lot of responsive emails over the past couple of years and there are a few points I’d recommend:

    NEVER use horizontal padding, want a space somewhere? use an empty table cell (MSO and others have weird spacing issues)
    Create the desktop layout entirely with inline styles, any mobile things can go in style tags in the head (!important flags are needed)
    Use attribute selectors in the css instead of class selectors, I’ve never actually come across any programs that have issues with this, but I’ve read about some that have. (So it’d be block[class="blockClass"] { })
    Campaign monitor is your friend.
    GMail app on android sucks.

  12. Interesting, and very sound ideas, except Outlook likes to add extra space and the three table alignment needs lots of extra coding to show up, lest they wrap. Go ahead; send that code to yourself to an Outlook 2013 client.

    You need to add some border-collapse settings to the containing table, and for good measure reduce the font-size and line-height of the containing TD to ensure everything butts up. Outlook has a bad habit of seeing any spaces as a non-breaking space character.

    • That’s good to know. Just to say it again as I said in the article: this isn’t production ready code. It’s just to introduce some of the clever thinking that goes behind making “responsive” emails from a foundation that doesn’t require media queries or other more advanced CSS.

  13. @Robert, excellent tutorial, thanks!

  14. Raph

    As to email clients not being able to render responsive emails, here is what I do.

    I simply take my mailing list, filter out gmail and other smart email clients and then only send the responsive version to them. All other receive a regular version. No need to try to put the detection in the mail itself when you can simply filter out your mailing list.

  15. Lucre van Breda

    I don’t think outlook supports percentage widths?

  16. Benjamin Knight

    Having spent many man hours in the trenches of email code on “big production” emails like Yelp’s Weekly, I can say without a doubt that the best overall approach to email is using flexible widths as a cross-device approach. Use media queries for small enhancements when you have them (e.g. margin adjustments & image dimensions). Tell designers to avoid multi-column email designs and keep the message as simple as possible. When multiple columns are necessary, you can use min-width on the container to force mobile clients to zoom out a little bit which is often slightly nicer looking and more legible than extremely narrow columns of large text.

  17. Strangely, max-width doesn’t work on iOS, so I’ve had to use something like this instead:

    @media only screen and (min-width: 606px) {
    .content {width: 605px !important;}
    }

  18. I’ve been trying Ink (http://zurb.com/ink/) framework. I had some good experience with this for newsletter in mails. It supports a lot of clients, browsers and mobile devices. It got some good rules to follow and it doesn’t take long to get started!

  19. Andrew Leach
    Permalink to comment#

    Thanks for sharing, a great article as usual.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".