e-marketjing

Right, this post is about “How to cre­ate a basic clean HTML for e-mail”.

First of, I expect that you have basic knowl­edge of HTML 4.0 Markup Lan­guage and knowl­edge of slic­ing a Pho­to­shop tem­plate.

Sec­ondly, I always cre­ate E-mails from scratch with a Text edi­tor or Dreamweaver, never let Pho­to­shop auto­mat­i­cally cre­ate one HTML for you. My opin­ion is that if you do let Pho­to­shop cre­ate HTML for you, you have less con­trol over what you actu­ally need or don’t need in the HTML itself.

So start­ing of, you most prob­a­bly have designed a beau­ti­ful e-mail which you want to con­vert into HTML for e-mail. Look at your design in Pho­to­shop and check if back­ground images aren’t mixed with fonts which you want to keep as a text selec­tion in HTML.

If you spot­ted any, then find an alter­na­tive solu­tion because back­ground images aren’t sup­ported in all e-mailclients.

An e-mail tem­plate consist’s of mainly 3 parts:

a header, a body and a footer.

• In the header you put infor­ma­tion like “weblink ver­sion”, “Why your cus­tomers received the e-mail” and maybe a “Snippet”.
• In the body you place your con­tent, your mes­sage to your cus­tomers. Be clear (short) and write spe­cific towards your customers.
• In the footer you’ll put infor­ma­tion about pri­vacy pol­icy, dis­claimer, copy­right, unsub­scrib­tion, adress, com­pany busi­ness infor­ma­tion, cham­ber of com­merce num­ber, white-labeling your e-mailadres.

Keep­ing the above in mind, I’m going to explain an basic HTML tem­plate which con­tains just these 3 parts.

An e-mailtemplate is always build up in a table con­struc­tion. With table tags you have 100% con­trol of each design ele­ment you just sliced and saved in the images folder. So count­ing for top to bot­tom you would have 3 rows for each part.

This means you will need at least 3x <tr><td></td></tr> within your table tag. Some­thing like this:

<table>
<tr><td>header</td></tr>
<tr><td>body</td></tr>
<tr><td>footer</td></tr>
</table>

Then you give your “table” the exact “width” of your widest width in your design. Usu­ally you cre­ate an e-maildesign of max­i­mum 750 pix­els wide. Then you keep the value of the “bor­ders” zero so you have no unwanted spaces. Every­thing needs to be tight con­nected. The same you will need to do for the “spac­ing” and “padding”. And I will already fill in the header and footer text.

Also you want to cen­ter your table oth­er­wise it will stan­dard align to the left and looks ack­ward in Hot­mail or Gmail.

Your new code will look like:

<table width=“750” cellspacing=“0” cellpadding=“0” border=“0” align=“center”>
<tr><td align=“center”>This e-mail was send to example@​example.​com. Can’t see the images prop­erly? <a href=”#URL_WEBLINK” title=“Click here” target=“_blank”>Click here!</a></td></tr>
<tr><td></td></tr>
<tr><td align=“center”>
Copy­right 2010 © | <a href=”#URL_TO_UNSUB_FORM” title=“unsubscribe” target=“_blank”>Unsubscribe here</a>
</td></tr>
</table>

Then you will insert the images to their des­ig­nated place. Let’s say you have only one image in the con­tent area in the body and that your e-mail design was blue and a white font. The image needs to be aligned right.

Your new code is:

<table width=“750” cellspacing=“0” cellpadding=“0” border=“0” bgcolor=“blue” style=“color:white;” align=“center”>
<tr><td align=“center”>This e-mail was send to example@​example.​com. Can’t see the images prop­erly? <a href=”#URL_WEBLINK” title=“Click here” target=“_blank”>Click here!</a>
<tr><td>Lorem ipsum dolor sit amet, con­secte­tur adip­isc­ing elit. Viva­mus tin­cidunt port­ti­tor molestie. Mau­ris eu laoreet lorem. <img src=”#URL_TO_IMAGE” alt=“example” width=“50” height=“50” border=“0” align=“right” vspace=“10” hspace=“10” /> Vestibu­lum ante ipsum primis in fau­cibus orci luc­tus et ultri­ces posuere cubilia Curae; Duis nibh metus, euis­mod a ele­men­tum eget, var­ius ut nunc. Morbi eu est diam, a ultricies nunc. Nunc con­se­quat ornare metus nec pulvinar.</td></tr>
<tr><td>
Copy­right 2011 © | <a href=”#URL_TO_UNSUB_FORM” title=“Unsubscribe” target=“_blank”>Unsubscribe here</a></td></tr>
</table>