Web development, coding & SEO

How To Code HTML Email Newsletters

Written by TimSlavin, http://www.reachcustomersonline.com/2009/01/23/09.27.00/

Please note a version of this article is published at SitePoint which includes links to related articles on their site. Changes to this article are noted at the bottom of this article. This article has been online since 2004.

HTML email newsletters have come a long way in the past five years since this article was first written. They’re still a useful way to get a web page delivered to interested readers to encourage them to visit your website or have your readers perform an action. The email marketing process also has become routine.

This article brings you up to date on how best to code HTML email so that it will display well in most email software. It provides an exhaustive overview of how to code html email newsletters (even in Outlook) with links to free html email templates, CSS compatability tables, services that test your html email, and much more. As a result, this article strives to provide a comprehensive overview of all possible resources online compared to other articles on this topic which may be vendor-specific or incomplete.

Here are some quick links if you only need specific information:

• The Building Blocks
• Step 1: Use HTML Tables for Layout
• Step 2: Add in CSS Styles
• Step 3: Add HTML Email Best Practices
• Step 4: Code for GoogleMail, LotusNotes, and Outlook 2007
• FAQs: Create HTML Email in Outlook, Background Images, Create Anchor Links in Email, Add Video to HTML Email
• Where to Learn More about Coding HTML Email, Including Free HTML Email Templates
• Changes to this article

The Building Blocks

Whether you use a template or hand code (my preference), there are two key building blocks for html email:

• HTML tables control the design layout and some presentation
• Inline CSS controls presentation, for example, colors for backgrounds and fonts

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download templates from Campaign Monitor and MailChimp, two email delivery services that provide free templates (links are below in the Where to Learn More section).

When you open up their templates, you will notice several things we’ll discuss in more detail later:

• CSS style declarations appear below the BODY tag, not between the HEAD tags.
• No CSS shorthand is used: instead of “font: 12px/16px Arial, Helvetica” break this shorthand into its components of font-family, font-size, and line-height.
• SPANs and DIVs are used sparingly to achieve specific effects while HTML tables do the bulk of the layout work.
• CSS style declarations are basic with no hacks required.

Step 1: Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

• With a one column layout, typically there is a header that contains a logo and some (or all) navigation links from the parent website. Below that are the intra-email links to stories further down in the email. At the bottom of one column layouts are the footer (often with links that repeat the top navigation) and detailed unsubscribe instructions.
• Two-column email layouts also use a header and footer. They also typically use a narrow side column to contain features and links to more information. The wider column holds the main content of the email.
• Promotional emails follow the same rules but with much less content and links. They often include one to two messages and sometimes one big image with small explanatory text and links below the image.

No matter how your email is designed, the most important content (or reference to that content) should appear at or near the top of the email design, so it is visible immediately when a reader opens your email. The top left of an email often is the first place people look when they open an email.

All of these email layout possibilities can be coded easily with html tables to divide up the space into rows and columns. Using html tables also helps with problems caused by different email software and how they can read the same email code differently.

The basic approach follows these steps in coding the email layout with html tables:

