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"> Useful Tips and Tricks • 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> <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <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> • Try
using a simple inline Cascading Style Sheet (CSS), instead of
<FONT> • 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> • 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!
) 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
The following helpful hints will guide you in making effective, cross-client compatible e-mails:
element:
http://www.w3.org/TR/html4/loose.dtd>
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.
tags or external
CSS files. This will render your text more readable to clients
who have problems displaying richly formatted HTML.
wrapper, forcing a change of content-type.
