Creating email newsletter margins with tables

This may seem painfully obvious to some, especially the more seasoned old school table based web designers out there, but I’m still amazed at how many email newsletters don’t render properly in my inbox. Remember when it comes to email newsletters tables are king and web standards go out the window! It sucks, but that’s the way it is, so lets move on.

Use tables everywhere

And I do mean everywhere, I can’t stress this enough, tables are your friend when it comes to email newsletters. They will ease much suffering, so use them everywhere. The all mighty spacer gif is your next best friend when it comes to table based design, and style=”display:block” is your third best friend. Here’s why.

Margins don’t work in email newsletters!

Margins are one of the most important css styles used today along with padding. Some email clients strip out margins and padding can be very flaky in others, so what are you to do? You can start by not using them at all. Don’t bother trying to style your paragraph tags either, I always stress letting them default to whatever the email client likes to do with them. Forcing them to do what you want will probably look wonky in some mail clients. Leave them alone and don’t bother with margins or padding, it’s less work for you and your email newsletters will look better for it. You will never have the control you have with web pages.

Suppose we want this example below.

In a normal webpage this is a padding div with text and a second div floated right with CSS margins and a paragraph of text  for the caption. In the email world it looks like this.

Red represents an outer table and green represents an inner table. In a real world example of a robust email newsletter you would most likely have far more nested tables then this, but this illustrates our need for tables. Each corner table has a 20×20 pixel, and the inner green table is aligned to the right. A great tool to illustrate this in real time with your own work is the Web Developer Firefox addon by Chris Pederick, which allows you to outline your tables within the browser amongst many other things.

Table based layout tips

Remember that a spacer gif should be a 10×10 pixel by default and then stretched to the desired size even if that size is less than 10×10. A 1×1 pixel will not stretch properly in some versions of Outlook due to a very strange bug.

Each spacer gif should also have an inline style of style=”display:block”. Many email clients like Gmail will leave white space below all your images making your layout look messy. This same rule applies to visual images, especially if the email is image heavy as you will have white lines caused by space below all the images if you forget to add this to all your images.

When using tables don’t forget how fonts work with different email clients. Newer versions Outlook for example will not cascade your fonts properly when used in tables, and clients like Gmail will rip out your embedded styles. The solution to this is to use both methods only once eliminating the need to splash font family and font sizes throughout your email newsletters.

With patience it’s possible to make email newsletters that work in many email clients and are somewhat clean at the same time. Look at email newsletters as yet another exciting challenge to conquer and you might not pull all your hair out. Happy coding.