Creating a Simple Responsive HTML Email

In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.

Media Queries: Only Half the Solution

There was a time when media queries were quite enough to get responsive emails working in iOS and Android mail applications, both of which support media queries.

Since then, there has been a proliferation of mail applications created for both iOS and Android platforms, with varying degrees of support for responsive email development methods.

Most notable is the latest update to the Gmail app for Android, which is twice as popular as the default mail app for Android users (which now comprise 11% of total opens). It has never supported media queries, and still doesn't, however it now scales down your emails by compressing the size of the outer table to fit within the viewable area of the screen. It's difficult to control and, when your entire email relies on media queries to display properly on mobile, generates some very unpleasant results.

Why Fluid Is the New Black

The good news is that you can design and build an email that will look excellent in every mail app, including those that don't support media queries. You can do this by using a fluid layout.

There are, however, a few design compromises that you have to make. Those lovely equal column layouts that stack to a single column don't work so well using this method. If you can learn to live without them, there are some very functional designs that can work extremely well.

What we are creating here is our basic page with its header, doctype and container table with a background colour applied (to both the body and a big wrapper table, since styling of the body tag isn't fully supported). For more information on this basic setup, see Build an HTML Email Template from Scratch.

I've then added our main content table to the centre with a class of 'content'.

Pay Attention

Note: You will notice that in this tutorial I'm going to be placing CSS in the head of our document. I generally place styles in the head when I am going to re-use them, and keep one-off styles inline.

Important: Whenever you use CSS rules in the head of your document, you must use a tool to bring it all inline at the end of the process. If you use a service such as MailChimp or Campaign Monitor, they will automatically offer to bring your styles inline for you when you import your design. You must do this because the some clients, such as Gmail, will ignore or strip out your <style> tag contents, or ignore them. You can also use a tool such as Premailer to bring your CSS inline. If you use Premailer or a similar tool, remember to take out your media queries before processing (since we want them to remain intact), then re-insert them at the end. MailChimp and Campaign Monitor automatically take care of this for you.

Hiding Mobile Styles From Yahoo!

You will notice that the body tag has an extra attribute. Yahoo Mail loves to interpret your media queries as gospel, so to prevent this, you need to use attribute selectors. I find the easiest way to do this (as suggested by Email on Acid) is to simply add an arbitrary attribute to the body tag. I use the suggested 'yahoo' but it could be anything you like:

<body yahoo>

You can then target specific classes by using the attribute selector for your body tag in the CSS.

body[yahoo] .class {}

Two Tricks to Master the Fluid Method

As you can see, our 'content' table is set to be 100% wide so that it will be fluid and take up the full width of smartphone and tablet screens. We'll also set a maximum width of 600px to avoid the email taking up the the entire screen on bigger devices.

There are now two slightly tricky things that we need to address to ensure that everything displays as planned across all email clients. These two fixes are thanks to Tina Ye's excellent tutorial on this method which is available over at FogCreek Blog.

1. Overcoming the Lack of Max-Width Support

Unfortunately, max-width is not supported by all email clients. In order to get our email to display properly in Outlook and Lotus Notes 8 & 8.5, we need to wrap each table in some conditional code which creates a table with a set width to hold everything in. It targets IE (which is the rendering engine used by Lotus Notes) and Microsoft Outlook.

2. A Fix for Apple Mail

Weirdly, Apple Mail (normally a very progressive email client) doesn't support the max-width property either. It does support media queries though, so we can add one that tells it to set a width on our 'content' class table, as long as the viewport can display the whole 600px.

We create our 70px table and also add some padding which will act as our gutter between the two columns. The padding on the bottom will add vertical breathing room when the two columns stack on mobile.

Right Column

We'll create the right column by again aligning a table to the left. This table is going to be 445px wide, which will leave us 25px to spare on the right hand side. This very is important because Outlook will automatically stack your tables if there isn't at least 25px to spare on any given row.

As long as you allow at least 25px of breathing room, your tables will behave as expected.

Stop! Alternative Tip for Tricking Outlook

To get around this quirk, you could also use conditional code to trick Outlook into thinking that you have closed a cell and opened a new one. After the closing tag of your first table, and before the opening table tag for your second, simply add:

<!--[if mso]>
</td><td>
<![endif]-->

Carry on..

On the wider, right-hand table, we're going to use the same approach we used on our container table, which involves creating a class and adding the conditional wrapper code too. We want this table to be 100% wide on mobile, where it will pop down below the table on the left.

Here you can see that I have created a class called 'col425' for this table, our 425px wide column. I've wrapped the table in the conditional code that will enclose it in a 425px wide table. We then add our class to the Media Query that we created for Apple Mail too.

Our header is now complete, and you can see below how the two columns will stack on mobile. (To preview this while you work, you'll need to temporarily comment out the min-device-width media queries, because they are enforcing a fixed width on desktop).

Creating the Single Column Text Row

To create a single column text row, we simply add a new row to our '.content' table. We'll add an 'innerpadding' class to these rows with some reusable padding values. We'll also add a class of 'borderbottom' to apply a border to each row.

We've added a button here with the class 'buttonwrapper'. It contains a padded cell with a background colour set, and then a text link inside. I prefer to use this method as it allows you to have fluid width buttons which is very useful when creating a reusable template, where the width of every button will be different each time it is used. If you have a fixed width for your buttons you may prefer to use the Bulletproof Button Generator over at Campaign Monitor.

Optimising Buttons for Mobile

On mobile, it's ideal if the whole button is a link, not just the text, because it's much harder to target a tiny text link with your finger. Because it's not possible to have this work on all desktop clients (padding isn't fully supported on <a> tags), it's something that I add to the mobile version using media queries.

We'll have to strip the colour from the <td> to which it is currently applied, and then apply it back to the <a> tag along with lots of padding.

Now when you tap anywhere on the coloured button on mobile, it's a link!

Further Enhancements With Media Queries

If you wanted to, you could now start making enhancements to your layout by applying class names to elements that you wish to control, and then creating the new rules inside the media query we just created above.

As an example, we'll turn our unsubscribe link into a button, by adding a class to the link:

You could also target the .innerpadding, .header and .footer classes to reduce the amount of padding on clients that support media queries.

Test and Go!

Finally, as always, make sure you validate (using the W3C validator — you should only get one error for the proprietary 'yahoo' attribute on the body tag) and test really well using live devices and a web preview service like Litmus or Email on Acid.

Enjoy creating responsive emails that look great in every email client!

To take what you’ve learned to the next level, check out the next tutorials:

Email designer and developer and lover of all things email. Owner of Email Wizardry, an email design and development studio in Victoria, Australia. Occasional blogger and slightly more frequent tweeter.