How to Code HTML Email Template

HTML emails are a popular marketing tool and you will almost definitely come across clients that want you to build them. So here are some tips and rules to code a good email template.



#1 Use TABLES for the layout.

Here’s a simple example.

<table cellspacing="0" cellpadding="10" border="0">
 <tr>
  <td width="100"></td>
  <td width="200"></td>
 </tr>
</table>

#2 Use inline CSS

HTML emails do support limited CSS, but you can’t use an external style sheet. Instead, you use inline CSS to style the various elements in the tables.

<p style="background: #cccccc; color: white;">Some text goes here.</p>

The snippet above shows you the basic syntax for inline CSS. As you can see, the code is essentially the same, you just embed it right into the code of your HTML rather than linking to another document.

#3 Be Careful With Images and Width

Use a small document width of the email template (600px) most of mailers don't support a wide width. Image need to be uploaded to a server. Be careful with background images its not a good idea to use it as some of mailers (like hotmail) don't support that css option.

#4 Test your code

After you build a the tenmplate it need to be tested and I'm not talking only about Internet Explorer, Firefox, Chrome is even worse it need to be tested in most popular used email clients Gmail, Yahoo, Hotmail, Outlook, AOL etc.