The Principles of Beautiful HTML Email

Full Articles vs Extracts

One decision you may need to make is the choice between a standalone email, which offers complete information, and a format that uses "teasers" that link to the web site. Your choice will depend on your goals for the email. If you want to drive traffic to the site, skilfully written teasers can work well. If your newsletter is more about building your reputation as a provider of information, having the full content in the email might make more sense.

The Threadless newsletter features a simple teaser image for each shirt
Neither format is intrinsically better, but one may suit your style and goals more than the other. But no matter what format you choose, every email should contain a clear call to action.

Call to Action

Given the amount of work that goes into getting your readers to actually open and read email, it's surprising how many designers don't have a clear call to action in their campaigns. You should have a good idea of what you want the reader to do with the information you're sending them.

The action may be to contact you, or to visit your web site for more information. It might be to purchase something or answer a survey. Whatever it is, make sure your design makes that task simple and obvious.

A big button or link in the right spot can avoid that "dead-end" experience for your readers. Give them somewhere to go, and you should see much better results from your campaigns.

Design Your Plain Text Too

Every HTML email you send should be accompanied by a plain text alternative for people who can't or prefer not to view the HTML. You should spend some design time on your plain text, because you never know which customer is seeing it.
The core rules for plain text emails are:

1. Keep your line lengths short.

2. Email software has a habit of breaking up lines of text in inconvenient places. For example, your carefully written sentence could end up like this:

Email software has a nasty habit of breaking up lines of
text in inconvenient
places. Your carefully written sentence can
end up like this.

The solution is to keep lines short, and add hard returns to the end of each line. A line length of 65 characters offers the greatest protection from jagged formatting problems. When you're editing and formatting a text newsletter, set your editing software to a width of 65 characters with automatic hard returns.

3. Use the shortest URLs you can.

As well as keeping your lines within 65 characters, you need to keep your URLs short. A broken line of text just looks ugly, but a broken URL doesn't work at all. Some CMSs use very long parameters, so you might consider using redirects on your own server, or a service like http://www.tinyurl.com/ to get shorter versions of your URLs.

Also make sure you use full URLs (including the http:// component), and that you insert a space on either side of the URL to help email clients find them and make them clickable, as many do.

4. Create headings and sections.

A big block of text is hard to read, especially when it's in plain text format with no colours or different font sizes to help people scan through. You can use lines of repeated characters -- underscores (_______) or asterisks (********), for example -- to emphasise your headings and break up your email into sections.

You don't have full typographic control in plain text, but you can at least make sure the text is well structured and clear. Check out some example plain text emails for ideas.

Examples of Excellent Email Design

The following guidelines are important, but they don't mean you can't be imaginative and creative in the ways you apply them to your emails. Here are just a few great examples of email design targeted to specific audiences with specific content.