How to create a responsive two column email template

We recently launched a newsletter and I wanted to share how I’ve built our own email template. It may help you with your email campaigns.

This isn’t just a copy & paste “tutorial”. I will guide you to understand how the template works and how you can benefit from it.

What was the goal?

My plan was to create a two column design email template which I would have fully under control and it would be supported by the major modern email clients.

From my point of view, it wouldn’t be efficient to create it in one of email builders such as MailChimp or Campaign Monitor. Why? It would probably never fit our needs and design expectations.

How does it work?

There isn’t any straightforward “template” or “boilerplate” that puts all the “how it works” and “simple code snippet” together. However, I found a lot of useful information about CSS email support on Their guide helped me a lot to hack the whole process.

Of course, there are more rules to follow and best practices how to code a working email template. This blog post is aimed only to responsive email templates.

The testing stage

It took me quite a long time to understand how various email clients work. Especially, when talking about design. It’s not too hard to imagine how frustrating and time-consuming is testing the template over and over again in each email client.

Email clients are hell! There are only few things worse than coding an email template…

But we did it! It works in Gmail for iPhone/Android, Gmail web client, MS Outlook, Mozilla Thunderbird, Yahoo web client and iPhone/Android native apps.

The code

When I’ve finally finished with the working template, I executed the basics on which you can build your own email newsletter or transactional email template. Here it is. You’ll find all necessary comments in the HTML code in the snippet below.

See the Pen Simple responsive two colum email template by by frantisekvrab (@frantisekvrab) on CodePen.

Enjoy, share and feel free to discuss in the comments below.

Loading Disqus...