Wednesday, January 24, 2007

HTML email - it's web design, but not as we know it

An HTML email is just like a web page. Except in some ways it's not. It's worth understanding the differences, even if you're not the person responsible for the design and coding of your email messages. Let me rephrase that - if you're overseeing the business of email marketing then it's essential to have a handle on the potential design issues.

The thing to always bear in mind is that the sender is never 100% in control of how the email appears to all recipients. So how can you find out how your emails will look? Some email service providers offer the ability to test how your email will render in a selection of email clients. That sort of service isn't cheap, however. There's also generally an emphasis on US-based ISPs which isn't much help to the UK email marketer. You could just as well open accounts with each of the major webmail providers and recruit a small group of testers using AOL, Entourage, Apple Mail and other common email clients.

Backgrounds and fonts
With HTML email it pays to be simple. Background images often won't get seen, and dark backgrounds can be a disaster if your pale font colour defaults to a standard black or blue, making the copy unreadable.

As with web pages, the viewer can only see specific fonts if they are installed on his or her computer. So if you use something exotic for your subheads, just be aware that it may well default to Arial or Times New Roman for many recipients.

As I've mentioned in a previous eTip, in Googlemail (or Gmail), images are turned off by default - but at least the recipient can elect to see them, whereas styles are ignored.

Layout
For a web page designer it's easy to create a fluid page that adjusts to the screen size. Some 'cool' sites even require the viewer to scroll sideways to see content. By contrast to all this design flexibility, the optimum width for an email is 600 pixels, but anything within 500 - 700 will probably be fine. This is based on the default message box width for the most common email and webmail clients when viewed on average screen sizes and resolutions.

When it comes to laying out content within your email, again I'm afraid the old ways can't be beat, and that means using tables. Although tables are no longer in favour with web designers, using styles to layout an HTML email is the proverbial recipe for disaster. Be aware that fonts can display larger than you'd like when styles are ignored, and that could break your layout with over-long rows and shifted columns.

Rich Media
It's certainly possible to add video, animations, forms and other interactive content into an HTML email. But this will inevitably attract the attention of spam filters and network administrators. Is it necessary? How about a teaser to the interactive content, accompanied by a clickthrough to see it on your website - not only is this simpler, but you can then track who clicks and thereby the popularity of the item.

The bottom line: HTML emails may not be as sophisticated as their web page cousins, but plain is the new interesting! Stick to pale backgrounds and dark fonts, and check how your email looks without styles and without images. It may not be perfect, but is it still readable? Stay within the optimum width, avoid Javascript, Flash and other fancy stuff. And test in as many different email clients as possible.

Your recipients will thank you for it, and your messages will have the very best chance of arriving intact.

No comments: