The Art of Email Design
October 2, 2000
For those of you who deploy campaigns in HTML on a regular basis, you already know how to create designed messages for quick and easy downloading. You know that the overall file size has to remain small. That, of course, means tight graphics (and not too many of them), along with a clean design.
Sure, nothing new there - but how can you help increase the response of your HTML email and keep it user-friendly? And for those of you who have yet to test HTML messaging as part of your overall email campaign strategy, what are some of the necessary components to creating optimized email designs?
First, to review a few of the main design tactics for HTML emails, take a look at "To HTML... or Not to HTML?". In it you'll find the most basic tips for solid HTML design, built for speed.
Beyond the core basics, think of the best print ads you've ever seen. Some of the most compelling ones utilize just one outstanding yet simple graphic along with tight, beautifully laid-out copy.
Many of the same principles apply here - after all, an HTML message is essentially an "interactive print ad" or some version thereof.
Like print, headlines should pop - preferably with bold sans serif fonts, and the main body text will read better with an easy-on-the-eyes serif. For email, you may want to use the more universal Arial and Times New Roman fonts for consistency across the board when designing text embedded in HTML. Not every email client will display a Century Schoolbook or Didot font, for instance, and will instead default to one of the more commonly used fonts.
One way around this particular limitation is to turn your headlines and important sentences and phrases into actual graphics - create JPEG or GIF files in your font of choice to ensure that they are viewed correctly. This also works well for text that is vertically aligned - that is, headlines that are read from bottom to top or top to bottom. The graphic with your great words is embedded in the HTML, with all fonts intact.
Another thing to keep in mind: If you must use reverse text (white on black or some other color), go lightly with it. Often it can make copy more difficult to read online. Same goes for text that is printed over a particularly distracting background - a definite no-no.
HTML messages that drive top results make use of a few other design-related tactics that are specific for online readers. Namely...
- Make all graphics "clickable." Embed your call to action URL in each and every image in your promotion. The assumption is that the more links within it, the more likely your prospects and customers will click.
Emphasize with the use of bold. The fact is, both italicized and underlined text - two of the great tools for emphasis in the direct mail world - do not carry over as well in the email world. Italics are hard to read online, and underlined text can often be mistaken for text links.
Break up long strands of copy. There is nothing more boring to read online than endless blocks of text that so often weigh down an email message. Create your design with small paragraphs in mind. Make use of columns and sidebars to break up your copy. Make sure there's plenty of white space between the words, paragraphs, and columns, if used.
Use bullets for benefits. Since you have limited time and space in most email promotions to get your message out, instead of noting your best points in your paragraphs, showcase them by using bullets, numbers, and/or asterisks to separate them. Your copy will look better, design-wise, and the best parts of your offer will be highlighted more clearly.
No matter which points above you decide to implement, if you're designing your email in HTML, make sure it will truly enhance the response rate of your promotions by remembering that not every audience group wants to receive it.
For those who do, make sure that any images that you use are there for a reason. In other words, if you include a photo or a graphic, it should be there if and only if it makes a better sales pitch than the same amount of space in text. If it doesn't, you may want to rethink whether or not you need to use HTML at all.
Kim Macpherson, Clickz.com