Adobe GoLive & HTML Email

Download the PDF version of this document (237kb)

As bandwidth increases many businesses are beginning to feel comfortable sending HTML Email such as newsletters, special event announcements, or sales flyers to their customers. Web developers who use Adobe GoLive can accommodate their clients' requests for HTML Email by using GoLive as the design tool to put together an appealing document. Once the document is created, however, the designer is often at a loss regarding what to do next. The goal of this paper is to guide you, the designer, by offering information and tutorials in the following categories:

Simple as it may appear, there is actually a lot to learn about sending HTML Email. Included in the Resources section of this paper are URLs to additional information.

Pros & Cons of HTML Email

HTML Email, striking though it can be, is not always appreciated by the recipient. Before deciding to go the HTML Email route, it is important to consider all the pros and cons and come to a well thought-out decision as to whether or not the document will be welcomed by the addressee. It is best to let the recipient "opt-in" to an HTML Email list. Opt-in simply means that the addressee has chosen to receive HTML Email rather than plain text Email. And, of course, any unsolicited Email is considered spam (junk Email).

Pros

HTML Email can be visually stimulating, but there may be other benefits as well. Some advantages of HTML Email are:

Use images, colors and styled text and to deliver a graphically rich document.
Include live hyperlinks in the document.
Determine how many people view the document by the number of hits your server records for image downloads.
Track click-throughs on ads

Cons

On the other hand, there are many people who deplore getting HTML Email in their mailbox. Those people generally cite the following reasons for their disdain of HTML Email:

Not all Email clients are capable of handling HTML Email; those that don't will see the raw HTML.
HTML Email generally has a larger file size than plain text Email, especially when using multi-part MIME standard for messages. (See the section called Issues for more info on multi-part MIME.)
When the document contains images, the reader needs to be connected to the Internet. It not, the user's computer may attempt to connect which many people find exceedingly annoying.
If the recipient chooses to read the Email offline, your images will not show up which can ruin the look of the document.
HTML Email is an excellent carrier of JavaScript viruses, so it can be a security threat.
HTML Email may not forward well.

How to Prepare the Document in GoLive

For the most part, you will create your page in GoLive just the way you would design any Web Page, but there are a few things of which you'll need to be aware when designing for Email that differ from designing for the Web. In this section, we'll go over those differences and how to accommodate for them.

Keeping it all together

You should keep the HTML file that is to become your Email, and any images you will use in it, inside of the same folder. Don't scatter the items around in different directories. GoLive, of course, makes use of a Site file to track images, URLs, etc. and you can take advantage of the power of that Site file when creating your HTML Email document. If the page you are designing is to be stored as part of a site, you can use GoLive to create a folder in your Site window (Figure 1.01). This folder will hold your HTML page and any images you choose to use on it.

Figure 1.01

Create a new page, and then save the page and images into the new folder. In the sample, the Email newsletter is the page called newsletter.html. (Figure 1.02)

Figure 1.02

Inside the folder called "newsletter" is the HTML file that will become the Email and all the image files referenced by it.

If the page isn't going to be stored as part of a larger site, you can create a new Site file for the document (Figure 1.03).

Figure 1.03

When creating a new site, GoLive automatically generates a page entitled, "index.html." You can use that page as your HTML Email document. When using a new Site to create your HTML Email document, place the images at the top level; don't put them into a folder. (Figure 1.04)

Figure 1.04

Create Your Design

The first rule of thumb when designing a page for HTML Email is: Keep It Simple. Remember, your audience will be viewing the document in their Email application, not a Web browser. Because of that, you need to design the page in a way that the Email application will likely be capable of rendering. Remember that you have no control over how large or small a window the recipient may use to view the document. Unlike Web pages, where you can use Javascript to spawn a window of a particular size and placement, the Email application will show the page in the user's default window.

TIP: Consider using a series of tables that line up one below the next to construct the page. Set the tables' widths to a percentage. For example, the contents of a centered table whose width is 80% will take up 80% of the window leaving a 10% border of space on each side no matter how wide the user opens the page. This method of presenting content is often referred to as liquid design. For more info on creating liquid designs please visit these URLs:

Evolt.org: Liquid Design for the Web

Digital Web Magazine: Liquid Web Design

