Build an HTML Email Template From Scratch | How To

Final product image
What You’ll Be Creating

The best way to understand any process is to carry it out yourself, from the ground up. Today, we’re going to do just that with email design, by building an email template from scratch.

Editor’s note: this tutorial was originally written by Nicole in June 2013. Since then it’s become the go-to reference for industry leaders all over the world, and has been used by millions of beginners as a starting point for their adventures in email. It’s as relevant today as it was when it was first published.

Popular Templates on Envato Elements

If you’re looking for a ready-made, professional solution, grab one of our best email templates. We have hundreds of responsive options on Envato Elements, with easy to customize features to get you started.

Popular email templates on Envato Elements
Popular email templates, available (unlimited use) on Envato Elements

Not what you’re looking for? No problem, this tutorial will teach you how to build your own.

Kick Things Off

To begin with, it’s worth mentioning where I pulled some of the resources from.

  • The lovely 2D icons are by Pierre Borodin on Dribbble
  • The typefaces used are Oil Can, Source Sans Pro and Mission Script
  • The social media icons are from Metrize Icons

Now, as we discussed in the previous tutorial, you’ll need to begin your HTML email document with an XHTML doctype:

With that sorted, we can commence building the rest of the structure.

Creating the Body and Main Table

First, we’ll add an overall structure for our email, starting with a tag. We’ll set the margin and padding on the body tag to zero to avoid any unexpected space.

We’ll also add a table with a width of 100%. This acts as a true body tag for our email, because styling of the body tag isn’t fully supported. If you wanted to add a background color to the ‘body’ of your email, you’d need to apply it to this big table instead.

Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table.

Note: We’re going to leave border="1" on all of our tables, so that we can see the skeleton of our layout as we go. We’ll remove them at the end with a simple Find & Replace.

Our first HTML email layout section

“If an attribute exists in HTML, use that instead of CSS”

Now place a centered table of 600 pixels wide inside the container table. 600 pixels is a safe maximum width for your emails to display comfortably within most desktop and webmail clients on most screen resolutions.

Set this width using HTML instead of CSS, by using the width attribute. The golden rule in HTML email development is: if an attribute exists in HTML, use that instead of CSS.

We’ll replace our little ‘Hello!’ greeting with this table:

You might also like More from author

Leave A Reply

Your email address will not be published.