Ideas Behind Responsive Emails

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.