Creating HTML Email
_
Creating HTML Email
This article was first published in the free, weekly Possibilites Ezine.
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 http://willmaster.com/possibilities/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”.
by Will Bontrager 2005
Software Programmer
http://willmaster.com/master/
