Reach Customers Online

How to code HTML email newsletters

This article is an archived version. I have published an updated version of this article, including information about how to code for Google Mail. Please update your bookmarks, if and as needed. Thanks for your visit today!

Awhile back I had to create an email newsletter in html format but found little how-to information about coding the html. Specifically, I found little information about what to include and exclude (and for what reasons!) so that the html would be visible in most email software clients, including web based email such as Yahoo! and HotMail. This how-to article describes my experiences and what has worked for me to date.

From a code perspective, an html email newsletter needs to be self-contained. It should include stylesheet information, use tables to implement the design, and the design should be “fluid” (expand/contract to automatically fit width of email software viewer) rather than “fixed” in width. I also found that a right side gutter is needed for Yahoo! and that the html design should have a background color specified not in the body tag (where you might think it should go) but elsewhere in your code.

Here are specific tips that work across the email software I have tested:

• Create a simple table to encase the html table code you use for your design. I assign this table a style called “frame” (because that’s what it does) and use the frame style to set the background color and width (98%, to leave space on the right hand edge). Use of a frame table to encase your design html also lets you set your design html table widths to 100%, to make your code fluid rather than fixed. Use of a frame table and style also lets you create a border around your newsletter to help visually define it, not a bad thing if your reader reads your email in a cluttered interface like Yahoo! or HotMail. You should also put your basic font information in the frame style because, unlike html pages where you might set default font styles and size in the body tag, in an html newsletter this information is ignored if it is in your body tag.
• While I assign styles inside the table and td tags, as another attribute (id=”stylename”), for the td tags I close the style tag (/div tag) right before the td is closed. This is a kludge to solve a problem with the Netscape 6 browser and any email viewers built from it: for some reason, N6 does not handle mixed html and CSS (cascading style sheet) code well and it will ignore the style attributes otherwise.
• Web based email defines the body tag long before your reader’s web browser parses any body tag defined in your html newsletter code. So, as noted above, you need to define a frame style for the overall layout properties. But you also need to define the paragraph (P) style so that any font attributes are defined. This ensures that web based email readers display all your text properly. Of course, you also can set font attributes for your td styles.
• Go light on the javascript. Web based email, in particular, can trigger warnings to your readers about malicious javascript. Even if you only use harmless onFocus javascript to help your readers by placing their cursor in a text box, it is best to do without javascript.
• Building your design in mixed html and CSS code usually means that you will have a header table (or tr row) across the top of your design with 1-3 columns underneath (roughly defined as left column, content box, right column) with a footer table/row underneath. This arrangement can be three tables stacked one on top of the other (header table, 1-3 column content area table, footer table) or a single table with rows and columns (and colspans). You should use as little html table code as possible so stacked tables probably works best.
• You should duplicate certain attributes in your table and td elements, for example, width, valign, and align. This ensures that new and old email software can display your html email newsletter. For my code, however, I set the width for the td element in the style attribute, not the td cell.
• To reduce file sizes, I place images in a folder on the internet and use full absolute references to those image files.
• Because the size of your html file is critical (you want it to be as small as possible), use an html editor that does not add extra html code. I code html newsletters with WordPad for this reason. (Why not Notepad? WordPad has search/replace which is handy.)

Here is a basic html code sample that incorporates most of these tips.

If you are new to programming, be sure to code in a structured fashion so that you can debug problems by rolling back your code. For example, create your table layouts in html first, then add the styles and style attributes one at a time to validate they work. When one style attribute works, go to the next. This approach will save you lots of frustration.

What your readers use to read your email determines whether or not your html code will display properly. Certainly it is not a bad idea to include a message in your email newsletter that asks for feedback. My experience, however, is that as of early 2003 almost all email software reads mixed HTML and CSS code well if the implementation is simple (as described in the bullets above). You should look through the email addresses on your list and create as many test accounts with each provider so that you can send emails to your test accounts to validate your code.

I also found that in some cases embedding images with the html works best. For example, embedded images allow readers to view the full newsletter with or without an internet connection. If this sounds useful to you, the most recent versions of MojoMail have a Send A Webpage feature that will embed your images with your html. Veronica Yuill, the moderator of the I-Design email newsletter, also pointed me to an I-Design post on this topic, a solution using Outlook.

These are the basic html tricks to use to build an html email newsletter. Your mileage may vary. I am sure that there are other solutions. If you have any questions, or better solutions, please feel free to contact me.

Changes to this article

04/05/03: Added text about including font attributes in the frame style. Also added paragraph about how to embed images in html email newsletters.

10/06/03: Added mention of a css-d entry about different email clients and how they handle html: http://css-discuss.incutio.com/?page=StyleInEmail.

Related Stories

How To Code HTML Email Newsletters (All New Version)

How To Code HTML Email Newsletters: New Version Posted

Windows XP SP2 Automatically Removes HTML Email Graphics

How HTML Code Affects E-Mail Deliverability

Upgrade Your Organization’s Image with Slick HTML Newsletters

I host my own email newsletter. How do I avoid being labelled as spam?

HTML Tip: Using ALT And TITLE Attributes