Not every Email application is capable of rendering HTML Email. Bearing that in mind, make sure your audience is capable of accessing the important information in your Email such as URLs by putting the full path into the text as in the example below. (By the way, these are not live links, just an example. :-)

50% Off on all Winter Hats!
http://www.warmclothes.com/winterhats.html

Avoid using features that Email applications may not be able to handle, and to include items that certain readers may need. The following Dos and Don'ts will help guide you as you create your document:

Do's (Things to include):

Use <body background=#FFFFFF> syntax if the background color of your message is white. WebTV users need this code because the default background color for WebTV is black.

Don'ts (Things to avoid):

GoLive Layout Grids
GoLive Components
GoLive Actions
Floating Boxes
DHTML
Rollovers, Javascript, SWF (Flash)
Framesets
Nested tables
Anchor links to other spots on the page

Using Images in your Email

While you can use images in your document, you need to be aware of how they should be referenced, and you should consider a limit on how many you use. In this section we'll discuss how to properly reference images in your Email.

Referencing the Image From the Page

When surfing the Web, a user's browser loads an HTML page into its window. That HTML page may have images on it. In the majority of cases, those images are referenced in the HTML syntax via a relative URL because the page and the images both exist on the same Web server. Translated into GoLive terms, that mean that both the page and the image on the page reside in the same site, maybe even in the same folder. (Figure 1.05)

Figure 1.05

So the syntax written into the page that references the image would be a relative URL. (Figure 1.06)

Figure 1.06

As with a Web page, images used in your HTML Email will also be sitting on a server. The Email, however, is on the user's computer. In order to properly reference the images, you must use full absolute URLs in your syntax. (Figure 1.07) Once you change relative URLs into full absolute URLs, the images will no longer show up in Layout or Preview Modes of GoLive. Because of that, it's easiest to first complete your design, then when you are done change the relative URLs for the images into full absolute URLs.

Figure 1.07

How Many Images are Too Many

An Email that is heavy on the images and light on text creates several problems. First, the download and rendering of the Email will take longer which may cause the user to press delete before they've even seen the full document. As mentioned earlier, reading such a document offline will leave big gaps where images should be. It is not possible to copy and paste information from an image, such as an email address, into an address book or browser. For that reason, important info like phone number or URL should not be made into an image. Go easy on the images, and make sure they are well compressed so that their file sizes are as small as possible. Now that you've got your Email prepared, you need to get it out of GoLive, and into an Email application for sending. In the next section you will read about the many options you have for doing just that.

Uploading The Images

The final step, before sending your HTML Email, is to upload the images to the Web server. It is not always neccessary to upload the actual HTML page, although it won't hurt anything if you do, and doing so gives you an online version of the Email that your customers can access via a browser. For instructions on how to upload using GoLive, see GoLive's online help under the subject FTP.

Sending the Email

Now that you are ready to send your Email, you'll need to determine which option of many best suits your needs. In this section we'll discuss the available choices.

Assessing Your Needs

Before going any further, answer the following questions. By doing so you'll be able to identify more quickly which option best suits you or your client's needs.

