Creating HTML Email
Creating the contents of an HTML email is nearly identical
to creating an HTML web page.
The source code of a web page might be copied and pasted
into an outgoing email without modification. Yet, what looks
good in one email reading program might be a mish mash of
confusion in another.
The primary consideration when creating HTML email is that
email reading software is less standardized than web page
browsers.
Some email readers can read only plain text. This is merely
mentioned. The focus of this article is creating HTML email
for software that can read HTML email.
Email readers are titles like Thunderbird, Eudora, and
Outlook. For the purpose of this article, web pages that
let email be read with a browser are also considered to be
email readers — for examples, the email services provided
by http://hotmail.com/ and http://mail.yahoo.com/
It is not always possible to know ahead of time which email
reader will be used at the email's destination.
Surveying every recipient is one way to obtain the
information. Another is to record the information in the
X-Mailer email header line with the subscription address
whenever an emailed subscription is received.
Unless you can determine that most recipients will be using
one type of email reader, it is prudent to design HTML email
for appropriate display on the greatest number of email
readers.
The easiest way to accomplish that is to use only HTML
and a minimum of HTML tags. Most popular email readers
understand at least some CSS.
Things that should not be used if it can be avoided:
-
JavaScript.
-
Complicated layouts.
-
Potentially hazardous HTML tags, like "script,"
"embed," "object," or "applet."
-
CSS positioning.
-
Forms.
If you must use any of the above, and even if you don't,
send test emails to as many of the popular email readers
as you can. Expect trial and error until you become
familiar with what each email reader is (and is not)
capable of displaying in an acceptable manner.
Images can be displayed in HTML email by linking to them
the way it's done in a regular web page. Use absolute
http://...URLs, though. Relative URLs will not work.
Similarly, web page and download links can be incorporated.
By way of example, let's look at how the HTML version of
the Possibilities ezine is constructed.
(If you are reading this article in the Possibilities ezine,
view the source code to see an example, or view the page at
/library/EzineSourceCode.html
to see the source code of the entire ezine that carried
this article.)
The layout of the ezine uses a table to restrict the ezine
width on wide windows. Overly long lines can be difficult
to read.
An external style sheet is linked to in the head area of
the HTML email. The style sheet is used mostly for font
styles and weights.
At the top of the ezine is the masthead image. In case the
email reader has images turned off, the name of the ezine
is repeated below the masthead.
Rarely are additional images used.
The rest of the ezine is composed of heading text and
paragraphs.
It's a simple layout, one that most HTML email readers can
display. Even with the simple layout, the ezine looks good.
Sending the HTML Email
Many email programs can send HTML email. This is good for
sending an email to an individual.
But if you'll be sending the email to a list of subscribers,
you'll want good list software — like B-Mailer(TM) from
http://bontragercgi.com/programs/b-mailer/
B-Mailer can send text or HTML email, your choice.
The one-click unsubscribe URL, because it can be used in
both text and HTML email, needs to be constructed as a
link when creating an HTML email. The link would be this
format:
<a href="[[UNSUBURL]]">click to unsubscribe</a>
To have the URL itself be the clickable text, the link
would be:
<a href="[[UNSUBURL]]">[[UNSUBURL]]</a>
[[UNSUBURL]] placeholders are replaced with unique
one-click unsubscribe URLs when the email is sent.
The one-click confirmation URL and other placeholders are
similarly replaced when the email is sent.
Many people feel that sending HTML email is better suited
to their purposes than plain text. These days, with email
readers that handle both formats seamlessly, many
subscribers care more about content than format, so
long as what they want is easily assimilated.
The essential point to keep in mind, when sending HTML
email is to "Keep It Splendidly Simple".
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2005 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
