Guidelines For Proper Use of HTML In Email

By Don Monell on January 22, 2010

There is nothing worse than creating a well constructed HTML document that renders perfectly in your web browser only to find it mangled when sent to your Gmail account.

What To Do?

1. Use tables for layout. You're welcome to try "div" tags for positioning and layout, but our research shows that tables are more consistently supported. But do very simple layouts, avoiding lots of nested tables.

2. Use inline styles liberally in tables. In fact, you'll find you can get the best mileage out of inline styles in "td" tags. That way you are setting up little style regions within each table. Think of these inline styles as miniature style sheets. This allows non-technical users to swap content in and out of pre-formatted cells in a modular fashion.

3. Avoid background colors in table cells that contain other tables.

Proper Handling Of Images

1. Define background images using background. Instead of the inline background-image call. Gmail, among others, will ignore any URL attribute in an inline style. Keep in mind, though that if the background image is ignored, the default color is going to be white. That means your white text on black backgrounds will disappear. Stick with text colors that are visible against a white background.

2. Don't use images for important content like calls to action, headlines and links to your web site. Outlook, Gmail and others turn images off until allowed by the user. If your entire email is graphical, all your recipients are going to see is a lot of broken images.

3. Provide alt text for all images.

4. Declare BOTH height AND width parameters for images. Outlook Web Access especially needs this for your table layout to display properly.

Specific Elements That Can Not Be Used:

1. External or embedded style sheets (those contained within the "style" tag above the "body" tag). This is the most important thing to avoid. Many email services cut everything above the body tag and disable external style sheets.

2. JavaScript. There's no better way to have your email marked as spam. Not all email clients can handle the scripts, and most web-based systems disable scripts as a general rule to prevent malicious code from being executed on a system.

3. Table width greater than 600px. Considering most email is viewed in a preview pane table width of 600px or less is the industry standard

4. Embedded video. This will work with special coding in Apple Mail, but the most popular web-based email clients - Yahoo!, Gmail and Hotmail are choosing to disable HTML video from playing. So play it safe and link to a web based player.

This should get you headed in the right direction to better looking, better converting email. If I can assist you further please call me at 631-306-9361 or email me at dmonell@anchorcomputer.com