Email Design: Watch your table cell padding…

Anyone who has done a lot of work with email templates/email design will tell you that there are a number of “gotchas” and inconsistencies between email clients.  Email design is certainly not the easiest or the most logical type of work you can do…  One area where I find people commonly making mistakes is in regards to table cell padding.

Test Example: Applying padding to a single cell in a row

It is easy to get used to the idea that tables work across clients and would be a logical thing to use in our HTML emails.  The unfortunate truth is that it really is not that simple.  Cell padding works fine across most clients except in Outlook where it can produce some non-logical results.

Most email clients:

Outlook:

As you can see – Outlook (or rather the word rendering engine in outlook 2007) 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.

You should also watch your set width on cells when using padding on any cell in your tables row.  As always I would definitely suggest to test your templates in multiple clients before sending.  Your template can make or break your campaign.

This is the first article of what will be a series of email design articles.  Subscribe to our blog to be notified as we release additional email design tips.