Universal Design for Web Applications

Designing for Email

We talk about using almost exclusively modern techniques to achieve universal design. Still, there’s one area where the most universal approach is somewhat less elegant: HTML email.

The main problem with email clients is that their support for HTML is extremely inconsistent. In some cases, such as with Gmail and Hotmail, many CSS styles are sandboxed to prevent changes from affecting the rest of their web-based interfaces. In other cases, such as with Outlook 2007, the client’s HTML parser doesn’t support the CSS box model (that is, the padding, border, and margin properties), so high-fidelity layout doesn’t stand a chance.

In fact, support for HTML email is so unreliable that a group called the Email Standards Project, modeled after the Web Standards Project (WaSP), has been formed to guide email client vendors in the right direction. If WaSP’s work with browser vendors is any indicator, though, it will be several years before there is a common email platform. With that in mind, here are some tips for designing HTML-based emails:

• Use layout tables. Just don’t go overboard with them. Fragile things that they are, email client HTML parsers aren’t going to reliably handle deeply nested tables, so keep it down to a single, basic table.

• Keep formatting to a minimum. Realize that pixel-perfect rendering is a pipe dream in the medium of email, and design accordingly. Don’t send lots of images that have to be aligned just so, or you will be disappointed with the results.

• Use CSS for font selection. All but the most ill-suited clients support CSS on fonts, even where they fail elsewhere.

• Send a plain-text version. One of the few advantages of email over the Web model is that you can send multiple data types simultaneously, and you should have a text-only version of the content you wish to send. That will suit users of mobile devices just fine, and those who prefer HTML will never be presented with that text.

• If possible, include links so that people can view the email as a web page, which will render better in a browser than in an email client.