Design Checklist for Compatibility Across Email Clients

When creating email templates many people just dive right in and start coding some beautiful CSS driven layouts. I will admit I was one of them. However, the world of email template design is actually a nasty and dark world. It’s filled with the mundane, the over bearing, and the old school. If one isn’t careful it is easy to fall into the perils of Outlook 2007. So I’ve compiled a checklist of design notes to insure that your design goes off without a hitch.

1. Use Tables

Many email clients will accept CSS, but others will not. Therefore, make sure your layout uses tables. I know this is tedious and against all inclinations, but it works.

2. Defined Width for <td> tags

This is mostly an Outlook 2007 issue. If the <td> tags doesn’t have a width defined the rendering flips out and decides it doesn’t know where anything goes.

3. Display Block for Images

This will fixes spacing around images and things going completely crazy.

4. Image Dimensions Defined

Do this as a best practice. Period.

5. Full Size Images

Outlook 2007 doesn’t like stretching images and there is only one way around it. You have to put the full size image in the email. As designers we normally keep a small snippet of the image say for a border then stretch or repeat it. Don’t or you will find out the hard way in Outlook 2007.

6. Cellpadding, Cellspacing to 0

Set the cellpadding and cellspacing of your table to zero. This will make layout life much simpler and rendering will be better.

7. Limit CSS Use

Limit CSS use to inline styles and for text formatting. Positioning and floats etc. will not go well in most email clients.