Responsive Email Templates

by Colin Nederkoorn

Design in email is usually a mess. Sure, it’s easy to get a photoshop jockey who makes you a great looking picture of an email. To actually deliver a great looking email to multiple email clients – that’s the mess.

Starting last week, we rolled out a new responsive email template for Customer.io. I like it so much, I want to give it to you guys too.

Rather than only giving you the finished product, you’ll probably benefit from learning what we went through to make it.
<!– more –>

Start with a design?

Having some experience, we had a good idea of what we wanted. Email has limitations, and if you set your expectations within those, it’s great to start with a design.

Give your designer clear guidelines and you should get an awesome result. Here’s what I sent to Steve, our designer:

Could you do an email template design for Customer.io consistent with the new branding we have?

A good example for styles we’ll need is probably our current welcome email. Beyond the button on it I’d want to cover:

ul, il, img, h1, h2, a

And here’s what came back:

Click on it to make sure you see the full thing. We were happy with the design. Then it was time to get it in to code.

Note: If design isn’t your strong suit, start with a good looking template and add your logo to that

Write your code from a solid foundation

I’m lazy. I hope you are too. When you see a great foundation to start from, grab it with both hands.

Several months ago, the good folks at the design agency Zurb released their responsive email templates. These templates are a great starting point. They do a good job of working on Gmail’s client on iOS and Android too. I’ve griped about Gmail not supporting @media queries which is the preferred way by most people to make emails responsive. Gmail not supporting it means you need to try a different tack. Zurb’s (and now our) emails are responsive in gmail (except with images – but that’s another story).

Email responsiveness across all the clients is no trivial matter so starting with tried and true methods is recommended.

Customize and add your unique elements

While Zurb’s email templates have some great base styles, you’ll probable want to customize those and add some additional elements of your own.

We added or tweaked things like:

… to show you a couple. We also changed the font sizes and made other changes to the basic styles. My recommendation is to have an email styleguide which shows every element you might use in an email all on one page.

Test test test

You’ve made a great layout that looks perfect in your email client and your test file on your browser. But what about everyone else’s email client?

Making sure emails look good everywhere is an order of magnitude harder these days than getting stuff to work in a web browser.

We use Litmus.com to make sure that the emails are going to look great in the places we care about and acceptable in others.

Litmus tests 37 different ways someone might see your email. You’d be nuts to try testing all of these ways yourself. Litmus will save you a huge amount of time.