I have been doing these (at quite times) for my work for a while now. There are many pitfalls with HTML emails. Different Email clients render HTML differently from each other and make IE6 look advanced.
Here's a summery of what I've learned so far.
- Use in-line CSS: Styles aren't always supported.
- Use table layouts: I know, but div layouts are css dependent and many of the email clients can't cope.
- Don't use rowspan: This causes weird spacing issues.
- Don't use background images: Support for these is limited.
- Style image tags with "display:block": This fixes weird spacing issues with hotmail.
- If using multiple tables nest them in one parent table: This stops more weird spacing issues.
- Don't use Javascript: Again not supported very well.
- Make sure your email is legible with no images: The user may not load them.
- Provide an online version and link to it: This lets users see the intended content, even if their email client is terrible.
- Test, test, test: Just because it works in one email client doesn't mean it works in others. A big got ya is Outlook 2007. It uses word to render HTML (sigh).
This is far from a comprehensive list, but should set most people on the right track.
