Mark Wyner Design

How to Test HTML Emails

Published December 21, 2006

Whether I’m developing a website or an HTML email, I spend a good deal of time testing. I run my files through a large suite of browsers and email clients, and my process is thorough. There are some things I test for globally and others which are specific to the target audience. In any case, my process is extensive because my goal is to maximize accessibility.

I am often asked how I test emails. This article will outline that process including what I look for when I test, how I test for various viewing scenarios, what techniques/utilities I use for debugging and what email clients I use in my suite. You might recognize the process as part of your own, learn something new about testing or even curse my efforts as useless. I simply feel that my testing process is efficient and effective, so I thought I’d share.

My Suite of Test Devices

To ensure my work accommodates people using all of the three most common desktop platforms (Macintosh, Windows and Linux) I have them all at my disposal. I design/develop on my Mac (as I have for over a decade) and have the other two on standby. Because I use a Mac Pro I can run all three platforms on a single computer (I’m running Ubuntu—an amazing and free Linux platform—and Windows XP), thanks to the glorious VWware Fusion application.

I also test on as many alternate devices as possible. This is most challenging because there are a plethora of mobile devices with an equally intimidating number of browsers and email clients. I do what I can with my Zaurus (Linux), my Treo (Palm OS) and my partner’s Blackjack (Windows). And I profusely apologize to my colleagues and friends as I occasionally beg them for test runs on their devices. Quite an annoyance, I’m sure.

My Suite of Test Clients

There is a lot of data to support a general consensus about the most widely used email clients and web browsers, but I also ask around to learn what people are using. This gives me a great foundation for where I should focus my efforts. However, with strict goals for accessibility I test for an extremely broad collection of clients/browsers. Some may call it extensive or even gratuitous, while I call it thorough and considerate. My suite of encompasses the following clients:

Mac OS X

Apple Mail 2.1
Entourage 10.1

Windows XP

Mozilla Thunderbird 1.5
Outlook 2007
Outlook 2003
Outlook Express 6
Eudora 7
Lotus Notes 6.5
AOL 9

Linux

Evolution Mail 2.8
Mozilla Thunderbird 1.5

Webmail

.Mac
Gmail
Yahoo (original and the new beta)
Hotmail
Windows Live Mail
AOL

Handhelds

Palm Versamail (Treo smartphone)
Linux EMail (Zaurus PDA)
Outlook (Windows mobile)

Deployment of Tests

I point all of the desktop/handheld clients in my suite to an IMAP account which I’ve created solely for testing. This enables me to send tests to a single address, then view the results across the board. Webmail accounts, however, are unique and consequently need to be tested individually. But the aforementioned test utility allows concurrent delivery to three addresses. So testing in six webmail clients is still simple and quick.

Through countless tests I have learned (as we all do) what general markup will succeed and fail in various clients/browsers. This knowledge enables me to send an initial test which most often works fairly well across the board, sans a handful of unanticipated hiccups. Then, as I work to resolve the complications, the testing suite dwindles until I am satisfied with the results in each client. My test utility enables me to quickly resend tests, and the IMAP setup enables me to view the results only in clients needing attention.

My Approach to Presentation

There are two fundamental ways to markup the presentational layer of an HTML document, each having its own benefits/compromises: standards-based CSS for all presentation, or table-based layouts which envelope font/color tags for text formatting. From my perspective, there is no contest between the two approaches. However, for those less educated about the pros and cons I'll outline the basic concepts.

Font Tags and Tables

While this approach offers a fairly consistent visual presentation across most email clients, it comes at a high price:

• Embedded presentation layers weigh down an email, slowing down rendering times for mobile devices and people with dial-up connections and increasing fees for people using pay-per-kilobyte mobile plans.
• Table-based layouts render horribly on small-screen devices and are nightmares for disabled readers who must navigate using key/verbal commands.
• Table-based layouts are challenging to integrate into CMS solutions and to segment for templates.
• Redundant, inline presentational-markup complicates maintenance.

Standards-Based CSS

While web professionals are increasingly adhering to web standards, the debate about using them for HTML emails is still quite fiery. And because of my articles on the topic I’m typically a target for misinformed, plain-text-email evangelists. The benefits of web standards in the email environment is no less impactful than on websites. If anything, they’re more important because of the increasing number of people using mobile devices to access email.

The benefits of using web standards to mark up emails is obvious:

• Reduced file sizes are considerate of mobile readers who pay for every kilobyte they download and for people using slower, dial-up connections.
• The content is accessible to everyone, is fluently read by aural devices and is easily navigated by those using assistive devices.
• Clean segmentation enables easy integration with CMS solutions.
• Presentation is maintained in a single location, ensuring global changes are quick and simple.

There are a couple of compromises one must accept when using CSS for presentation:

• Visual design is reduced to something not unlike a rich-text format in some clients.
• Formatting is lost when forwarded from many clients.

A Word to the Wise

Irrespective of my stance on this debate, there will always be a client who believes design integrity across the board is significantly more important than accessibility or catering to a mobile-device audience. Consequently I have learned that it is vital to discuss these approaches with my clients before engaging in a project. Failing to have this conversation upfront will inevitably result in hearing a client say “this doesn’t look good in Hotmail” or “when I forward this from Outlook, the formatting is lost.”

