ReachCustomersOnline.com

Connect with low-cost tools and know-how
May 8, 2006 :: Volume 2, Issue 4
Next Issue: May 2007

How To Code HTML Email Newsletters (All New Version)

Posted by TimSlavin at November 11, 2004

Please note this article has been completely rewritten, tightened up, and re-organized on April 12, 2006. It provides lots of information about coding emails to display well in Google Mail and Lotus Notes. A much earlier version of this article was published on SitePoint, a site for web developers and designers, and the reader comments there include additional coding ideas.

Finally, note that I've written a companion article to this one, How To Build a Basic Email Marketing Capability, that describes the business process needed to do email marketing, including how to write html and text email newsletters.

Updates are noted at the bottom of this article if you've bookmarked this page and want to see what has changed.

HTML email newsletters are a big success for publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs to measure reader interest in products and topics. Readers see information laid out like web pages, in a way that is much easier to scan and navigate than top-down plain text email.

For programmers, however, coding HTML email can be a mix of misery and pain.

The biggest pain is that people use many different software tools to read their email, from desktop software such as Eudora, Outlook, AOL, and LotusNotes to web-based email services such as Yahoo!, Hotmail, and Google Mail. Each of these email software tools can display the same email code in vastly different ways. Even when these tools display an html email properly, readers size the width of their emails from narrow to wide.

This article describes the results of hands-on experiences coding html email newsletters for clients, as well as bits of technical information from the internet.

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 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 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.

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 a one table each for the header, the center two content columns, and the footer. That’s three tables. Wrap these tables into another table. 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, there are limits. For example, no matter how badly LotusNotes displays html email, resorting to use HTML FONT tags should never be required.

Step 2: Add in CSS Styles

Once the email layout 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. 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.

  • To keep the amount of code small, use CSS shorthand in general and the TRBL (top, right, bottom, left) format in particular.

    So instead of:

    style=”margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-right: 0;”

    use this format (top, right, bottom, left or TRBL):

    style=”margin: 10px 5px 10px 0;”

  • 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. 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.

Note that some email delivery services will unpack style definitions to make them more explicit and, therefore, more readable by all email software. For example, the CSS shorthand style=”margin: 10px 5px 10px 0;” can be expanded into the long style declaration shown above. Test each email and look to see what happens to the email code. Start with CSS shorthand because, in the worst case, it appears to work well with all email software.

Step 3: Best Practices

Coding an html email perfectly is only a partial solution. There are several best practices to follow to ensure the email 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.

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 readers 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.

  • Image displacement can occur when a TD cell is closed right below the IMG tag. This is an ancient HTML problem. Putting the </TD> 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: A reader, Zolla Michalak, emailed me that he found some (possibly older) versions of Outlook don't display background images well if at all. Be sure to test your email code with your target email software.

  • 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.

  • For 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.

  • While a 1x1 pixel image can be used to force spacing to create a precise email layout, spammers use 1x1 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.

As part of testing an email, also include a test for potential spamminess. SpamCheck (http://spamcheck.sitesell.com/) is a useful service that highlights issues that might cause the email to trigger spam filters. Note, however, that SpamCheck is a free service offered by a vendor. Purchase of their services is not required to use their spam check service.

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, for example, 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.”, and so on.

If it is important to know absolutely everything wrong with the html email code, try a service like Browsercam.com. For a small hourly fee, post the html email as a web page on a server, then point Browsercam at the email page. Their service takes snapshots that show how the email appears across a wide range of browsers and operating systems. While they do not show how email software will display an email, some email software use web browser components to display HTML email. And Browsercam provides a highly detailed look at all flaws in the email code, not just the obvious flaws.

Step 4: Coding for GoogleMail and LotusNotes

Need a Google email address?
I have about 50 free invitations that let me give Google Mail addresses to people. If you need one for testing your email newsletters, just find my email address on the right side of this page (under MASTHEAD, the Email Me link) and send me a request. I'll be happy to help you.
— Tim Slavin

It seems obvious that a new service like Google Mail that is viewed with a web browser would display html email perfectly, with the latest standards. It is not that easy. 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 quality of the html email that is displayed.

As a result, Google Mail is a new webmail service that acts like an artifact of the early 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, the only alternative to using styles, 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.

  • As noted before, 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, 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.

  • 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 a programmer faces 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 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 styles. Rely, instead, on 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.

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.

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

Here are common questions that I receive along with my answers (more will be added later):

  • How do I code HTML email in Outlook? Code your html email. Create an email signature in Outlook and attach your html email as the signature. Add the signature file (your html email) to a new email. Please note, however, that unless you have a small list of email addresses and you know everyone on that list, it costs much less time and money to use a professional email service provider. They not only handle spam complaints as well as subscribes and unsubscribes. They also provide important open rate and clickthrough reporting. If you use Outlook to send bulk email, and someone reports you to their ISP as a spammer, you have to contact the ISP and others to prove you're not.
  • How Do I Code Anchor Tags within an HTML Email? Mine Don't Work. This question usually comes from people using Outlook to send their html email. For some reason, Outlook rewrites the links. The solution is to manually remove this code and return your HTML anchor links to their original form. Beyond this solution, Steve at Design Times noticed that some html email newsletters (like SitePoint) use MHTML to embed their images and links. MHTML is defined at their official site if you want to learn more.

Where to Learn More

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

MailChimp Weblog
http://mailchimp.blogs.com
An excellent weblog devoted to email marketing, delivery, and coding issues that MailChimp publishes to support their email delivery business. They provide a lot of useful information, tools, free email templates, and links.

HTML Email Tips for Web Designers
http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html
A useful barebones list of guidelines for creating and sending email. Their free email templates also are great samples to study because their code is heavily commented and has been tested against a broad range of email software. And, finally, their Resources page includes great links to best practices (at the bottom of the page), as well as other resources.

"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.

"A Guide to CSS Support in Email"
http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.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. Their article also includes a link to Optimizing CSS presentation in HTML emails, the follow on article to "CSS and Email, Kissing in a Tree" which is linked below. And a link to another useful article, "Email Design Guidelines for 2006, that shows how to code for your subscribers who use image blocking and/or the email preview pane in their email readers.

"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.

Browsercam
http://www.browsercam.com
Excellent service for testing how compatible your web pages are with a variety of web browsers and operating systems. For email, it 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.

SpamCheck
http://spamcheck.sitesell.com
Decent free online service that tells you about the "spamminess" of your email. You also should look for an email delivery service that provides this sort of spam check.

CSS-Discuss: HTML Email and Using Style
http://css-discuss.incutio.com/?page=StyleInEmail

SimpleBits SimpleQuiz
http://www.simplebits.com/notebook/simplequiz/index.html

DadaMail Software
http://mojo.skazat.com/

CSS and Email, Kissing in a Tree
http://www.alistapart.com/articles/cssemail/
An excellent CSS-only approach to html email published by A List Apart. NOTE: The author has written an update to this article, posted at the Campaign Monitor blog, Optimizing CSS presentation in HTML emails.

How HTML Code Affects E-Mail Deliverability
http://www.clickz.com/experts/em_mkt/email_delivery/print.php/3490146
A decent overview that describes how different email services view the html you include in an html email. You can't address every problem directly (for example, creating a clear boundary between the html and text versions of your email is a problem for your email service provider, if you use one) but it helps to know what happens.

MHTML Standard Home Page
http://www.dsv.su.se/~jpalme/ietf/mhtml.html
This site describes one approach to embed your images and links into your html email.

Updates to This Article

March 23, 2003: First version of this article posted.

November 11, 2004: This article completely rewritten for publication on SitePoint. Small changes and improvements made to this article that could not be done with the SitePoint version.

January 21, 2006: Added details about how to code email newsletters to display properly in Google Mail, also known as GMail. These details are based on a reader tip (from Romania, no less) and extensive testing.

January 26, 2006: Added information about using background images in Google Mail and the need to define fonts carefully within the TD cell and individual tags, for example, the H2, P, and A tags. It's real work to get Google Mail to read your font sizes correctly.

April 12, 2006: Completely rewrote the article, from scratch, incorporating newly discovered information from Xavier Frenette and information from MailChimp about their experiences coding email templates that work with LotusNotes.

May 2, 2006: Added link to MailChimp's Resources page, mostly because of the Best Practice links at the bottom of the page. These are excellent, objective resources on that topic.

May 9, 2006: Addded a link to some excellent reference material ("A Guide to CSS Support in Email") from Campaign Monitor, an email service provider.

May 13, 2006: Added link to ClickZ article that describes how (as of 2005), internet service providers evaluate the html code within html email.

July 7, 2006: Added MHTML information and the anchor tag question at the bottom of the article.

August 30, 2006: Added reader comment about how using background images appears to not work with some versions of Outlook. Be sure to test your email code with your target email software.

Comments

Post a comment




Remember Me?