Recently, a client who supported Web standards worked to design her newsletters to use cascading style sheets (CSS) for layouts instead of tables. Designers cheered. Readers jeered. One problem with this approach: email clients.

Outlook may dominate, but how many of us have second or third email accounts with Web-based email clients like Yahoo!, Hotmail, Gmail, and so on? Then you have email applications on handheld devices, and those on corporate networks using applications like LotusNotes. Some people use their Web host’s Web-based email client so they can check email from any computer, typically with one of three: SquirrelMail, Horde, or NeoMail.

Then there are those who opt to use different computer-based software like Thunderbird, Mozilla, Eudora, PocoMail, The Bat!, and Pegasus.

The problem

With only a handful of email clients, newsletters come across perfectly; when using the majority of email clients, newsletters are readable but not perfect; with other email clients, newsletters render a mess. To understand why this happens means understanding hypertext markup language (HTML) and CSS.

Instead of going into tech-speak, think of the DVD player. Any DVD can work in any DVD player, for the most part. True, all DVDs may not be compatible with every type of player, but let’s just say: DVD players look different and have their unique features, but they all do the same thing — play DVDs. Think of email clients as DVD players and emails as DVDs. Also, think of Web browsers as DVD players and Web sites as DVDs.

To continue the analogy, HTML is the language that enables different DVD players to play the same DVD. In a newsletter, it specifies how the design should look. The CSS tells the DVD player how to present the images, sound, and titles. In a newsletter, CSS defines how the content appears in the newsletter complete with colors, fonts and layout.

The way email clients and Web browsers work is that the “DVDs” play, but not the same way. One might play email or Web site in grayscale. Another translates the text into a different language. Another doesn’t play images.

See Figures 1 and 2. Figure 1 is what the newsletter is supposed to look like. Figure 2 is how it “gets read” by GMail, a Web-based email client. The images have been pixilated out of respect for the publication — as the poor readability is not the fault of the publisher.

Actual newsletter Newsletter in gmail
[Click images to view larger in a new window]

The options

What can you do to have your newsletters be easily read? Keep the HTML design as simple as possible. The more bells and whistles, the more different it will appear than the original design. The first thing to do is accept that your newsletter will not look identical to every subscriber. Once you let go of the concept of a perfect layout, you’ll feel more at ease and know your newsletter’s style will vary.

When designing an HTML-based newsletter, you have three approaches to take:

  1. Plain HTML: Use only HTML to style every item in the newsletter and no CSS.
  2. Internal CSS: The CSS appears in the head of the newsletter’s HTML template.
  3. External CSS: The CSS appears in a separate file that lives on a Web server. If the user is not connected to the Internet, the styles won’t appear.

As reported by E-Zine Tips, Lyris conducted a test and discovered that inline HTML had the best render rate at 94 percent. In the test, Lyris used three items with 36 email clients, both Web-based and computer-based. These results aren’t surprising.

Therefore, an external CSS is strongly advised against because it relies on a live Internet connection and the Web server working. You never know when readers view your emails, especially if they save old issues. If you delete the external CSS from the server and they try to read an old newsletter, it’s going to get messy.

Internal CSS don’t have the Web server problem. However, many email clients don’t correctly translate CSS based on W3C recommendations. And there’s the problem of when users update their software-based email clients, since updating software in companies isn’t usually an easy and smooth process.

The compromise

How do you ensure your newsletter comes across well? The ideal way is to offer HTML and text versions of your newsletter. Also, having online newsletter archives works great. When you have archives, potential readers can check out your newsletter to see if they want to subscribe.

Another work around is to include a text line at the VERY TOP of the newsletter that says, “Having trouble reading this? Read it online” and include the link to the online version of the newsletter.

If offering a choice of HTML and text isn’t possible, a simple newsletter created with clean HTML should work fine. Again, the newsletter may not look identical to all your readers, but the important thing is that the content is there and readable.