How to Design E-mail

Pretty is as pretty does: In e-mail marketing, that means messages where the creative works to improve response rather than being attractive solely for the sake of aesthetics.

“People want to put the cart before the horse and do all this cool stuff before making sure the basics are in place,” says Justine Jordan, senior design consultant at e-mail services provider ExactTarget.

Compounding matters, many people who design e-mails assume that the basics for the medium are the same as those for direct mail or for the Web. “E-mail is a different medium altogether,” notes Jim Kelley, manager, creative services for e-mail services provider e-Dialog. “It’s like the Web, and it’s like direct mail, but it’s a separate medium. Not all direct mail marketing pieces translate easily into e-mail. And you can’t go and design e-mail like a Website, because it won’t render in all e-mail clients.”

Image rendering, and the lack thereof, is arguably one of the gravest issues when designing e-mails. Outlook 2003, Outlook 2007 and Gmail are among the desktop and online clients that suppress images by default. In fact, the Email Experience Council estimates that the e-mail clients of half of all recipients block images by default.

With some clients, the recipients can override the default universally; others, though, allow the default to be overridden only manually or only if the user has indicated that the sender is “trusted.”

E-mail recipients can override the default by changing the settings universally, by allowing images on a case-by-case basis, or by including the senders in their lists of “trusted” senders. But not all recipients know how to override the default, and many aren’t even aware that those blank boxes in their messages are blocked images.

That’s why, says Andrew Robinson, vice president, full service at online marketing firm Lyris, “you need to design to engage when images are downloaded and when images are blocked.”

Perhaps the easiest way to do so is to use alt text with all images. At the very least, if you have an image for, say, coffee grinders, you should include alt text that says something along the lines of, “See our piping-hot selection of more than two dozen coffee grinders.”

Get creative; consider this alt text promotional copy, not just a literal caption of what is in the photo. Jordan says you can even style the alt tags for certain e-mail clients, such as Firefox, Yahoo! and Gmail, and include background colors so that they render somewhat graphically.

You can also write your text in HTML so that it resembles graphic text; Kelley refers to this as simple text. You’re limited to the system fonts that the recipients have installed in their machines, which usually comes down to the basics such as Arial, Helvetica, Times, Verdana and the like, but they will display even when images are disabled.

This is especially helpful with e-mail clients that provide an automatic alt text (“To help protect your privacy, Outlook prevented automatic download of this picture…”) when images are blocked.

Image conscious

Beyond knowing how to compensate for blocked images, you need to know where to place your images in your e-mail. Eye-tracking research shows that e-mail recipients view messages in a pattern that Robinson calls “the hot F”: They begin at the upper-left corner and proceed down the left to the end of the screen before scanning from left to right along the top and then along the middle. Just as the upper-right corner of a catalog spread is a major hot spot, so is the top-left corner of an e-mail. “Think about what is the core message of your e-mail,” Robinson says, “and find a way of getting that into HTML or text into the top left-hand corner.”

Any part of the e-mail message that appears in the recipient’s preview screen can be considered “above the fold,” but the size of the preview screen varies by e-mail client and individual settings. As a rule of thumb, though, ClickMail Marketing suggests putting your most critical messaging within 200 pixels from the top of the messages; Lyris advises keeping it within the top 2 to 4 inches.

And don’t try to cram too much into that space. Including too many calls to action is a common mistake, says Susan Tull, vice president of marketing for Digital River’s BlueHornet e-mail marketing services division.

“Many marketers achieve better results by creating an e-mail with one clear call-to-action, which may be to visit a landing page that provides a better opportunity to promote multiple offers,” she says.

Heading to the preheader

Given the likelihood of images being disabled, the preheader — the line or two of small text that runs along the very top of the message — takes on additional importance. Yet marketers tend to overlook it or to relegate it to carrying a message informing recipients that they can view the e-mail as a Web page.

Informing readers that they can see the message, with images intact, online is in fact important. Robinson says it’s not uncommon to see 10% of an e-mail’s clickthroughs come via the preheader “view this online” link.

But he describes “the negativity of the language” — “If you can’t read this e-mail, click here” — as “one of my bugbears.” He advises trying a more positive, specific message, such as, “To see our latest products online, click here.”

Likewise, Jordan says that when testing preheaders such as “View this message online” against those such as “View this e-mail with images,” ExactTarget found the latter much more effective because they provide clear, tangible benefits to the readers.

What’s more, the beginning of the text appears in the “alert” that pops up on your computer screen to let you know you’ve received a new message, or in the inbox’s listing of messages. As Robinson notes, you don’t want “If you can’t read this…” to be the preview verbiage recipients see when deciding whether to open or delete. It also appears on mobile devices that don’t render HTML.

That’s why Kelley advocates thinking of the preheader as a “super subject line,” one that’s an extension of your subject line and is therefore more targeted and relevant than the generic “To view images online, click here.” For instance, if your subject line is “Back-to-school savings, four days only,” your super subject line could read “Save up to 40% on computers, cartridges, and more — but hurry! Offer ends Tuesday.”

“If you have an e-mail that is mostly images,” Kelley says, “having this super subject line of text on top will help.”

Just as it’s easy to include too many messages and calls to action in the preview pane and upper-left corner of the message, it’s tempting to cram multiple messages into the preheader. Some marketers, for example, use it not just to inform recipients that they can view the message online, but also to ask them to include them as trusted senders.

But for every rule, there are exceptions, and the only way to determine if your audience responds better to the exceptions than to the rules is to test. Fortunately, e-mail is one of the cheapest, easiest and quickest marketing media to test.

“We’re really firm believers that there’s no such thing as a magic formula,” Jordan says. “You need to test to know what your audience is asking for.”