How to Create Html Emailer From Scratch

Let’s Build a Email Newsletter from scratch today.

Before we begin to create Html we have to view how the design looks like.So here is our design.Simple and to the point.

How to Create Html Emailer From Scratch

View Live | Download Now

Few important points to keep in mind

1.
We need to create a html page in tables.
2. Classes should be inline.
3. Use absolute paths for the images once uploaded on server.
4. Set your cellpadding and cellspacing to zero to avoid any unexpected space in the table.
5. Try to build the mailer in 600 pixels width as any thing more will bring in horizontal scroll.
6.Set the margin and padding on the body tag to zero to avoid any unexpected space.
7.You can use padding on TD tags but not on P tags or DIVs as they are more unpredictable.
8.Set the valign to “top” for cells that contain content and are side by side to each other so that they will vertically align to the top, even if one column has more text than the other.
9.Always set Border=”0″ on the image tag to avoid a blue link border.
10.Try to remove all the comments in your code when done with the coding.
11.Avoid use of CSS shorthand properties.Use longhand properties.

Note:

If it’s very important to display the content of your mailer then avoid the use of images to display text.As images do not display by default for various clients.Avoid the way I have created my header with the logo:) I did it as I was little short of time.

Getting started with the Html

First Step – Setting up the document template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FastTrackCreations Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;">
</body>
</html>

We’ll set the margin and padding on the body tag to 0 to avoid any unexpected space.

Second Step – Body

Open a main table of 600 width and create 4 rows in it.Keep the table border width set to 1.

<table style="border-style: solid; border-width: 1px; border-color: #cccccc; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px;" width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

Fill the 1st Row with black background color and keep the height maximum to 10 in length.

<tr>
<td align="center" bgcolor="#171717" height="10"></td>
</tr>

Looks like this so far

tut-img1

2nd Row will consist of FastTrackCreations logo and a light grey background color.We  will add padding to the TD tag to create proper spacing.

<tr>
<td align="center" bgcolor="#fdfdfd" style="padding: 40px 0 30px 0;">
<img src="http://www.fasttrackcreations.com/emailer/images/mailer-graphic.jpg" alt="Fast Track Creations" width="300" height="230" style="display: block;" /> 
</td>
</tr>

We’ll center the image by adding align=”center” to our TD tag.You must have noticed I have given display:block property to the image.This is because it’s a common fix that stops some email clients adding gaps underneath your images.

We’ll also add an alt tag which is important for the user to understand the content as in most cases, images are not shown by default.

Looks like this so far

tut-img2

Here we will disable border for our main outer table to bring focus on inner tables that we will be creating here onwards.In place of that bold black outer border a thin border appears with grey color that is because we have added the following code on our style tag on the main table as per the design requirement.

border-style:solid;border-width:1px;border-color:#cccccc;

3rd Row will consist of our content section and here we will create another table with 600px width divided into 3 rows.

<table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

Looks like this so far

tut-img3

Now in Inner 1st Row place the heading – “A little bit about me”. We need to style our text as well so we will use this particular style on our TD.

<tr>
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> A
little bit about me</td>
</tr>

Looks like this so far

tut-img4

Replace Inner 2nd Row  with the content- “I am Nikhil Malhotra, a Delhi-based Web/UI designer and Front End developer. I create effective web solutions that are labelled by my clients as user-friendly, functional, simple and elegant.”

We have given padding to create space.We will style the text as well so we use this particular style on our TD.

<tr>
<td style="padding-bottom:30px;padding-left:0;padding-right:0 ;padding-top:20px; color: #153643; font-family: Arial, sans-serif; font-size: 15px; line-height: 20px;"> 
I am <strong>Nikhil Malhotra, a Delhi-based Web/UI designer and Front End developer</strong>. I create effective web solutions that are labelled by my clients as user-friendly, functional, simple and elegant.
</td>
</tr>

Looks like this so far

tut-img5

Finally Inner 3rd Row which will consist of our portfolio images that require a 2 column structure as per the design we made. To keep things simple we place another table with width 600 divided into 2 rows and 3 columns.

<table width="529" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">&nbsp;</td>
<td>&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td valign="top">&nbsp;</td>
<td>&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</tbody>
</table>

