Understanding HTML email development

When faced with developing a HTML email template you may be lost in a world of examples that don’t quite explain things clear enough. That’s ok most documentations are like this, they tend to not go into much detail and sometimes this can confuse us and put us off using there framework.

To better understand how to code a HTML email template we need to break it up into bite sized bits of code that we can easily digest, by setting our code out into modular patterns we can better understand the code in use.

In this post i am going to break up the development process of creating a HTML email template focusing on the HTML table code used to create HTML email templates.

The Boilerplate

For the structure of our page we will use the following code.

The Wrapper

Within our boilerplate code we can add our wrapper, this will provide a align center fix for yahoo and padding for mobile.

The Container

The container will house of content and allow us to create various responsive grid options. We add the following code inside of wrapper where it says content in comments.

The Mobile Stack

To make our modules reponsive we can add a mobile class to our surrounding tds. In the example below we have two tds at a width of 300 inside a container of 600. This creates a two column structure which will stack on a mobile device. To do other grid sizes our tds simply need to add up to 600, so we can create various structures using the modular code below.

When the two columns are stacked on mobile they will need some spacing to separate them. We can do this by adding the following code in between on two tds. See example below.

The CSS

You may of noticed at each stage we have used classes on our table and td tags. We need to add the following CSS to our style tag in the head to activate the responsive stacking for mobile.

Styling text, links & template elements needs to be done in-line. Of course there are in-liner tools but i recommend doing this manually as you will learn much more this way. To style our text, links & template elements we simply add a style tag to our surrounding tds.

Please note : when using font-size on surrounding tds you will need to set a line-height at 6px+ of the font-size.

This will stop your texts from disappearing in lotus notes & outlook email clients. When using images inside a td its important to remove any style tag with a font-size & line-height, having this inplace can cause rendering issues with Outlook (2013).

Understanding HTML Email Development

If building solid HTML email templates is a priority to you then you can continue learning how to build HTML email templates by using the Email Framework. I hope you enjoyed this bite sized introduction to understanding how to build HTML email templates and that you give the Email Framework a try to build your email templates.

Visit Email Framework


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith