Responsive design is thought of generally as just a technique for websites. People don’t generally think about the role it plays in emails.

But they should.

Designing for email is a different beast. If you thought designing for websites was a pain, then you haven’t had to deal with the different email clients out there that exist.

Some things to know:
— Most mobile clients support media queries, but some do not
— Desktop clients usually filter out more HTML than mobile clients
— Outlook plays by its own rules (it uses the Microsoft Office Engine)
— You generally want to design email using as low-level of HTML as possible

You may need to use conditional tags in emails that have to deal with Outlook.

Here’s a basic, 1 column layout. It’s responsive in the sense that it uses media queries and swaps out / replaces an image depending on the size of the screen.

The design is simple. If the width is 515px or smaller (around the size of the bigger image), then it is swapped for a more mobile-friendly image.

However, Outlook doesn’t support media queries. Nor does it support the inline CSS styling of “display:none” — so you get 2 images showing on the page instead of just 1. And so, as a fallback, you can set the width and height to 1, but NOT to 0, as that will be filtered as well.

More importantly though, you can tell Outlook to ignore the image completely using conditionals.

The following tells Outlook 2007+ to ignore everything within the conditional tags:

<!--[if !gte mso 9]>-->

It isn’t ideal, but it does the job and keeps mobile phones, as well as desktop email clients, happy.

I haven’t tested this template with too many different mobile devices and email clients. I ran a Litmus test, but the trial expired before I could check everything. The screenshots looked good though.