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

Sample message in Macmail
Sample message in Macmail

Sample message in Gmail without images
Sample message in Gmail without images

Sample message in Outlook 2007
Sample message in Outlook 2007

Sample message in Outlook 2003
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:

  1. 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?
  2. 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:

<th scope="col" width="700" style="background-color:#24333a; border-bottom: 1px solid #87d143; color:#c02c18; text-align:left; font-family: Georgia, serif;" ><h1 style="margin: 10px 30px 10px 30px; letter-spacing:2px;">GOTHFEST <span style="letter-spacing:0; font-weight:normal;">2009</span></h1></th>

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

Learn more about HTML e-mail
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

13 Comments »
  1. Excellent points, Heidi. I haven't been as conscientious about some of these points as I should be. Good information!

    Comment by Mark Jepsen — December 9, 2008 @9:19 pm

  2. Coding HTML for emails is a horrible task. I agree with your above points, tables and inline CSS works best. Sometimes if there's a lot of CSS we use the tags inside the document but past experience shows it's best to put this inside the tag as it seems to be better supported there rather than in the tag as you would a usual HTML document. For anyone who needs to do a lot of email testing http://litmusapp.com/ is a good website to do so.

    Comment by ITMDesign — December 10, 2008 @8:11 am

  3. Great tips Heidi I think I'll send out some nice Christmas themed emails this season implementing these ideas.

    Comment by steve James — December 10, 2008 @10:32 am

  4. It's true I'm just getting started and have so much to learn, but thanks to you I know where to go to learn what I need and now have access to the material I need to study to become a success online. The next time I write to you is to tell you just how successful I've become online. Keep up the fantastic job! http://www.e-Bestsellers.com http://www.PLRbestsellers.com http://www.iBestof.com

    Comment by Anne-Marie Ronsen — December 11, 2008 @5:39 am

  5. Very handy tips. I think I will use them to get effective result.

    Comment by Website Design — December 13, 2008 @7:04 am

  6. After much gnashing of teeth, I finally figure out how to code a very limited email client into a client web application that sends out attachments. So many people said: "Don't do it!" or: "But why not just use [insert name of open source email project here]?" I'm now (like the Hermit in the rhyme of the Ancient Mariner) a sad and wiser man. Emails are complicated animal, so this article will be called upon at a later stage, I no doubt...

    Comment by Wayne Smallman — December 18, 2008 @8:48 am

  7. Thanks For You Sharing Here. This information is very helpful. Nice blog. Ann Torres

    Comment by web development los angeles — December 27, 2008 @5:20 am

  8. I agree with your above points, tables and inline CSS works best. Sometimes if there's a lot of CSS we use the tags inside the document but past experience shows it's best to put this inside the tag as it seems to be better supported there rather than in the tag as you would a usual HTML document. http://www.cyberdesignz.com/

    Comment by jhon — December 29, 2008 @6:31 am

  9. Hi... Nice design. This information is very helpful.I agree with your above points, tables and inline CSS works best.

    Comment by Ravi — January 3, 2009 @2:20 am

  10. I'm just getting into email marketing , a real newbie. Glad I found your blog Heidi this info will be very useful thanks.

    Comment by Simon P — January 4, 2009 @10:11 pm

  11. Very nice one. helped me a lot. Thanks..

    Comment by חנות וירטואלית — May 11, 2009 @10:15 am

  12. Very good advice, awesome read, thanks

    Comment by Jim Hancockk — May 22, 2010 @12:20 pm

  13. i like the post there is alot of to learn from you

    Comment by בניית אתרים — August 13, 2010 @12:46 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL