Master designing HTML e-mails

Part of mastering Web site design is learning to design an effective HTML-enhanced e-mail. Here's how.

By Jim Kukral

Web developers and designers must constantly diversify their skills. On top of mastering Web site design, you should also know how to design an effective HTML-enhanced e-mail.

Though designing an HTML e-mail message might sound as simple as designing an HTML page for a Web site, e-mail requires a special design strategy.

For starters, there are two types of e-mails you must master: editorial e-newsletters and direct marketing (or promotional advertising) e-mails. Both types of e-mail have unique goals and require different strategies for success.

We'll discuss several effective ways to design an HTML editorial e-newsletter for a better click-through rate.

What's an editorial e-newsletter? (Hint: This e-mail is one)

Editorial e-newsletters typically consist of targeted content, which is e-mailed to subscribers on a regular basis. Subscribers are more apt to spend time reading a glut of information in a newsletter format—especially if they request to receive the e-mails.

So how do you make the content easy to read in an e-mail format? Here are a few tips to keep in mind the next time you design an HTML editorial e-newsletter.


Think about subscribers' reading habits when you're adding graphics to the design. For instance, more graphics can lead to slow load times.

Another consideration is that some readers download all of their e-mail at once and read it later while they aren't connected to the Internet, so make sure that subscribers can still read their e-mail even if the graphics can't load.

I also recommend that you avoid using background images in HTML e-newsletters, since some e-mail clients don't accept them.


A newsletter is only as strong as its content. That's why readability should be foremost in your design plans. E-newsletter subscribers expect to receive concise, relevant information, so make sure you stay on topic.

Write short, direct sentences when possible. Another tip is to break your points into numbered lists or bullet points so readers can quickly scan the e-mail. Remember that your aim for editorial e-newsletters is to get a high click-through rate. So keep in mind that the more difficult you make the e-newsletter to read, the less likely it is that subscribers will read it.

Also, use the right font size. Font sizes that are too small and difficult to read turn subscribers off immediately.


One of the best (and easiest) ways to boost the click-through rate is with links. As your online marketing team will tell you, a good click-through rate means an e-mail is successful.

Give readers ample opportunity to click through to the company's Web site by placing active links throughout the e-newsletter. Don't fall into the trap of only linking headlines—be sure to embed links in keywords and phrases within paragraphs.

Borrow from the best

I suggest you begin to catalog and analyze the e-mail newsletters you currently receive and record what you like and dislike about each one.

Design an effective direct marketing or promotional HTML e-newsletter

First, I'd like to point out that I'm not advocating spam. I think it's fine to send advertising e-newsletters via e-mail—as long as readers request such information from your company.

The mission of an e-mail advertisement is to get readers to open the e-mail and click through the links. Once the recipient clicks the links to the landing page or the promotional page of the Web site, then it's often up to the Web site to close the sale.

Since many readers still view advertising e-mails as spam, I'll give you tips on how to boost your e-newsletter's click-through rate.

You have three to five seconds to capture a readers' attention

Three to five seconds isn't much time to convey your content, graphics, and call-to-action statement—and still hope the reader sees enough links they want to click.

Help keep your readers clicking, and your bottom line moving up, by following these best practices:

  • Don't make readers scroll: Readers aren't interested in working to see your advertisement, so don't make them scroll. One of the most important points with this tip is that you keep the live links high enough on the page (or "above the fold") or readers won't click them.
  • Speed up downloads: If you use graphics, make sure you optimize them down to the smallest file size possible to speed up the download process.
  • Convey your mission clearly and quickly: When you read a billboard from your fast-moving car, you must be able to comprehend the billboard's message in a few seconds. The same goes for an e-mail advertisement. Since readers are ready to delete your message within seconds of receiving it, you must make your point quickly. A couple of ways to do this is to write an informative, attention-grabbing headline or to utilize an image that visually conveys your message.

Call-to-action statements

A reader is only going to be interested in your advertisement if the topic or offer applies to something they need or want.

Even if the reader is interested in your product, it still doesn't mean they'll click-through to your Web site—you need to give them an incentive to click-through. That's where call-to-action statements come in.

Call-to-action statements can vary from giveaways to product discounts to contests, etc. The key to a successful call-to-action is to ensure that you provide something the reader wants. With proper research and knowledge of your target audience, you should be able to determine what will work best for your campaign.

For more tips and techniques on designing HTML e-newsletters, I suggest talking to your e-mail service and advertising team to see if they can offer any additional advice that can help boost your conversions and click-through rates.

Jim Kukral has spent the last seven years working in the trenches of Web design, development, and usability for Fortune 500 clients as well as mom-and-pop companies.

Editor's Picks

Free Newsletters, In your Inbox