...
- 650px or less design width
The general rule for email size is to keep it 650px or less in width. This allows the email to display correctly (overall) in most of the email clients and display configurations. - Simple layouts are best
With email design simple is better. If you try to do a complicated design you will encounter a lot testing and debugging email client issues. If you are looking to complete a more advanced design be ready to use a lot of tables and to set a good amount of time aside for testing. - Use basic HTML tables
To create the overall layout you will need to use standard HTML tables. CSS floating and layout techniques will not render properly across all the email clients. - Be careful with table cell padding
Outlook will take the padding from any cell in a row and apply it to all of the cells in the row. This could result in some visual changes that you do not want. You should try to either apply the same padding for all cells in a row OR place an inner div or table (that has padding) within the cell that you would like to have padding. (More Info) - Avoid using colspans="" in your tables
Some email clients do not fully support those and others will have display issues for the other cells if you have a colspan.
- Simple layouts are best
With email design simple is better. If you try to do a complicated design you will encounter a lot testing and debugging email client issues. If you are looking to complete a more advanced design be ready to use a lot of tables and to set a good amount of time aside for testing.
CSS
- Do not use external stylesheets
They will not work in a lot of the email clients and you should be including all of your CSS using inline CSS within your HTML. - Do not use CSS classes - always use inline CSS
Many email clients do not support CSS classes. Instead of declaring CSS classes you should use inline CSS. An example would be <div style="color:#cccccc;">content</div> instead of <div class="cssclassa">content</div> - Don't use CSS shortcuts
CSS allows you to normally set properties in groups. Such as style="font: 12px, Arial" Instead of grouping such attributes you should set each part individually. Such as style="font-size:12px; font-family:Arial" - Avoid using CSS float or position options
Some email clients will disregard both the float and position CSS options. Try to use tables instead.
...