Looks like this so far

tut-img6 Crop your portfolio images in width=250 and height=140 and place in respective containers.

<table width="529" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="250">
<img alt="100marks Project" src="http://www.fasttrackcreations.com/emailer/images/100marks.jpg" width="250" height="140" />
</td>
<td>&nbsp;</td>
<td valign="top" width="250">
<img alt="iDubba Project" src="http://www.fasttrackcreations.com/emailer/images/Idubba.jpg" width="250" height="140" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td valign="top">
<img alt="Freeky Traveler Project" src="http://www.fasttrackcreations.com/emailer/images/Freeky.jpg" width="250" height="140" />
</td>
<td>&nbsp;</td>
<td valign="top">
<img alt="Rashtriyaswabhiman Project" src="http://www.fasttrackcreations.com/emailer/images/Rashtriya.jpg" width="250" height="140" />
</td>
</tr>
</tbody>
</table>

Looks like this so far

tut-img7

Final Step – Footer

Fill the 4rth Row with dark background color.Use padding on TD to create space.

<tr>
<td bgcolor="#171717" style="padding-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px;"></td>
</tr>

Looks like this so far

tut-img8

Now we create Inner footer table with width 600 and divide it into 2 columns.

Looks like this so far

tut-img9

In first column place this textual information and style the text. This is our copyright line and unsubscribe link.

® www.fasttrackcreations.com 2013
<a style="color: #ffffff;" href="#"><span style="color: #ffffff;">Unsubscribe</span></a> to this newsletter instantly

Looks like this so far

tut-img10

Now we are left with our social icons that need to be placed in the 2nd column.We create another table with 3 columns as we want to avoid the use of colspans and rowspans.

Looks like this so far

tut-img11

Place our social icons in respective columns. The width and height of each icon will be 38 respectively.

We want to display the social icons on right hand side so we add align=”right” to our footer table 2nd column.

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a style="color: #ffffff;" href="#">
<img style="display: block;" alt="Facebook" src="http://www.fasttrackcreations.com/emailer/images/fb.png" width="38" height="38" border="0" />
</a>
</td>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a style="color: #ffffff;" href="#"> 
<img style="display: block;" alt="Twitter" src="http://www.fasttrackcreations.com/emailer/images/twitter.png" width="38" height="38" border="0" /> 
</a>
</td>
<td style="font-family: Arial, sans-serif; font-size: 12px; font-weight: bold;">
<a style="color: #ffffff;" href="#"> 
<img style="display: block;" alt="Linkedin" src="http://www.fasttrackcreations.com/emailer/images/linkedin.png" width="38" height="38" border="0" /> 
</a>
</td>
</tr>
</tbody>
</table>

Looks like this so far

tut-img12

Run Validation:

Let’s run this through the W3C Validator to make sure nothing is bad or broken. If you’ve followed along exactly, it will say that it has passed.


Okay Nice! It’s Valid

Touch Up:

As a final touch, I’m going to add 20px of margin to top and bottom of our main outer table to prevent our email from sticking from top and bottom in some webmail clients.

We must test the html in different mail windows.

For that check these sites here where you can see how your design looks across various web clients:

https://litmus.com/
http://www.emailonacid.com/

All looks good then we need to disable all the borders of the tables that are set to
width=1.

Just find border=”1″ and replace with border=”0″.

Final Words:

In my experience it is difficult to get identical look for your mailer across different clients but the important thing is to deliver the message across clearly.If you are able to do that then no need to worry about small issues related to space or text style etc.Though it’s my personal opinion.

I have tried to go as deep as possible for the tutorial but if I have missed on some points or if you have any idea to make it better then please post your comments below.

Looking forward to hear from you all…

More Resource on the topic across the web:

– Creating HTML Emails: An Overview for Web Designers/
– How to Create Great HTML Emails with CSS
– Creating and Sending HTML Email

 

Written by Nikhil Malhotra


Hi! I am Nikhil Malhotra, a Web/UI designer and Front End developer. This is the area of my website where I share my knowledge in form of tutorials and articles.

 
This entry was posted in A Guide, Tutorials and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *