The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

How to Code a Responsive Email from Scratch

What we're going to be building

In this tutorial I'm going to be showing you how I built my free template Crowder. See how it looks below.

The template features:

Mobile responsiveness

Web fonts

Background images inside table cells

Note Everyone's email workflow is different. You may prefer to code or work in a different way and that's entirely fine!

Preparing the design

Before you even open your text editor you should prepare the design you're working from. I like to map out where I'm going to slice up the design (see below) using the Photoshop guidelines. This serves two purposes; firstly, I can see where and how I'm going to slice the images, secondly, I can almost mentally prepare for the build. My mind is already ticking and I'm picturing the table structure in my head.

Preparing your HTML document

I have a skeleton saved out, handily called Skeleton! This is the absolute skeleton of an email build. I like to start from scratch a lot to keep my code clean and succint. If you don't already have one of these I encourage you to save it out. Here is mine, we'll break it down after

Next up, setting the content type and viewport. The following meta tags help ensure random number strings aren't transformed into phone links, and the EDGE meta tag will ensure Windows Phone 8 compatability.

Fleshing out the head

This a boring step but one that is absolutely required. We're going to be adding some important stuff.

First off, I'll be adding my client fixes. Not much to talk about here, these fix a few small bugs and quirks across different email clients. We add these inside our <style></style> tags in the head section.

We have a 640 pixel table that's forced into 100% on smaller screens. The cellpadding="20" gives us an easy way of adding 20 pixels padding around all sides of it that remains consistent across devices. Inside the table we have the return of the <font>.

I have to warn you, we're about to go intp Tableception. Tables within tables with tables within tables within tables. Here's all the code. Don't freak out, we'll disect it now!

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial.