How to Create an Email Template with HTML

As both, designers and developers, one day your client will ask you for an email template for their newsletter of sorts. I must say that emails are not that exciting simply because there is a big gap in support for HTML and CSS. You’d figure that in today’s age it wouldn’t be the case as we are pushing forwards with HTML5 and CSS3. However, I am sad to say that when it comes to rendering emails that is by far not the case.

The first thing to keep in mind when creating an email template is the fact that all of the CSS styling should be done inline. In any other case, this is a very big no-no. But, because there is very little support for external CSS and even CSS in the head, inline is the way to do it. Additionally – and I’m sure you’ve heard about this before – the template has to be created with tables not divs. Once again, this is unfortunate but it is the way to go. Given that emails are not that big over all, designing and creating them is not hard – it’s just dull in comparison to web or mobile design.

The Files

Before we get started I want you to download the necessary images. The zip will provide them for you. This is a very small file as there are only three images being used in this tutorial.
Click to download images

The Design

How to create an email template with HTML 1

The structure

Within the body of the HTML page, paste the code below. Simply by looking at the code you can tell there isn’t much to this email’s structure. That is actually a very good thing as emails should never be complex. So far, there is also a minuscule amount of styling only that which specifies the total table’s width and that there is nothing between the table’s cells.

<table width="700" border="0" cellpadding="0" cellspacing="0" >
    <tr><!-- First row - header -->
        <td colspan="2"></td>
    </tr>
    <tr><!-- Second row -->
        <td colspan="2"></td>
    </tr>
    <tr><!-- Third row -->
        <td></td>
        <td></td>
    </tr>
    <tr><!-- Fourth row -->
        <td></td>
        <td></td>
    </tr>
    <tr><!-- Fifth row - footer -->
        <td colspan="2" ></td>
    </tr>
</table>

The style

Okay, now we are going to add some CSS within the content of the document. It is nothing fancy at all just a reset and a link colour and style definition. I would be very careful with what CSS you put in here as it is often times ignored by email clients.

<style>
* { 
   margin: 0;
   padding: 0;
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

a { 
   color: #464646;
   text-decoration:none;
}
</style>

The Content

The time has come to fill the tables with content. You can find the images within the file provided for you above – in the beginning of this tutorial. Now you should fill in all the text and images that are to be within this email. Please note that in the tutorial you don’t have to actually link the hyperlinks to anything and you are free to use your own images as well. So far within the code, I have defined the width for all three images just to make sure that their size is set.

There is something I need you to be extremely aware of: images are great for emails as long as they are a: small in size and b: have an alt tag that describes them well. I’m sure you know that in order for images to appear within an email, the recipient of this email has to allow the images to appear. If they do not do so, there is nothing to tell them what they should expect. It is also an accessibility issue if you do not provide a description for blind users. However that is another story. So, the lesson is: always use a small image with an alt tag!

<table width="700" border="0" cellpadding="0" cellspacing="0" >
    <tr><!-- First row - header -->
        <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td>
    </tr>
    <tr><!-- Second row -->
        <td colspan="2">
            <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1>
            <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/>
        </td>
    </tr>
    <tr><!-- Third row -->
        <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td>
        <td>
            <h2><a href="#">A PSD just for you!</a></h2>
            <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p>
        </td>
    </tr>
    <tr>
        <td><!-- Fourth row -->
        	<h3><a href="#">The smell of whitespace</a></h3>
            <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p>
            <p>Read more</p>
        </td>
        <td>
        	<h3><a href="#">Web typography trends</a></h3>
            <p>From a user's perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster.</p>
            <p>Read more</p>
        </td>
    </tr>
    <tr><!-- Fifth row - footer -->
        <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td>
    </tr>
</table>

The inline style

The very last thing we will do is provide the inline CSS styling for this email template. It is what makes the email’s appearance as you can see thus far this email hasn’t been looking that pretty at all. I will break this part up into small pieces so that it will not get too overwhelming.

Body

First, let’s set the background colour of the whole email page as well as the default font size and font colour.

<body bgcolor="#f7d973"  style="color:#4d4d4d; font-size:16px;"></body>

Table

The next thing to do is center the email’s content and provide it with its own background colour as well so that is stands out.

First row – header

There are many things going on within the first row’s cell. Please note that the inline style is on the <td> not the <tr>. What we are doing here is a new background colour to match that of the logo. Additionally, there is some padding and alignment too. Now, I am changing the colour of the text to be white because the alt text will be black by default. You will not be able to see it on this background so I am making sure you can by changing the text’s colour. It may seem useless to you but like I said this is very crucial for people who don’t have images allowed by default.

<tr><!-- First row - header -->
   <td colspan="2" style="background: #464646; margin:0; padding: 25px 0; text-align:center; color:#f2f2f2;">
      <a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a>
   </td>
</tr>

Second row

Within the row there is, once again, only one cell that spans two columns. This cell is being manipulated slightly by adding some padding to it and a breaker line at the bottom to separate its content from the row below. We have a big headline too which is getting some space through margins. And, that is it for this row.

<tr><!-- Second row -->
   <td colspan="2" style=" text-align:center; padding-bottom: 20px; border-bottom: 1px solid #999;">
      <h1 style="margin: 20px 0;"><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1>
      <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/>
   </td>
</tr>

Third row

For both of the cells here we are setting both, width and padding. They are exactly the same so that the cells are split evenly in half. Besides that there is nothing else as the cells are filled with an image and some text about it.

<tr><!-- Third row -->
   <td style="width:320px; padding: 30px"><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td>
   <td style="width:320px; padding: 30px">
      <h2><a href="#">A PSD just for you!</a></h2>
      <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p>
   </td>
</tr>

Fourth row

This is by far the most stylized section of this email template. As you can see by the code below there is a lot going on. First, the whole row is getting a new background colour and text colour to make sure the text is visible – just like in the header. Both, the first and second cell and their content are getting the same exact style changes. First, the cell itself is getting a new background and text colour. Then, the link within its heading is changed to yellow. Lastly, the last paragraph is being underlined and to add some separation a margin is added too. Like I said, the second cell and its content are getting the exact same stylization.

<tr bgcolor="#464646" style="color:#f2f2f2;"> <!-- Fourth row -->
   <td style="width:320px; padding: 30px">
      <h3><a href="#" style="color:#f7d973;">The smell of whitespace</a></h3>
      <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p>
      <p style="text-decoration:underline; margin-top: 10px;">Read more</p>
   </td>
   <td style="width:320px; padding: 30px;">
      <h3><a href="#" style="color:#f7d973;">Web typography trends</a></h3>
      <p>From a user’s perspective web-safe fonts were great but from a designer’s perspective it was a creative disaster.</p>
      <p style="text-decoration:underline; margin-top: 10px;">Read more</p>
   </td>
</tr>

Fifth row – footer

And finally, the footer. There is very little going on here; just some spacing via padding and that is it!

<tr><!-- Fifth row - footer -->
   <td colspan="2" style="padding: 30px 15px;"> Copyright info and unsubscribe info</td>
</tr>

Final words

This tutorial is a little lengthy but I do hope you now understand what it takes to create an email template from scratch. It is not a complicated concept but it can be tedious. Now, it is your turn to go out and start making amazing looking, high end emails!

Advertisement