• For a two-column layout, create one table each for the header, the center two content columns, and the footer. That’s three tables. Wrap these tables into another table that “wraps” or “frames” the other tables. Use the same approach for one column layouts except the content table has one column. This approach helps with email designs that break images into multiple table cells. Otherwise, a single table with TD rows for header (with colspan=2 if the design is two column), content, and footer should display fine for all but Lotus Notes email software.
• Use the HTML table attributes within the TABLE and TD tags, for example, to set the table border=0, the valign=top, the align=left (or center, if that is the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older email readers to display the html email in a minimally-acceptable way.
• Set the HTML table border=1 to help debug any problems with the internal alignment of TR and TD tags in development. Then change it back to border=0 for testing and production.

While this approach might offend purists who prefer to code to the latest standards, you do not have to be a complete primitive. No matter how badly LotusNotes displays html email, resorting to HTML FONT tags is not required (although use of FONT tags cannot hurt, honestly). And while Outlook 2007’s HTML rendering engine is less than perfect, it does display basic HTML tables just fine.

Step 2: Add in CSS Styles

Once the email layout is coded as a set of nested HTML tables, the next step is to add in CSS styles. Here are the steps to follow:

• First, put style information (style=) into the HTML tags, for example, TABLE, TD, P, A, and so on.
• Place the CSS STYLE declaration right below the HTML BODY tag. Do not use the CSS STYLE declaration in the HTML HEAD tags as is done when coding web pages. Google Mail, in particular, looks for STYLE anywhere in the email and (helpfully) deletes it. And don’t bother to use CSS LINK to a stylesheet. Google Mail, Hotmail, and other email software ignore, modify, or delete these external references to a stylesheet.
• For the frame table, the one that contains the header, content, and footer tables, style the table width at 98%. It turns out that Yahoo! mail needs the 1% cushion on either side to display the email properly. If side gutters are critical to the email design, set the width at 95% or even 90% to avoid potential problems. Of course, the tables inside the frame (wrapper) table are set for 100%.
• Put general font style information in the table TD closest to the content. This can mean repetitive style declarations in multiple TD cells. Put font style definitions into heading (e.g. H1, H2), P, or A tags only when necessary.
• Use DIVs sparingly to float small boxes of content and links to the right or left inside a table TD cell. Google Mail appears to ignore the CSS Float property but Yahoo! and Hotmail work fine. Outlook 2007 ignores floats. Sometimes it is better to code a more complex table layout than rely on the Float property. Or, since email is easy to clutter, ask that the design put the floated content in the narrow side column. Floats are the one part of an email design that might require the design be reworked.
• While DIVs appear to be barely useful, SPANs appear to work almost every time because they work inline. In some cases, SPANs can be used to position text above or below content, not just to color or re-size type.

If you download and study the email templates from Campaign Monitor and Mail Chimp, you’ll see they treat the frame table, the one that wraps the tables that hold content, as if it were the HTML BODY tag. Campaign Monitor calls it “BodyImposter” which is a great way to think about the frame or wrapper table. From a CSS perspective, the frame table does what the HTML BODY would do if services like Google Mail didn’t disable or ignore the BODY tag.

Step 3: Best Practices

There are several best practices to follow to ensure your email code works well.

With the html email coded as described above, the next step is to test the email in a variety of email software. Often this will identify problems that require workarounds.

The first test tools to use are the Firefox and Internet Explorer web browsers. If the email displays well or perfectly in both browsers, chances are good that testing the email in Outlook, Yahoo!, Google Mail, and other services will reveal only minor problems. You also might want to use the Internet Explorer 6 web browser to test for Outlook 2003 which uses its rendering engine (see Resources below if you need to download IE6).

Once the email appears fine in the two web browsers, use an email delivery service to send the email to a range of test email accounts. Ideally this should include accounts with Yahoo!, Hotmail, and Google Mail.

Which test accounts are used, however, should be determined by the domain names in the email address list of people who will receive the email. For example, if there are few or no AOL subscribers on this list, then it may be a waste of time and money to set up an AOL email account.

Here are the most common code tweaks that are found in this test phase:

• Sometimes a switch from percentage widths to fixed widths is needed. While this is not optimal, because people can and do resize their email windows when reading, sometimes using a fixed width is the only way for a layout to display properly in multiple email software.
• If there is a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that does not work, use CSS margin and padding attributes. HTML spacing works better with older email software than spacing with CSS.
• Image displacement can occur when a TD cell is closed right below the IMG tag. This is an ancient HTML problem. Putting the right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

In addition, the following best practices are recommended:

• Avoid javascript. Most email software disables javascript.
• If an image is cut up and spread across several HTML table cells, test the email with many test accounts. Sometimes it looks great in Outlook but shifts by 1 pixel or more in Hotmail and other services. Also consider putting the image as a background image on a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. Note that Outlook 2007 does not display background images. Be sure to test your email code with your target email software.
• If you use background images, use the HTML table attribute background= instead of CSS. It works more consistently across email software.
• Store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to websites.
• Be sure all your images use the alt, height, and width parameters. This helps with Google Mail as well as when a reader has their images turned off. However, Outlook 2007 does not recognize the alt= parameter.
• Use the target=”_blank” attribute for the HTML A tags so that people reading with a webmail service don’t have the requested page appear within their webmail interface.
• While a 1×1 pixel image can be used to force spacing to create a precise email layout, spammers use 1×1 pixel images to determine if their email has been opened.
• Avoid a big image above the fold in the email. This is another classic spammer practice and can increase the likelihood an email will be tagged as spam.

My final test is to view the HTML email with images turned off. Outlook and some other email software set images off by default, to prevent spammers from knowing your email address is active. I set images off in my code by using my editor’s search and replace to delete some part of the src= URLs in my file.

Make sure your email content displays fine without images. For example, if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white. Also be sure your alt=, height=, and width= parameters are set for images so they can help readers understand your content without images. Turning off your images will help you catch these issues and ensure the HTML email will display effectively if people see your email with images off.

Once the html email is tweaked so that it displays well or perfectly in the test email accounts, the next step is to go through a checklist. Verify that

• The From address displays properly (as a name, not a bare email address)
• The subject line is correct
• The contact information is correct and visually obvious
• The top of the email has the text, “You received this email because … Unsubscribe instructions are at the bottom of this email.”
• There is text asking readers to add your From address to their email address book
• The top of your emails include a link to the web version of your email.

If it is important to know absolutely everything wrong with the html email code, try a service like Browsercam.com or LitmusApp.com. These services show how your HTML and CSS code will display as email or, in the case of Browsercam, as a web page.

Step 4: Coding for GoogleMail, LotusNotes, and Outlook 2007

Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email.

For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.

Here are coding techniques that appear to work well in Google Mail and older email software:

• Define the background color in a TD cell with bgcolor=, not the CSS style.
• Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images.
• If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work.
• If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
• If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
• If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
• Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
• When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly.

Besides Google Mail, another hazard programmers face when coding email is less obvious: LotusNotes. Many large corporations continue to support and upgrade their Notes installations. As of 2004, IBM reported that 95 million people used Notes. Unfortunately, it is impossible to tell which companies use Notes. So code html emails as described in this article. The more primitive the code, the more likely it will work well, if not perfectly, with Notes.

That said, it is quite possible that Notes will introduce quirks that beggar belief, for example, converting images to their proprietary format. Or Notes will simply ignore flawless basic html in one email but display other html fine in another email.

Here is what apparently helps Lotus Notes display html email:

• Use a frame table that contains all the internal layout tables, for example, for the header, content, and footer. This keeps the email together in one chunk of html. Pieces of the layout are less likely to wander when displayed in Notes.
• Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.
• Don’t use a style declaration in the head tags. It is the proper way to code to standards, but Notes (like Google Mail) might delete your styles. Rely, instead, on inline styles within the TABLE, TD, H1, H2, P, A, and other tags.
• Use absolute URLs to images stored on a web server. Notes cannot be prevented from converting images, if it does, but using remote images might help.
• Intra page jumps, using named anchors, rarely work in Notes, if ever. It is best to avoid links that jump down the email to a specific piece of content.
• Avoid colspans in the HTML table layouts. Notes apparently only handles basic table layouts, especially older versions of the software.
• Be sure TD cell widths have accurate widths. Unlike web browsers, which automatically make all cells the widest defined width, Notes sizes each TD cell based on its defined width.
• Centering an email layout usually does not work in Notes. Email layouts will have to be left-aligned.

Using these techniques for Google Mail and Lotus Notes also will ensure your emails display fine in Outlook 2007 with its older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly (see Resources below for the link). And the Email Standards Project has additional details. They also lobby companies like Microsoft to improve their products.

The bottomline with Outlook 2007, LotusNotes, and Google Mail is that it requires coders to make sure their HTML email code works across most email software. That means simple, standards-compliant code works best in most if not all situations.

Many people who receive email prefer HTML over text for any number of reasons. For programmers, however, the task of coding an HTML email appears both simple and horribly complex. Hopefully this article has described many of the issues and coding strategies that work across email software so that you can code HTML emails effectively.

What is the best idea to take from this article? If there is a choice to be made between a simple coding solution and a more complex solution, simplicity always works better.

Frequently Asked Questions

How to Create HTML Email in Outlook

The basic approach is to create your html email as a separate html file and then create a signature file and use your html email as the signature file. Then you open a new email message and add the new signature file. This prevents Outlook from helpfully converting all your precious html code into text.

To create a signature file in Outlook:

1. Select Tools from the top menus, then Options, then the Mail Format tab in the Options pop-up that will appear.
2. Down on the lower right of the Mail Format tab is a Signatures button. Click that button and a Create Signature pop-up will appear.
3. Click the New button on the Create Signature pop-up and a Create New Signature pop-up appears. Give your new signature a name and select Use this File as a Template and browse to your HTML email.

Then create a new email message, click in the body of your email message, select Insert from the mail dropdown menu and Signature then your new signature file.

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

How to Use Background Images in GMail, Lotus Notes, and Other Services

Using images as a background in an html email is problematic. The old way is to carve up your image and divide it among HTML table cells and rows. You also can put the image in a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. However, Outlook 2007, Google Mail, Lotus Notes 6, and Live Mail do not display background images. Be sure to test your email code with your target email software. Whatever you do, be sure your email design degrades nicely if and when the background image does not display. If you use white text, for example, against a dark image, make the default background color a dark color.

How to Create Anchor Links in an Email

Like image backgrounds, links within an email do not always work. You should test first. Over the years, I have cracked open a few emails with intra-email links and find they use the basic HTML anchor tag to link to a defined name= bookmark. The only oddity I’ve seen is the addition of shape=rect in the anchor name code, as in, <a name=sometag shape=rect> But this was in an email full of images.

How to Add Video to HTML Email

It is difficult but possible to add video to your html emails. Campaign Monitor has a great article, “HTML5 and video in email“, that covers all the steps to make video available within email software clients that can display video while degrading well for email software that cannot display video in an html email. Their article includes test results across many email clients, as well as comments with more insights and results.

Where to Learn More

Besides this article, these online resources should be very helpful:

Email Standards Project

http://www.email-standards.org/
Probably the best start point for understanding exactly how different email software complies with HTML and CSS. They also maintain an acid test they use to compare compliance across email software. And you can participate to help improve standards.

Free HTML Email Templates

http://campaignmonitor.com/resources/templates.aspx
http://www.mailchimp.com/resources/html_email_templates/
Both email delivery services actively test their templates over time with different email software. However, there are subtle differences to note. Campaign Monitor has its STYLE declaration within the HEAD tag while Mail Chimp does not. Be sure to test your final HTML code with whatever services are used by recipients in your email list.

Plain Text Email Design Guidelines

http://www.campaignmonitor.com/resources/plain-text-templates.aspx
This article has a number of simple ways to make text emails easier to scan.

Blocked Email Images

http://www.clickz.com/showPage.html?page=3413471
http://www.campaignmonitor.com/blog/archives/2005/11/email_design_guidelines_for_20.html
From 2004, the ClickZ article shows how major email software compares for blocked images and preview panes. The Campaign Monitor article goes into greater detail with actual examples and ideas how to combat default image off rendering of your emails, as well as designing your email to look okay in preview panes.

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

http://msdn.microsoft.com/en-us/library/aa338201.aspx
The official Microsoft description of what Outlook 2007 will and will not render for HTML and CSS. Includes a link to a validator that works in Dreamweaver, as well as Microsoft editing tools.

A Guide to CSS Support in Email

http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
Campaign Monitor, an email service provider, has taken Xavier Frenette’s excellent work documenting CSS performance in a few email clients and expanded it to include Gmail, Hotmail, Yahoo! and Windows Live Mail, as well as for the PC they cover Outlook 2003 and Outlook Express, Lotus Notes, and Thunderbird and for the Mac they cover Mac Mail, Entourage, and Eudora.

MailChimp Email HTML Coding/Delivery Guide

http://www.mailchimp.com/resources/email_marketing_guide.phtml
Lots of great information about all aspects of html email, including how spam filters work.

CSS Support in HTML Emails of Hotmail, Yahoo! Mail, and Gmail by Xavier Frenette

http://www.xavierfrenette.com/articles/css-support-inwebmail/
This is excellent research and style by style results that show how these three webmail services display CSS.

Secrets of HTML Email Series

http://www.graphics.com/modules.php?name=Sections&op=listarticles&secid=16
Some of this information is old but they have a good piece on Lotus Notes.

Lotus Notes Trial Software

http://www-128.ibm.com/developerworks/lotus/downloads/
Free downloads of their latest software if thoroughly testing an email with the Notes client software is needed.

HTML Email and Web Page Testing Services

http://www.mailchimp.com MailChimp Inbox Inspector
http://www.campaignmonitor.com/testing/ Browsercam also has updated their service to display your pages at a variety of screen resolutions.
https://browserlab.adobe.com/ (2010-02-16 vanished) Adobe BrowserLab currently is free and available anywhere with a modern browser. It’s easy to use and displays the full range of bad browsers, specifically, IE6 and IE7. But it also shows Chrome, Firefox, and Safari.
http://www.browsercam.com
http://www.litmusapp.com
Test compatiblity of your web pages with a variety of web browsers and operating systems. For email, Browsercam simply shows you all the warts in your html code, even though your email might work fine in Notes, Google Mail, and other difficult email software environments. Litmus shows how your email appears in email software.

Standalone Internet Explorer 6 Web Browser

http://tredosoft.com/Multiple_IE
This free software lets you run install and run IE6 and IE7 without causing conflicts. With Vista and now Windows 7, this only works at installing IE6 because Windows only lets you have one IE running at a time. Better to use BrowserLab to test against email clients that use the IE6 or IE7 html rendering engine.

Changes to This Article

This article has been published and maintained since 2004. Here are the most recent changes:

• Added link to Adobe’s BrowserLab online service that, like BrowserCam, lets you see how your web page (in this case, an html email) displays in older browser technology like IE6 and IE7. This is useful for sending HTML email to older AOL email clients. Also added the FAQ about how to add video to HTML email. (November 13, 2009)
• Added intra-page links to help people who arrive here from search engines. Also added link to MailChimp’s HTML Email Inbox Inspector service. Added FAQs. (January 23, 2009)
• Updated link to MailChimp’s free HTML templates. Their URL changed without any automated redirection. (February 23, 2009)

2010

---