With HTML, you can’t just set margins, page size, etc. like you can with MS Word. Instead, the email layout should be configured using tables. Here is an overview.
Placing our email with HTML tables
Each email client (where you read your email: Outlook 2003, Outlook 2007, gmail.com or yahoo.com, for example) has its own HTML ‘rendering engine’, which means each email client displays HTML a little different. Email clients, including Outlook and Gmail, don’t consistently support properties like float, margin settings, and padding. As a result, the best bet when designing HTML emails is to design a ‘page’ or email using nested tables for the layout and positioning of your email. Nesting tables will give you more consistent results across all email programs.
For example, to create a two-column newsletter-style email, create a header table, a content section table, and a footer table. Then use the HTML table attributes to control how the tables are displayed. Finally, wrap these three tables in a wrapper table and set the width to 100%. The following diagram shows what this looks like: We have a “container” table that has a table for the header, a table for the footer, and a table in the middle for 2 columns of content. Please note that there are *3* columns for this table: A thin table cell is used to create the gutter between the two columns.
Set widths in each cell, not in the table
Continuing with the previous example, when combining TABLE WIDTHs, TD widths, TD padding and CSS padding in an email, the end result is different in almost all email clients. The most reliable way to set the width of your table is to set a width for each cell, not the table itself. Here is an example of HTML code (NOTE: the opening and closing brackets of HTML < and > have been replaced by [ and ] so they show:
[table cellspacing=”0″ cellpadding=”12″ border=”0″]
[tr]
[td width=”300″] [/td]
[td width=”24″] [/td]
[td width=”300″] [/td]
[/tr]
[/table]
Be sure to set a cell width for each table cell because email clients will not reliably calculate a default width. Also, avoid using percentage-based widths (except for the outer ‘container table’). Clients like Outlook 2007 don’t honor them, especially for nested tables. Stick to setting the width explicitly in pixels. If you want to add padding to each cell, use either the cellpadding attribute of the table or the CSS padding for each cell, but don’t mix the two.
Setting the body background colors
Since many email clients remove the HEADERS and BODY tags, assigning a background color on the BODY or HEAD tag as an embedded CSS STYLE section is pretty pointless. To get around this, wrap your entire email with a 100% width table and give it a background color like this:
[table cellspacing=”0″ cellpadding=”0″ border=”0″ width=”100%”]
[tr]
[td bgcolor = “#004400”]
Hello! This is a ‘hello world’ email showing a basic table with a background color.
[/td]
[/tr]
[/table]
background images in tables
The use of background images is very popular for websites and, to some extent, for emails. However, there is so much inconsistency in the way email clients display background images that it’s best to avoid background images in tables. Outlook 2007/2010, for example, does not support background images in tables.
If you still want to use background images, always provide a background color style to display instead. For example, if your layout has a background image that is primarily blue, set the background color to a similar color for email clients such as Outlook 2007 and 2010 that will not display your background images.
Avoid blank spaces in table cells
Whenever possible, avoid whitespace (spaces, tables, carriage returns) between tags. Some email clients like Yahoo! and Hotmail can add extra padding above or below cell content in some scenarios, breaking your layout for no apparent reason.
Email (table) width matters
Keep tables to a maximum of 600 -720 pixels wide. The message view window of most email clients is about 600px wide and keep in mind that many people now view their email on a mobile browser, so using something wider means your recipient must scroll back and forth to display it. Larger screens mean the appropriate width expands slightly, but if you want your content to be visible, keeping it between 600 and 720 pixels is your best bet.
For more information and HTML email coding tips, download the full 13-page white paper here: HTML Email Design Tips