I have experience creating many e-mail campaigns and e-mail templates (HTML based emails). Over the years I have learned what works and what does not work. Here are my Top 10 Dos and Don'ts you can learn to follow.
Following these 10 rules will help you create a more reliable, consistent and better looking emails.
Unlike website / web pages, your email will be viewed inside email clients like Outlook (worst client), Apple E-mail app, mobile devices, iPads, web based clients like GMail, Hotmail, etc...
Unfortunately these email clients do not render your emails the same way. If you think browser incompatibilities are bad, you will hate email clients, because they are much worst. Proprietary platform apps like Outlook, Thunderbird, Apple Mail app are worst than the web based counterparts like GMail or Hotmail.
Keep width at 600 pixels or less
Keeping your main table cell width at 600 pixels or less will ensure best compatibility. Especially when your email is being viewed on mobile devices.
Use tables, especially for layout
You should start your content with table tag. In other words, you should put all your content inside nest tables, starting with the first main table.
Set width inside each table cell (not on the table tag itself)
Do not use this:
<table width="100"><tr><td>Blah blah</td></tr></table>
Instead do this:
<table><tr><td width="100">Blah blah</td></tr></table>
Do table nesting to adjust table alignment instead of using left / right margin
When you need to adjust positioning for a particular table or element, do not use left / right margin attributes, instead try to use nested tables (create more tables and set the cell's width).
Avoid white spaces between HTML tags
Do not leave empty spaces between <table><td><tr> etc... some email clients do not like these white spaces and will screw up your email.
Use inline CSS instead of using CSS declaration blocks
Yes, this is against most web development best practice, but it makes sense because an email is not a web page. And your email does not always be viewed from a web browser. Email clients have limited capabilities, using inline CSS will ensure best compatibility.
Avoid using PNGs, use JPG and GIF instead
A few email clients like Lotus, does not support PNG image format. Trust me, stick with JPG and GIF instead.
Avoid using background images like gradient background fill
Imagine you have white text over a colored background, but since the background image does not get loaded during initial view, your reader will see nothing! That would be horrible!
Avoid using image as spacer / placeholder
Don't use clear pixel or white single pixel image for spacer or placeholder! It will not work properly because image may not be loaded upon initial email rendering.
Don't use floats (you will have horrible time if you do)
Haha.. no shortcuts, you have to use tables for layout and positioning!
Test, test, test
Use tools like Litmus (they have free trial) to test how your email will look across 20 - 30 different email clients.