My Goals

There are many viewing scenarios to consider which vary more wildly in the email environment than within web browsers. This is primarily because security and spam are of great concern in our inboxes, but also because of the increased use of mobile devices. I believe my approach to preparing for each of these scenarios yields appropriate results across the spectrum of clients. I have specific goals for each scenario—all focused on accessibility—and test for these specific results accordingly. Following, are some of these specific scenarios.

Text-Only Clients

Many people use non-graphical email clients, especially in the mobile arena. These clients either display the plain-text segment of a multi-part email or extract text from the HTML. Take a look at how Lynx (popular non-graphical browser) renders HTML into a text-only presentation:

Note how there is some formatting which helps the reader distinguish headlines (flush left) from paragraphs (indented). This is possible because the headlines are marked up appropriately with H1, H2 and P tags. Font tags and tables would produce something much less readable. Also note how I compose ALT text, using all-encompassing brackets. This is something I do by default to help readers distinguish ALT text from regular content when viewing HTML sans images. And I prefix ALT text with a description of the image (in this case “photo:”), which denotes what type of image has been omitted.

I test for text-only presentations using Lynx, Palm VersaMail and Linux EMail (default email application on my Zaurus handheld).

Disabled Images with CSS Support

Images can be manually disabled, and are disabled by default in a handful of clients. Epsilon Interactive conducted a study which reports how 30% of our recipients may not even know images are disabled. My approach to image integration is pretty simple, I use CSS backgrounds for all images which are part of the core visual design and only use embedded images (<img>) for contextually relevant images.

The big challenge surfaces when images are disabled in a graphical-client that supports CSS. In this scenario, CSS-background images would disappear leaving no ALT text. However, there is a solution to this problem which I believe yields acceptable results:

The title of this email, “Digital Web Magazine,” is exhibited with an image of the publisher’s logo. With images disabled in a client that supports CSS we retain visibility of a title. Perfect.

I am able to easily test how my email will appear with disabled images using an amazing Firefox extension which is invaluable even beyond testing for disabled images. I highly recommend it for every web designer.

HTML Capable Clients with no CSS Support

Many HTML-capable clients do not support CSS. In this scenario, CSS shines bright. “Why?,” you say. “It’s gone.” I use CSS for my entire presentation and semantic markup for the content, so when the CSS is removed from an HTML document the result is a readable email, visually similar to that of a rich-text document:

This is where those seeking pixel-perfect designs across the board begin to recoil in horror. I feel this is an acceptable sacrifice to ensure accessibility for everyone, though many clients would disagree. And this is where the aforementioned pre-project discussion will come in handy. My clients are prepared for this scenario, safeguarding me from a mid-project debate and potential situation requiring me to recode an email using font tags and tables.

Testing for this scenario is simple using the aforementioned Web Developer Extension for Firefox, wherein CSS can be disabled with a single click. But it is advisable to set up Hotmail and Gmail accounts for real-world testing. Both of the said webmail clients support HTML and disable CSS by default.

Screen Readers

Aural devices obviously ignore all visual design. But that doesn’t mean all visual elements disappear completely. For example ALT text and link titles are read aloud and lists are denoted as such. Thus it becomes obvious just what kind of impact our markup can have on a visually-impaired reader.

Testing for aural devices is incredibly challenging because they simply aren’t widely available without paying significant license fees. The popular screen readers on the market are well worth their weight in gold to those who need them, but for developers the expense can be intimidating. However, there is one open source screen reader available for the Linux platform called Emacspeak and another for the Windows platform called Thunder which houses the Webbie browser. Thanks to the aforementioned Parallels application and respective Ubuntu Linux-platform on my Mac Pro, this is what I use to hear my websites and emails.

Spammers and Standards Compliance

I would like to conclude this article with a note about the deployment of mass emails, just so we’re all clear on my intentions.

I have written a handful of articles about techniques for successfully deploying standards-compliant emails. Consequently, I have been labeled a “spammer,” an “email marketer” and outright “evil” in blogs around the web. I have also received some emails exhibiting a level of anger I would expect if I were clubbing seals. And the debate about whether or not we should even have HTML emails fuels the fire for these evangelists.

My articles are intended to help legitimate companies send legitimate emails to an audience of subscribers. Permission-based email deployment is not evil and spammers do not take the time to ensure their emails are standards-compliant. I welcome a debate about use of HTML in the email environment, but I would like to ensure that my intentions are not misconstrued.

I have clearly outlined the importance of CAN-SPAM ACT compliance, do not work with clients who disregard the importance of a permission-based email-communication system and do not support use of rented lists for mass marketing. The benefits of web standards are clear, and my hope is that this information will encourage people to accompany their standards-compliant websites with standards-compliant emails.

I’ve said it before and I’ll say it again: if we have to build HTML emails, we may as well do it right. I am willing to go the extra mile to ensure accessibility—how about you?

Return to: top of this article | index of articles