Online magazine of writer and internet consultant Tim Slavin () (instant message me)

How to code HTML email newsletters

Posted by TimSlavin at March 23, 2003 07:47 AM | TrackBack

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.

Comments

Thanks! You're so cool!

Posted by: Jennifer at January 3, 2004 11:44 PM
Post a comment









Remember personal info?






About This Site

This site is an online magazine that offers free how-to internet knowledge for budget-minded businesses and designers, programmers, and others who support them.

Learn more about this web site and/or learn about free 30 minute consulting that customizes the free how-to content on this site.

Search This Site


Subscribe To My
Email Newsletter

Stories, links, and more every week!



PRIVACY NOTICE: Your email will never be sold or traded. Powered by Ezine Director.

Masthead

Publisher, Editor, Writer: Tim Slavin
Tel: 203-834-2255 (US)
AIM: redhousecomm
Est. January 2003

Contact The Editor

Media Newsroom

Site News

Like This Site? How You Can Help (for free, too)

RSS/XML Feeds

Weblog News Feed

RSS 1.0: index.rdf
RSS 2.0: index.xml
Atom: atom.xml

Resources Page Feed

RSS 1.0: resources.rdf
RSS 2.0: resources.xml
Atom: resources_atom.xml

Under The Saddle

This site powered by Moveable Type 2.65 with some pMachine tossed in.

This site lives at Jatol. (Before it lived at Linkstream, another great web hosting resource.)

Hand-coded with TopStyle 3.10. Nick Bradbury rocks.

Stats from Site Meter and Ecomm Stats. Visitor IP resolution from DNS Stuff and GeoBytes (both free).

Information architecture stolen (sorry! thank you!) and adapted from Common Craft which was designed by Useful Arts.

Neat CSS top navigation from Simple Bits. Sadly, this site content is not half as tasty as brie, cheddar, gorgonzola, colby, ricotta, or mascarpone.

Color scheme from ColorCombo (although Easy RGB is equally wicked, and free).

Cowboy illustrations from Clipart.com. I'm still trying to find out where on earth the free animal print font came from (oops!) ...

Email address encryption from Hiveware.

Special thanks to Lucinda Williams, Moon Taxi, and iTunes for the musical grease needed to pass endless hours spent hacking this design out. If I could write stories as well as Ms. Williams writes and sings, I would die a happy, happy man.