educational

Sending HTML Formatted E-Mail, Part 2

Stephen Yagielowicz

In the first part of this series, I looked at several considerations and concerns when using HTML e-mail. In this installment, we’ll look at several design and technical aspects of successful HTML formatted e-mail, and review some of the basic procedures involved in creating it:

How HTML E-mail Works
You receive e-mail into your POP (Post Office Protocol) account as a ‘multipart MIME document.’ These parts include the text, as well as any file attachments and references to the multimedia elements such as images, audio, animations, etc. which are called into the e-mail via URLs, similar to the way they would be on a standard Web page that is viewed in browser, rather than in an e-mail client.

E-mail is typically sent with a "Content-Type: text/plain" header, but you want yours to read "Content-Type: text/html" when sending any HTML formatted content.

Outbound HTML mail is sent using SMTP (Simple Mail Transfer Protocol), just like almost any other e-mail, with some notable changes to the header information. The most important change in the header field for sending HTML e-mail is the "Content-Type." E-mail is typically sent with a "Content-Type: text/plain" header, but you want yours to read "Content-Type: text/html" when sending any HTML formatted content.

What You Need to Use It
Sending HTML formatted e-mail requires a basic email account which supports the standard POP, IMAP (Internet Mail Access Protocol), and SMTP email protocols, as well as MIME (Multipurpose Internet Mail Extensions) types, plus an e-mail client like Microsoft Outlook, Netscape Messenger, Eudora, or even Web based e-mail programs like HotMail that support the sending and receiving of HTML e-mail. Several bulk e-mailing and list management tools also support sending HTML mail-outs to large subscriber lists, but these tools are beyond the scope of this article.

Regardless of the tools you use, you must set the sending preference to "HTML," which you can easily do in Outlook Express for instance by selecting "Tools
" » "Options
" and then ensuring the selected e-mail sending format is set to "HTML
" on the "Send
" tab. As far as composing the actual HTML to be sent, most standard HTML editors should suffice. If you use a common WYSIWYG editor like Dreamweaver or MS FrontPage, you may wish to "clean up" the code a bit, using your favorite text editor in order to streamline it, and be sure to test it in your browser before sending it.

Create your content page the way you normally would for the Web, placing all the images you wish to use in the same directory, if possible, and ensure that it is publicly accessible (hosts with hot-linking protection may not allow images to be called from "off site" for example). Be sure to use only ‘absolute’ (<IMG src="http://www.domain.com/images/picture.jpg">
) URLs for images and any other links , since ‘relative’ links (<IMG src="../images/picture.jpg">
) won’t work in e-mail. While you could use the <BASE href="">
tag within your document’s <HEAD>
, support for this is not universal, resulting in potentially broken links. Consider your e-mail to be an extension of your Web site’s content.
In other words, see it as an additional Web page - but one that the surfer will receive from you, rather than one that they have to come looking for

Useful Tips and Tricks
The following helpful hints will guide you in making effective, cross-client compatible e-mails:

• Consider your e-mail to be an extension of your Web site’s content. In other words, see it as an additional Web page - but one that the surfer will receive from you, rather than one that they have to come looking for.

• You can ensure the widest audience for your page by including the following DOCTYPE declaration as your first line of code, as well as by also placing the following META tag within your <HEAD>
element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

• Some e-mail clients do not provide support for framesets, backgrounds, or other common page features, and so as with standard Web designs, simpler is often better, and always more stable.

• Try not to use the <BODY> </BODY>
tag for page formatting. Instead, place your content inside of a <TABLE width="100%">
, changing the background color attributes via the "bgcolor" parameter within the <TD>
tag. This often works around the limitations of rendering backgrounds found in some e-mail clients.

• Try using a simple inline Cascading Style Sheet (CSS), instead of <FONT>
tags or external CSS files. This will render your text more readable to clients who have problems displaying richly formatted HTML.

• Some clients that are set to receive plain/text by default will still render HTML formatted e-mails if they are contained within an <HTML> </HTML>
wrapper, forcing a change of content-type.

• If you're using HTML formatted e-mail for your newsletter (a common use), try to give subscribers the choice of HTML or plain text versions, or consider a basic plain text version with an HTML attachment.

• Inserting a basic ‘comment tag’ (which won’t be rendered in HTML capable clients), with unsubscribe instructions is always a good idea, and is also a great way to offer your "text only" subscription option.

• Finally, be sure to test your approach using your own e-mail software, sending messages to yourself and ensuring that they work the way you expect before doing a mass mailing to a subscriber list, for example. When in doubt, consult your e-mail client’s "help" files.

Remember, not everyone can receive HTML e-mail, and even if they can, not everyone appreciates it - especially if it is poorly formatted, or excessively sized. There is nothing worse than seeing the underlying HTML code delivered as an e-mail, which results in deletion, rather than the conveyance of your message. With a little care however, you can make a much greater impact with a properly crafted HTML mail-out than is possible with a simple, text only message. Good luck!

More Articles

profile

Q&A: Paxum CEO Octav Moise Shares the Wealth

Alejandro Freixes ·
educational

S2S Postbacks: Getting Ad Stats in 1 Place

Juicy Jay ·
opinion

Tips to Master Customer Subscription Retention

Cathy Beardsley ·
opinion

A Primer on How to Integrate Paysite Processing

Jonathan Corona ·
educational

Trademark Ruling a Victory for Adult Products, Services

Marc Randazza ·
profile

Q&A: Rich Girls CEO Cristina Enriches Cam Models

Alejandro Freixes ·
profile

Q&A: LiviaChoice Embraces Grand Camming Destiny

Alejandro Freixes ·
opinion

Refined Protocols Reduce STI Risks for Performers

Eric Paul Leue ·
educational

Camming 101: Establish Boundaries to Keep the Fantasy Alive

Steve Hamilton ·
profile

Nikki Night Forges Cam Model Excellence

Alejandro Freixes ·
Show More