A Simple Way to Format HTML E-Mail Newsletters

Editor’s Note: This article was originally published by Web Marketing Today. Practical Ecommerce acquired Web Marketing Today in 2012. In 2016, we merged the two sites, leaving Practical Ecommerce as the successor.

I hesitate to provide a guide to formatting HTML e-mail for one reason: there’s little else about this on the Web, and the article is likely to produce a torrent of phone calls and e-mail inquiring about further details. If you promise NOT to phone or e-mail me about these how-to steps, I’ll share a simple method that will produce workable HTML e-mail. And, if you have good taste and some website design skill, it can produce an attractive design, as well.

• Prepare the text in your Word processor

1. My favorite is Word 97. Word 2000 produces a very specific form of HTML, not the nice generic one generated by Word 97. Since nearly all my articles end up in HTML format eventually, I write in HTML with Word 97, using H2, H3, and H4 to designate headings. This approach is much more consistent that either FrontPage’s or Word’s “translation” of my Word .doc file into HTML after I’ve composed it.

1. 1. Open FrontPage 2000. There are a lot of things to like about Microsoft FrontPage 2000 as a WYSIWYG web page editor (WYSIWYG stands for “What You See Is What You Get”). I can’t say the same about FrontPage 97 and 98 which destroy carefully written HTML code without a second thought. For most webpages, I use HotDog 5.5, but not for HTML e-mail, since the WYSIWYG feature is essential to careful layout.

1. 1. Open a New Page(or a FrontPage template you’ve prepared already) using the command File | New | Page.
   2. Move to the appropriate spot in your template, and then use Insert | File to insert the HTML page you’ve prepared in Word 97. I suppose you could write your entire newsletter in FrontPage 2000, but Word 97 is much more powerful as a word processor.
   3. File | Save will save the new document as a webpage. Now make whatever changes you need to, to get it looking nice.
   4. Edit | Select All will highlight the entire document. Then use Edit | Copy to copy the document onto the Windows clipboard.
   5. Open your E-Mail Program, and open a blank e-mail message formatted for HTML. I use Outlook 2000 with the default set on plain text e-mail. So every time I want to send HTML e-mail I use the following sequence.
      1. Open new e-mail message using Actions | New Mail Message
      2. And when it is open, Format | HTML
   6. Use Edit | Paste to paste the HTML newsletter document on your clipboard into the body of the e-mail message.

• Then…

1. E-mail a test to yourself. Keep testing until it’s perfect.
2. When you’re satisfied that it’s perfect, e-mail to your HTML e-mail subscriber list.

The first time I did this I spent hours trying to get my template just right. I tried to minimize graphics that would need to be downloaded. Rather I used colored “tables” with reversed text for headings, and a vertical table along the left side to carry some color all the way down. I also carefully designed all the header, masthead, contact information, and footers, and saved this as a FrontPage 2000 template. Now to quickly publish a newsletter in this format, I open the template and a great deal of work is already done.

I’ve found the e-mail edition of Woody’s Access Watch (http://www.woodyswatch.com/) a great exemplar to learn from, prepared by Aussie HTML e-mail guru Peter Deegan (http://www.mcc.com.au/). Take an HTML e-mail newsletter you like, File | Save As html, and then examine the HTML code to see just how they achieved their results.

Learn how to prepare embedded style sheets to control how elements appear to the reader — even though e-mail clients aren’t at all uniform about the way they support the CSS standard. Using style sheets is much easier than enclosing everything with FONT tags to control color, size, and font.

Test, test, test. Give it your best shot, and then send it to a number of people with different kinds of e-mail programs who can offer detailed feedback about which elements of your design they can see, and which don’t work with their e-mail program. Make careful notes about their observations to guide you in which HTML features to leave out next time.

Recommended

Dr. Ralph Wilson on the Founding of Web Marketing Today

July 18, 2012

For example, I was disappointed to find that internal links in a table of contents at the top of the newsletter to anchors farther down the HTML e-mail newsletter did not work. Too bad.

The best that can be said is that HTML e-mail is still in its infancy. But with 60% of users now preferring it, you need learn how to use HTML e-mail for your newsletters. Not today, maybe, and not tomorrow. But soon, and for the rest of your life.