5 Tips to ensure your readers can read your HTML e-mail messages

Heidi Cool — Tue, 09 Dec 2008 09:01:20 +0000

Sample message in Macmail

Sample message in Gmail without images

Sample message in Outlook 2007

Sample message in Outlook 2003

As the semester winds down, and the holiday season encroaches, it seems there are more and more events to publicize, greetings to send, end-of-year newsletters to distribute, holiday sales to promote, etc. T'is the season for HTML e-mails. Alas, as many of you know, creating and distributing an HTML e-mail message is far more complicated than building a regular Web site. As we struggled in the days of the browser wars, today we struggle with the myriad ways popular e-mail programs support HTML. Anyone who has had to create an HTML e-mail message, or has received one they couldn't read, knows what I mean. So today I'll present five tips that should help to make your e-mails readable by the masses.

Throughout this article I'll refer to the sample Gothfest 2009 e-mail pictured (in various renditions) on the right. This sample was created with certain features in mind to demonstrate how such an e-mail will render in different programs.

1. Use images to convey a mood or theme, not to present content.

In many popular e-mail programs, the default preference is to have images turned off in incoming messages. Thus many of us receive e-mails with little boxes and some indicator that says "click here to load images." If you are like me, you rely on the remaining text of the message to make you decide if you should bother or not. Recently I received a message from a well-known business magazine in which the only text provided stated only the name of the magazine and its address. The subject line was equally informative in that it said something like "Special News Update from Magazine X."

The rest of the content was contained in .jpg files linked in the message. This is problematic for two reasons:

Sighted readers, such as me, have no way to judge whether the message is worth reading (or not) unless we click on the image. If we're busy reading through a long list of e-mails we may just send it to the trash. If the sender didn't care enough to present the information clearly, then why should we care enough to read it?
Readers with vision problems who rely on screenreading software have no way to read a message that is part of an image. They are relying purely on the text of the message and any "alt text" provided for the image. This particular message didn't include any "alt text" so the message was lost to such recipients.

We all want our messages to be read. To ensure that they are readable by everyone in your audience, just be sure to include all the important points as actual text. This doesn't mean you can't use images to add visual interest, it just means that your message will be accessible to everyone whether they can see the pictures or not.

In the Gmail screenshot on the right we see a sample message without images. The original file contains two images, a picture of Death and a white background image with shaded edges. Because the content is text-based the main message is available and the alt text provides a description of the missing photo. This would also be readable in a text-only mail program with no colors or styles available.

2. Use Tables for Layout (WHAT????)

Most of us know that tables are meant for tabular data and CSS is meant for style and position. Alas many e-mail programs, including Gmail, don't support the positioning features of CSS. If you want to put text on the left and an image on the right—as I did in the sample— and you can't use the float property of CSS, you're stuck with tables.

To create this layout I made a table that has 3 rows of one column each.

The top row has a dark background, a green bottom border and contains the title.
The middle row has a white background and contains another table with one row and two columns.
- The left column contains a background image, but no background color and features the main text. With images off the white background from the main table will show through so that the text is still easily read.
- The right cell has a dark background and the Death picture. With images off the picture is replaced with alt text. In our sample this is showing up as black which indicates that the table cell should be restyled to feature a lighter color.
The bottom row has a dark background, a green top border and the opt-out message. In some of our samples the e-mail is showing up as dark blue which is hard to read against the dark background. In the Macmail version it has been re-styled in a light green that is easier to read.

To get a better idea of how this was set up, view the source code.

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

Going back in time to use tables makes us feel like we're breaking the rules of HTML, but it is still possible to adhere to standards compliant HTML in e-mail if you use the HTML 4.01 transitional doctype. While adhering to Web standards is a good idea in general, I also find it helpful for testing and troubleshooting e-mail files. When I find a problem in my message, the first thing I'll do is validate the file. This helps me determine if the problem is a simple coding error or if it is due to a feature not supported in one of the e-mail programs I'm testing. By eliminating any coding errors I can then focus on the work-arounds I may need to implement to solve the e-mail specific problem.

4. Use inline styles

Most of us are used to using external or embedded stylesheets. Alas, some programs don't support those. To ensure that your styles aren't ignored, use inline styles to format everything in the document. This takes more time and adds to the code, but will be accepted by more programs. For example, to style the top table cell and the header within, I used the following code:

GOTHFEST 2009

To add an inline style to an html element just include style=" " and put your regular CSS information within the quotes.

In this case I styled the top row (which uses a because it is a table header) to have a dark background, green bottom border, red type, left-aligned text and Georgia or other available serif font. The title was put in an

header styled to have 10 px margin on the top and bottom and 30px on the left and right. I also added 2px of letter spacing. I surrounded 2009 with a span styled to use 0px of letterspacing and a normal font weight. I incorporated the letter spacing and the 2009 span changes mostly to see if they would be carried through in the e-mail programs I tested.

Note: When coding for the Web I find padding works better to ensure files work well in IE 6, &, Firefox etc. But I've found that padding seems to fail more often than margin in e-mails, so I use margin to ensure that I retain space between paragraphs in as many programs as possible.

People sometimes worry that they'll lose too much flexibility if they try to stick with Web standards, but this example shows that despite the limited support of CSS in e-mail there is still room for experimentation. These styles worked in most of the programs I tested.

5. Test your mail in several different e-mail programs.

The e-mail standards project provides information on what features are supported by the most often used e-mail programs. These offer helpful guidelines, but the only way to know what will work for your file is to test it in as many different programs as you can. You can do this by installing several programs on your own computer and by enlisting the aid of friends and colleagues. I can access my work e-mail in Outlook 2003, MacMail, Gmail and Case's Webmail, so I send myself messages then check them in each program. I haven't upgraded to Outlook 2007 (as I'd no longer be able to test 2003) so to test that I send messages to my colleague Kim—who patiently lets me look over her shoulder or makes screen captures for me to evaluate.

As my samples indicate, your e-mail will not look the same in every program. That's O. K. The important thing is to make sure that it renders cleanly in each and degrades nicely if images or styles are not available. If you can do that, you will ensure that your message doesn't get missed because of poor formatting.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

How you send an HTML e-mail depends on your mailing list and the programs you have available. If you're regularly sending mass e-mails to large lists, you may wish to use an e-mail service such as Target X or Constant Contact. There are many such services available. Check with your organization to see if they already have an arrangement with a preferred vendor.

For occasional mailings sent to smaller lists, or via listservs such as those available through https://lists.case.edu, you need an e-mail program that will allow you to insert HTML. Case's Webmail program, found at http://mail.case.edu let's you paste HTML into your message body, but only if you are accessing it through Internet Explorer.

An easier option for most users is Mozilla's Thunderbird, available for Linux, Macintosh and Windows. Thunderbird is free and very easy to install. To send an HTML e-mail just click the "Write" button to compose a new message, type in your recipients addresses and subject line then go to the "Insert" menu and choose "HTML." A box will pop up in which you can past the code from your HTML file.

Web Development Blog » 5 Tips to ensure your readers can read your HTML e-mail messages | Web Development Blog – Heidi Cool – Cleveland, Ohio