Increase the impact of your e-mail advertising efforts

E-mail messages are one of the premier advertising techniques of the Internet era. However, plain text e-mails are no longer sufficient. Today, HTML messages make your advertisements stand out.

A well-designed HTML message or newsletter can give your organization a professional edge, and increase response rates from your advertisements.

Of course, HTML e-mail messages aren't some sort of silver bullet capable of solving all your advertising woes in one fell swoop. We've probably all seen ineffective HTML messages, the ones with the graphics that take too long to load, broken links, or even (gasp!) the dreaded blinking text.

With a little technical knowledge and a few design considerations, you can start sending your own professional high-impact e-mails using ColdFusion.

Sending HTML E-Mails the Easy Way
Sending an HTML e-mail message is easy in ColdFusion. The CFMAIL tag has a TYPE parameter that allows you to use HTML in your message. Simply set the type to "HTML" and place your HTML code in the message as shown below:

<cfmail to="audience@your
company.com" from="kbrown@aboutweb.com" subject ="HTML Email" type="HTML">
...Place HTML Here ...
</cfmail>

That was easy, but there's a catch. This technique sends an HTML e-mail to all the designated recipients. But what if they don't have an e-mail client that's capable of displaying HTML e-mail? For those poor individuals saddled with a text-only e-mail client, the message shows up with all the HTML tags displayed, making it difficult to read and irritating.

What do you do about these people? One solution is to flag them as either HTML or text recipients. Then you can send an HTML version of your message to some people and a text version to others. When people sign up for a newsletter or report, let them decide if they want to receive HTML e-mail or not.

Of course, you may not have a list in which people can select the type of e-mail they want, or a person may change his or her e-mail client. The ideal solution would be to send an e-mail that displays HTML for those recipients that support it and text for those who do not. This solution is possible, but it's more complex than the previous example.

Understanding E-Mail
To understand how to send e-mail messages with both an HTML and a text version, you need to understand how e-mail works. E-mail messages, like Web pages, consist of a header and a body. The header is separated from the body of the message by a blank line. The header contains information about the e-mail, such as the destination address, the sender's address, and the date it was sent.

It also contains a content type that indicates what type of information the e-mail contains. The content type uses the Multipurpose Internet Mail Extensions, or the MIME standard, to specify the type of data. This is the same standard used by the Web servers to send different types of files to your browser.

A normal message has a MIME type of "text/plain". The "text/plain" tells your e-mail client that the e-mail is a plain text message. An HTML message has a MIME type of "text/html". When an e-mail client that recognizes HTML sees this MIME type, it knows that it should display this message as HTML. If the client doesn't recognize the type, it may display it as text with all the HTML tags exposed for your viewing pleasure, or it may not display it at all. The only difference between an e-mail message sent with the CFMAIL tag with the HTML type specified and one sent without it is the content type in the e-mail header. Figure 1 shows a sample HTML e-mail message.

If we want to send a single e-mail message with both HTML and text portions, we need to use a special MIME type of "multipart/alternative." This MIME type allows us to send messages with multiple messages or parts. The "alternative" part of MIME type tells the client to display the best format of the parts that are sent.

In HTML-aware e-mail clients, HTML is considered better than plain text. If you really want all the nitty-gritty details, read RFC 2046. Along with the "multipart/alternative" type, we need to define a boundary. A boundary is a unique series of characters used to separate the different parts of our message. The boundary can be whatever you want, but you need to make sure it's something that won't appear in the body of the message. If someone were to send a message with the boundary in the text, the e-mail client will improperly break the message into a new part where the boundary text occurs.

Figure 2 shows a sample multipart e-mail. We're using a boundary that consists of the text "==MuLtIpArT BoUnDaRy==" with equal signs and lower- and uppercase letters. You're not likely to use this combination of characters in an e-mail message unless you happen to be discussing this article. Although the boundary is on the line after the content type, it's really a part of it.

Notice the semicolon after the MIME type. We leave a blank line after our header and begin the body of our message. We use two dashes to indicate the beginning of the boundary for the first part of our message, then a content type statement followed by a blank line. The boundary and the content type function like the header at the top of the e-mail message, but only for this subpart of the e-mail.

Our first part is the plain text version of our e-mail. After the text version we start the HTML version by putting in a new boundary. Once again we precede the boundary text with two dashes and specify a new MIME type, "text/html". We put in our HTML message using any HTML tags we want. We then close off the second part of our message with the boundary. It has two dashes on the end indicating this was the last part in our message.

The ColdFusion Code
Now we know what the e-mail is supposed to look like, but we have to get ColdFusion to send it in the right format. Listing 1 shows how to do this. First we get the HTML and text version of our e-mail. In the example I use the CFHTTP tag to retrieve the text and HTML versions of the message and store them in the variables txtmessage and htmlmessage. You could also get your content from an HTML form or retrieve it from a database.

Next we need to get the right content type into the e-mail message. The only option for the type parameter in CFMAIL is "HTML" so we need another way to set the content type. Fortunately, Allaire introduced a new tag in ColdFusion 4.5, CFMAILPARAM. The CFMAILPARAM tag is used within the CFMAIL tag and allows you to add mail headers and attach multiple files to an e-mail. We're interested in adding a content type header. The syntax is as follows:

<CFMAILPARAM NAME="Header Name" VALUE="header value">

Our header name is "Content-Type" and the value is "multipart/ alternative". We also need to include our boundary in the value. In the sample code I placed the boundary in a variable because we'll be using it in several locations. Here's what our CFMAILPARAM statement looks like.

<CFMAILPARAM
NAME="Content-Type"
VALUE='multipart/alternative;
boundary="#boundary#"'>

After the CFMAILPARAM tag, we start the body of our message. We put the boundary in preceded by the two dashes as in the example. This is where it's handy to put the boundary in a variable. It prevents you from retyping a long string or cutting and pasting and making a mistake. The boundaries must match exactly. We then specify our MIME type and leave a blank line. Since our text message is in a variable, we add it and move on to the next part. We put our boundary in again, this time specifying the HTML MIME type. We output the HTML version of our message and then close out the e-mail message with another boundary, followed by the two dashes to complete our e-mail.

Using this method you can support both HTML-aware and text-only e-mail clients with a single message. However, this method doesn't work for all e-mail clients. Some older clients may not understand the multipart e-mail. For instance, there are still UNIX computers around using e-mail clients like elm that could cause you problems.

Sending An Effective HTML E-Mail
Now that you know how to send an HTML e-mail, make sure you send effective ones. In general, follow the same guidelines that you do for creating well-designed Web pages, but with a few caveats:

• All your URLs should be fully qualified: You can't use relative links in an e-mail. You must have the full path for all links and images you use in a message.
• Users may read their e-mail offline, particularly on services like AOL: If users read the message offline, any images you have linked in won't show up. Make sure you use alternate tags and ensure that your message can stand alone without the pictures.
• The height and width of the window in which users read their e-mail is usually smaller than when surfing the Web: Don't send messages that are too wide. Try to send pages that adjust to a user's window size.
• Test, test, test: When you put up a Web page you can fix any errors you find later, but once an e-mail is sent it's gone. A broken image or a poor design can make your impressive e-mail backfire and make you look incompetent.

• Figure 1
• Figure 2
• Source Code