Learn How To Create a Responsive HTML Email Template

Over the past weeks, after we published the passion responsive email template, we received several email asking for a tutorial on how to create a responsive email template, in this tutorial i will tech you step-by-step how to create a beautiful responsive HTML email template, compatible with all major email clients, you need have basic HTML and CSS knowledge to follow this tutorial, so let’s dive in!

Final Result:

Responsive HTML Email Template Tutorial

Resources :

– icons by BigMug.
– Used fonts Open sans and Rockwel.

Tools :

We will need a simple text editor, i personally like to use sublime text and google chrome browser to test the template.

Useful Tips :

Coding email templates for email clients is different from coding templates for web browsers, Below you find some helpful tips you need along the way.

– Use nested Tables <table> instead of div’s <div>.
– Use inline CSS because some email clients will skip the styling placed in the head section like Gmail.
– Use empty columns for spacing instead of margin and padding, some email client like outlook will add unwanted spacing if you use margin or padding.
– Avoid using Javascript.

Folders and Files Structure :

We will need a main folder, with another folder inside it for images and one HTML file we named it “index.html”.

Assets :

We will need to export some elements from our PSD file(included with the downloadable file) that we will use later, we will need the logo, the features icons, the twitter icon and the social media icons in the footer section, you can learn how to export elements from a PSD file in our previous tutorial here.

Setting HTML Markup :

We are going to start with a basic HTML structure, the structure consist of a title, CSS styling and some meta tags, you may notice we have added yahoo attribute with the “fix” value to the body tag, yahoo tend to ignore & render media queries in desktop to avoid that we added the yahoo attribute, you can name the attribute anything you want but the common thing is to use “yahoo” as the name of the attribute, and we will make use of it later in the next step, you can read more details about it here.

For the CSS part we started by adding a general styling to override the default CSS applied by the browsers, gmail will not take in consideration the CSS placed in the head section but it will not affect our email design, we also added some media queries to make the template responsive, we added two break points one in 600px and the other in 700px, inside the media queries we started each selector with “body[yahoo]” to prevent yahoo from rendering them on desktop as we mentioned before.

As you can see in the final result image, our email template consist of six main sections header, billboard, features, testimonials, call to action and the footer section, each section will be placed in it’s own table <table>, so let’s start first with header section.

Header :

First we are going to start with the header, as you can see below we began by adding a table wrapper to wrap all our header elements, we also added a couple of presentation attributes to the table like cellpading to remove the cells padding, cellspacing to remove spacing between cells, border to remove the border, we will apply these three attributes to all our tables along with other CSS attributes like border-collapse and mso-table-rspace to remove unwanted spacing added by some email clients like outlook, inside our wrapper table we added another 600px width table with a white background, we will use this table to center our header elements, notice we have added “full_width_col” class that we styled previously to change the table width to 100% on mobile devices, then we added two additional tables, one for the logo and the other for the navigation menu as you can see below, notice we added a bottom border to the header using inline CSS.

Billboard :

Now let’s work on the billboard section, we used the same technique as the step before, we first started by a 100% container table with a background image(the background image will be be replaced with a light gray solid color as some email client do not support it), inside the container table we added three additional tables, one for the caption text, one for the tagline and the last one is for the button, we applied some styling to caption and the tagline using inline css, we also added a background gradient color to button and rounded edges.

Features :

We started with a 100% white wrapper table, inside it we put a centered 600px table, we created a three features tables each one aligned next to each other, for compatibility reasons we placed the first and the second features in a separate table and the third one in it’s own table(if we put each feature in it’s own the table we will get a broken design on some email clients), we aligned the first feature table to the left and last two features to the right, each feature contain an icon, a title and a description.

Testimonial Tweet :

Now let’s move to the testimonial tweet, as usual we began with a full width gray container table, inside it we put another centered 600px width table which consist of the twitter icon, the testimonial text, the author and the empty cells are used for the spacing between the testimonials elements.

Call to action :

The call to action section is pretty simple, it consist of two elements the call to action text and a button, we also added the “full_width_col” class to the two elements and the “txt_center” class to the cta text, in order to center the text and change the cta elements width to 100% on small screen devices instead of fixed width.

Footer :

Now let’s move to the last section, the footer combine three mean elements the logo, the copyrights and the navigation menu, we have created a full width container as usual with a light gray background color and a solid top border, inside it we put the three elements in a separate 600px table and centered it, we placed the logo and the copyright text in a separate table that we aligned to the left and the navigation menu in it’s own table that we aligned to the right as you can see below.

And We are Done!, i have tested the template on litmus.com and it’s working perfectly on all important email clients such as Gmail, Outlook, Yahoo mail, Iphone, Android and more.

We hope you learned something new and useful, if you have any question please let us know in the comment box below, we answer all the questions and don’t forget to share this tutorial with your friends.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • Artem

    Very useful tutorial, and quite nice design template on its own. Thanks a lot!

    • Thank you @disqus_ZU9OiPgLjK:disqus for you comment, we are glad you liked it 🙂

  • John

    Mailchimp was removing the second class selector from the Service tables – seems like adding them into one class selector fixes it (class=”full_width _col full_width”) !

  • Jarvis

    I like this.