1) In the CSS block, start with these styles:

Remember to add the CSS just underneath the opening body tag, not inside the head like you would when building a website.

2) Contain the whole email in a table. To center the email, use align=”center” in the table tag, not in the body tag.

Make sure to add all these elements in every table tag used in the HTML.
Only use align=”center” on the outer table or all your text will be center aligned!
You must define a width, background colour and font on all tables.
Remember that the width of the outer table must not exceed 550px.
Always use tables as div’s and span’s aren’t supported in all email browsers.

3) All table columns should be given a width and background colour:

Remember to keep all the content inside the table cell on the same row.

4) To style text, add the styles to the table cell and give it a class:

Remember to repeat these styles in the CSS block at the top, like this:

Always define the font size, colour and line-height for all text.
Remember that text renders a lot smaller in Gmail than in all other email browsers.
Text also needs space to breathe. Make sure there’s plenty of space vertically and horizontally in the table cell where you want the text to go.

5) HTML character encoding – Make sure that you hardcode HTML characters:

Find all codes here

6) To style links, add styles to the link tag and give it a class:

If the link is inside a block of text, you only need to define the colour and whether or not you want it underlined.
If the link is in a table cell on its own, you have to define the font-size and line-height in the table cell as mentioned in part 6.

7) Only use .jpg’s where necessary. Try to use as many .gif’s as possible to reduce the size of the email

Try to use as few images as possible to make the size of the email smaller.
The size of the HTML and images should be under 150kb if possible.
Remember that it’s easier to pass a spam test with fewer images.
Optimise the .jpg’s at 80% when exporting.

8) When adding images to the email you have to define the width and height and add border-style:none and display:block:

Remember that background images don’t work in emails. Make sure live text isn’t over a background image in the design.

9) To create vertical spaces, use transparent .gif’s with a defined height and a 1px width:

Don’t stretch the images. If you need a vertical space of 10px, create a 1×10px image.
This is useful if you want to space blocks of text out.
Try to stick to a naming convention for these e.g. 1×8.gif.

10) Before the email is finished, follow these steps:

Make sure the email passes the HTML validator. Ignore the bit about the style tag inside the body.
Get the correct links. The links are the most important in spam tests so make sure you have all the links.

I test my emails in Hotmail, Gmail, Yahoo, Entourage, Outlook 2003 and 2007.