HTML Email Design Tips – How to Layout Your Email With Tables

[ad_1]

With HTML, you can’t simply set margins, page size and so forth as you can with MS Word. Instead, the email layout should be set up using tables. Here is an overview.

Laying our your Email with HTML Tables

Each email client (where yo read your email – Outlook 2003, Outlook 2007, gmail.com or yahoo.com for example) has its own HTML ‘rendering engine’ – which means that each email client displays HTML a bit differently. Email clients including Outlook and Gmail don’t consistently support properties like float, setting margins and padding. As a result, the best bet when designing HTML emails is to lay out a ‘page’ or email using nested tables for the layout and positioning of your email. Table nesting will give you more consistent results across email programs.

For example, to create a two-column newsletter-style email, create a table for the header, a table for the content section and a table for the footer. Then use HTML table attributes to control how the tables are displayed. Finally, wrap these three tables in a container table and set the width to 100%. The diagram below shows how this look – 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. Note 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 into an email, the final result is different in almost every email client. The most reliable way to set the width of your table is to set a width for each cell, not for the table itself. Here is an HTML code example (NOTE: the HTML open and close brackets < and > have been replaced with [ and ] so they display:

[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 cell in the table because the email clients will not reliably figure out a default width. Also, avoid using percentage based widths (except for the outer ‘container table’.) Clients like Outlook 2007 don’t respect 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 CSS padding for each cell, but don’t combine the two.

Setting Body Background Colors

Since many email clients strip your HEADERS and BODY tags, assigning a background color in the BODY or HEAD tag as an embedded CSS STYLE section is pretty fruitless. To work around this, wrap your entire email with a 100% width table and give that a background color like this:

[table cellspacing=”0″ cellpadding=”0″ border=”0″ width=”100%”]

[tr]

[td bgcolor = “#004400”]

Hi There! This is a ‘hello world’ email showing a basic table with a background color.

[/td]

[/tr]

[/table]

Background Images in Tables

Using background images is very popular for websites and to some extent emails. However, there is so much inconsistency in the way email clients display background images, that it is best to avoid background images in tables. Outlook 2007 / 2010 for example, do 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 design has a background image that is mostly blue, set the background color to a similar color for email clients like Outlook 2007 and 2010 that will not display your background images.

Avoid Whitespace in Table Cells

Where possible, avoid whitespace (spaces, table, carriage returns) between the tags. Some email clients like, Yahoo! and Hotmail can add additional padding above or below the cell contents in some scenarios, breaking your design for no apparent reason.

Email (Table) Width Matters

Keep any tables to a maximum of 600 -720 pixels wide. The message display window of most email clients is about 600 pixels wide and keep in mind that many people now view their email on a mobile browser, so using anything wider means that your recipient needs to scroll back and forth in order to display it. Larger screens mean the appropriate width is expanding slightly but if you want your content to be seen, the best bet is to keep it within 600 -720 pixels.

For more information and HTML email coding tips, download the complete 13 page whitepaper here: HTML Email Design Tips

Craig Stouffer