How to Create an Email Template with HTML & CSS?

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 email templates 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 forward 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 HTML email template is the fact that all of the CSS stylings 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 overall, designing and creating them is not hard – it’s just dull in comparison to the web or mobile design.

The Design

Recommended for you: How to Speed Up Your Design Process Using Modern CSS Frameworks?

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 color and style definition. I would be very careful with what CSS you put in here as it is oftentimes 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 – at 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 designers 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 HTML 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.

You may also like: 7 Useful Tips to Make Your Email Subject Line More Clickable.

Body

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

<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 color as well so that 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 color to match that of the logo. Additionally, there is some padding and alignment too. Now, I am changing the color 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 color. 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;">
<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;"> 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 HTML 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 color and text color 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 color. 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. As 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; </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; </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 HTML 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! You may combine several techniques of creating an email template to make it more unique.

This article is written by Hannah Butler. She works as a web developer and designer. Besides, she likes sharing her experience in the form of articles. In this case, she has her own section on WriteMyPaper4Me.co website. In the future, she is going to start writing a blog in order to describe her working methods to others.