Do you wish to send your HTML Email to a small group of people (let's say under 50), for instance a group that you have set up in your Email program, or do you wish to send the Email to a larger audience?
Is the group you intend to Email defined in a database? If so, what type of database?
Will this be a one-time mailing or a repetitive mailing?
Will you be sending the Email as HTML Email only or as a multi-part MIME message? (For more info on multi-part MIME proceed to the next section, Issues and Considerations.)
Does your ISP allow batch Emailing?
Has the user "opted-in" to your mailing, or are you sending an unsolicited message?

If you are sending a small mailing, or a one-time mailing, then sending the Email out via a basic Email application may do the job. However, it's important that you check with your ISP to see what the allowance is in terms of the number of Emails you can send before you get flagged as a spammer. If you intend to do mass mailings to large audiences whose names and Email addresses have been captured into a database, or if the mail will occur regularly, you probably need to consider using a proprietary batch Email merge application or online service. As mentioned earlier, it's polite to give your recipients the choice of what format they prefer, plain text or HTML Email. Using the multi-part MIME standard allows you to create one Email that can be delivered either way, thus eliminating the need to keep two separate mailing lists. For more information on multi-part MIME, read the next section: Issues and Considerations During Emailing.

Sending the Email from Outlook Express for Windows

To send an HTML Email from Outlook Express for Windows, complete the following steps.

Choose File > Select Stationery
Navigate through your hard drive and select the HTML page you made in the section 2, "How to prepare the document in GoLive."
Press Okay.
Give your Email a subject line, fill in the To field and send.

Sending the Email from Netscape 6.2 for Macintosh or Windows

In Netscape Composer, choose File > Open
Navigate through your hard drive and select the HTML page you made in the section 2, "How to prepare the document in GoLive."
Select All, then choose Edit > Copy
Open Mail & Newsgroups
Choose File > New Message
Choose Edit > Paste, to paste your copied document into the body of the Email message.
Give your Email a subject line, fill in the To field.
Click Send. When prompted to select a format in which to send the message, choose Send in Plain Text and HTML.

TIP: If you are sending the Email to a group of people, it is wise to create the group first in the address book of your Email application. Then, when sending, put your own Email address in the To: Field, and put the group in the BCC: Field. BCC stands for Blind Carbon Copy. This sends a copy of the message to each person in the group while keeping their Email addresses invisible to the other recipients in the group. Using this method, the only Email address that will be visible to the recipients will be yours.

Applescript for Outlook Express or Entourage for Macintosh

Users of Outlook Express or Entourage for Macintosh have another option. Visit AppleScript Central and download the free AppleScript called Send Complex HTML, by Paul Berkowitz. This script allows you to send complex HTML via OE or Entourage. It gets the source of the HTML from either a saved HTML file or from the front window of Internet Explorer.

MacScripter.net

Stand Alone Email Merge Applications

Below is a list of stand-alone Email merge applications separated by computer platform. (Note: there may be others that are not on this list, but this is a good starting point.) These applications vary substantially in both feature-set and cost. Some of them offer free trials while others do not. It's worth spending a little time comparing the offerings to determine what may best suit your needs.

Online Email List Services

If you prefer not to host and manage the list yourself, you may choose to use an online Email management service like those listed below:

eNews Builder - Online

L-Soft Lyris ListHosting

MailMerge Servers - Linux

SKYLIST

SparkLIST

Issues and Considerations During Emailing

This section is a listing of issues that you may need to examine further such as ISP considerations, AOL users, and more, with links to additional information when appropriate.

What is Multi-part MIME, and Should You Use It?

Simply put, it's a protocol that allows Email messages to be sent as both text and HTML in the same document, thereby allowing the recipient's Email application to display the message either way. This is far and away the best choice for sending HTML Email. Using this method, you can be sure that your Email will not show up in the recipient's Email box as an unreadable mass of HTML source code if their Email application does not display HTML. For users who choose not to allow HTML Email, the message comes through neatly formatted as plain text, while those who prefer HTML Email see the message as you designed it. If you choose a stand-alone Email merge application to send your HTML Email, check to see if it supports multi-part messages. Most do.

For every little detail of the geekiest type regarding multi-part MIME, visit the Internet RFC/STD/FYI/BCP Archives.

Multipurpose Internet Mail Extensions (MIME)

Will You be Labeled a Spammer?

Some Internet Service Providers place a limit on the number of messages an individual can send before he or she is considered a spammer. Check with your ISP to see what their limitation may be so you don't find yourself banned from service. Generally speaking, using an Email merge application overcomes this limitation because each message is individually addressed and sent as opposed to sending one message to a large group from your regular Email client. To read more about spam, what it is, and how to avoid becoming a spammer, visit the Anti-Spam Website.

Fight Spam on the Internet!

How Will Your Message Be Seen?

Not all Email applications are created equal. Some can read HTML Email, others can not. Even more perplexing, one program's HTML reading capabilities may vary by version. You can check Dr. Ralph Wilson's HTML E-mail chart to help determine what your readers will see.

HTML E-Mail Client Program Summary

What About AOL?

Older versions of AOL (pre version 6, which means all Mac versions) are incapable of reading HTML Email. For instructions on what is and is not acceptable for AOL mail, you can visit the AOL Webmaster Info site.

AOL Webmaster Info

Resources

While this paper attempts to get you started with HTML Email, it is by no means exhaustive in its depth. Therefore, a listing of additional resources (URLs) on the subject of HTML Email is included in this section. Many thanks to Dr. Ralph R. Wilson, of Wilson Web, for making a wealth of information on this subject available to the public, which was a great aid in creating this paper.