Recipe 7.12. Creating an Email Newsletter

Problem

You want to communicate with your web site visitors by email.

Solution

Email newsletters are a popular way to stay in touch with your most loyal web site visitors and give them reasons to come back to your site on a regular basis. In the already debate-prone world of web design, the subject of email newslettersand especially HTML email newslettersgenerates a tremendous amount of heated discussion about everything from coding techniques to the wisdom of creating and sending one in the first place.

Here's a checklist to consider before doing one of your own:

Choice: If your mailing list software allows you to do so, let your subscribers choose either plain-text format or HTML. Or send a combined "multipart/alternative" message that includes both the plain and fancy versions in one message. Personally, I prefer the latter method because it means one less thing for you and your subscribers to keep track of in the ongoing life of your email newsletter.
Design: Use a simple, table-based layout without any fancy CSS, JavaScript, or embedded Flash movies.
Content: Keep your messages shortfour to six headlines and one or two other promo items or messages. Always give subscribers an easy way to unsubscribe and send you feedback.
Testing: Email clients and their particular rendering capabilities are much more varied than web browsers. Know your audience, their technology capabilities, and test your message format early and often.

Discussion

Sending an email newsletter is one web design task in which you cannot test and double-check your work enough. If you notice a stupid mistake on a web page, you can easily fix it before thousands of people see it. Not so with email newsletters. Not only are the mistakes easier to make, but many, many more people see them at the same timeincluding the boss. Proceed with caution.

That said, email newslettersespecially HTML emailsare a powerful marketing tool when done correctly. The combination of varied text sizes, colors, and images makes HTML email much easier to scan than plain text emails. The click-through rates for HTML email are highermaybe twice as high as text emailand, all in all, they're a great way to extend and strengthen your web site's brand. Not all email clients can view HTML email, but depending on whom you ask, about three-quarters of Internet users have an email application that can.

Many people have compelling reasons to reject HTML email. They may connect to the Internet using America Online, whose software, until recently, did not handle HTML email very well. Or they use an old email client that can'tand never will be able to view HTML email. Or they might read email offline, so they resent that embedded images in HTML email require them to reconnect to get the message's full effect. Some think all HTML email is spam, or that signing up for an email newsletter will result in more spam. Others resent being tracked by "spy GIFs" embedded in the message. A tracking image looks like a regular img tag, but its src attribute contains a URL to a script that records the user's receipt of the message. Most recent versions of popular email clients, however, let users open messages without viewing embedded graphics. But when the tracking image gets loaded, the sender will know.

Feel free to use legitimate images and graphics to enhance your design, but don't rely on them to get your message across. Recipients who open your email and see nothing but unloaded images are likely to delete it without giving it a second thought.

There are some generally accepted coding and design tips, while others, which tend to contradict each other, will require you to make a choice based on personal preference and testing.

First, code your HTML email by hand, if you can.

Some email clients can trip over the slightest coding irregularity introduced into the message by a WYSIWYG editor or from code pasted from another web page, email, or word processing application.

Make sure you use absolute URLs for all your links and images.

This means the address of your links and images should begin with http://, followed by a domain name, path, and valid filename.

For the code structure, opt for a lowest common denominatorHTML 3.2.

You can include the <html>, <head>, and <title> tags or leave them out. Most web-based email services, such as Yahoo! and Hotmail, will only display the message content inside the <body> tags. They also will strip out <meta> tags, so you can leave those out, too. See Recipe 4.1 for more on HTML versions.

There are, however, at least two schools of thought on delineating text blocks: one favors the <p> tags that any conscientious web designer would already be using for paragraphs in her web pages:

 <p style="font: normal 1em Verdana"> A message to our loyal web site visitors.</p>

The other viewpoint recommends <font> tags and <br> tags instead:

 <font size="3" face="Verdana"  style="font: normal 1em Verdana">A message to our loyal web site visitors.</font><br>

I've been using the latter method in the HTML emails that I produce. Of course you can try it the other way, but t-e-s-t.

Keep fancy designs and rich media to a minimum.: Avoid background images and image maps and don't include any JavaScript or Flash in your emails. Webmail services disable JavaScript and the scripts also can crash older email clients. Flash movies are generally just too big to force on email readers.
Use HTML-based tables (if you use tables at all).: Although tables are losing ground in web page design in favor of CSS-based layouts, table-based HTML emails ensure compatibility with older email clients. You can use fluid designs based on percentages so your message resizes with the email window, or assign a fixed width based on pixel values. I prefer fixed-width designs and see them more often in the HTML emails I receive. If you agree, then design your tables with a width no greater than 600 pixels. Some clients may have trouble with percentages, so be sure to check your design widely if you go that route.
Use CSS cautiously.: CSS should be used in conjunction with testing on target email clients if you do. CSS rules might be overridden, ignored, or improperly rendered, depending on the email platform used to view the message. Absolute positioning, as well as linked or imported style sheets, are a no-no, but embedded styles (listed in a group at the top of your code) and inline styles (listed within individual HTML elements) should work.
Test, test, and retest.: Before you send your first HTML email, call in your favors with family, friends, and colleagues. Build up a "focus group" of one or two dozen test recipients. Strive for a wide variety of platforms and versions; not just AOL, Outlook, and the web mail services, but as many lesser-known clients as possible: Eudora, Lotus Notes, Thunderbird, Apple Mail, Novell, Pegasus, or Squirrel Mail. Send your testers a screenshot of how the message is supposed to look, and then ask for feedback on how the version in their inbox compares. Tweak what you can and retest if necessary. Then build in time for mini-testing before you send additional messages, reviewing the message in as many email clients and services as possible before unleashing the message on your whole list.

Problem

Solution

Discussion

See Also