Article

HTML eMail Troubleshooter

Page: 1 2

Using a Previously Mailed Document as the Basis for your Code

You may experience problems whenever you try to use code that has already been mailed as the basis for your new mailing. This is most often seen when the code you want to re-use has already been rendered through a Web-based browser. Many Web-based email clients and image hosting companies, such as Netscape NetMail or Akamai, have their own redirection and accounting. These functions will break your links if you try to send them a link that has previously been processed by their system.

So, simply put, do not try to redirect a redirect. This is true for your own redirects as well.

Because these systems assign redirects to any HTML link that they can discover, it is often better to avoid using "named anchors" as well. A named anchor, or "jump anchor", is a link that takes you to another spot in the same document:
<A Name="foo"> If a redirect gets placed on a named anchor, it will most likely either break the link or spawn a new browser window -- with unpredictable results. From a marketing standpoint, if your email is so long that you feel you need to use named anchors, maybe you should consider editing.
<A Href="#foo>This would jump you to "foo" in this email"</A>

Unnecessary HTML in Your Email

Now let's talk about the different elements that, while often included in mailings, are not really necessary. The following elements should be stripped out before you mail. This will reduce the overall size of your mailing and increase the speed with which it is delivered, rendered, and received by your customers. While this may not seem like a big deal for a hundred piece mailing, imagine sending 5 million or so emails in a single day...

All Meta Tags, Including Refresh Cache & Pragma

Many systems will disable some Meta Tags by default, however when Outlook receives a refresh command it will merely display blank content in both the preview pane and open message. Web-based systems will usually only display content taken from between your <BODY></BODY> tags.

<TITLE></TITLE>

The subject section of your email message takes care of this element.

Long Comments or Commented-out Sections

<!--Nuff Said-->

Programs that Export to HTML

If you're using Dreamweaver, FrontPage, or Adobe - avoid any references to extensions, styles, or Fireworks/Image Ready tables. This is most common with Front Page extensions, which reference IE-only styles quite often. If you have a document that uses a library item, such as Dreamweaver, you'll have to break the library item apart and insert your code as raw HTML for your mailing to work correctly.

Redirects

Many Web-based email clients place their own redirects on your links (for whatever nefarious reasons...). So if you place your own redirects on urls, turls, or query strings, they may break, or show up as plain text in the middle of your email.

Extraneous Style Sheets

Make sure that if you use style sheets, they include only the elements that you'll be using for a particular mailing. This helps cut out bulk and unnecessary code from your mailings. This phenomenon is most often found when a mock-up contains the entire style sheet for a Website, rather than just the styles used in the mailing.

So if you had 100 lines of code that defined 25 styles on your Website, but you were only using one style for your HTML email, you could either mark up the style in HTML code, or you could simply define one style and apply it to the entire email. While this may not seem like a big deal for a couple of hundred emails, again, it adds up if you're sending a million emails in a day.

Special Characters

Be careful when you use special characters in your HTML email. Special characters include those which must be generated through an escape sequence (ex: © = &copy; in HTML), and many email browsers will have trouble reading these characters.

One character sequence to be especially careful of is the non-breaking space character (&nbsp; ). Many WYSIWYG editors (like FrontPage & Dreamweaver) have fallen in love with this character. Furthermore, many WYSIWYG editors use the Non-Breaking space to wedge open <TD>'s, which will usually close up when viewed by the majority of Netscape browsers. A spacer GIF should be used when you absolutely have to keep a <TD> cell open in order for your design to work.

HTML eMail -- Effective Communication

Although it seems that HTML email necessitates a reduced level of functionality, you can still deliver an effective communication to you subscribers if you follow the conventions described above.

In the next part of this discussion, we'll explore the inclusion of JavaScript & Rich Media elements such as Flash and embedded video in your emails. See you then!

If you liked this article, share the love:
Print-Friendly Version Suggest an Article

Sponsored Links

Rate This Article

  • 1
    Poor
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    Great

Comment on This Article

Have something to say?

Post A Comment

You need to be a member of the SitePoint Forums to comment on this post. Sign Up

Already a member? Post using your SitePoint Forums account: