If E-Mail Clients Mangle Your HTML... Fix It!

By Kirill Popov and Loren McDonald , July 5, 2006

Does your email newsletter contain a text link that directs readers to a Web version if they can't read the content in their email clients? If you don't, you should. But that alone won't absolve you of the sin of bad HTML design.

In the days when primitive email clients (like early AOL) routinely chewed up HTML, linking to a Web version was your only defense. Today, just about every email client can properly render HTML. But you must still format it correctly. Linking to a Web version without correcting malformed or nonstandard HTML is the lazy marketer's way to deal with HTML that doesn't properly render.

Besides, bad HTML is only part of the problem. Now that major desktop and Web-based clients for both business and consumer recipients use image blocking and preview panes as default settings, that link may not even appear if you drop it into a single, large HTML image.

As we've noted before, you should design the top three to four inches of your message with text and HTML that tells readers what offer or content they'll find below. This encourages them to turn on images and take the desired action. Otherwise, they may just delete your message without reading it, particularly if all they see is a big, blank white space.

The list below identifies 10 common HTML tips. Compare it to your own HTML before you send your next campaign or newsletter.

Ten HTML Tips: Ignore at Your Own Risk

• Code email by hand. HTML design for email is trickier than Web HTML. HTML design programs such as FrontPage aren't ideal for designing HTML email. They typically add extra code that wreaks havoc with certain email clients. Also, don't use Microsoft Word's "Save as Web Page" functions. It looks easy, but trust us -- you'll commit an HTML abomination.
  
  Have an HTML programmer code your email template by hand to keep it clean. Alternately, use programs such as HomeSite and Dreamweaver and remove any unnecessary code by hand.
  
  
• Be careful with tables. Avoid using nested tables. Some email clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. Also, avoid 1 x 1 pixel spacer GIFs (to force widths in your table data cells). These are often found in spam and could get your email blocked.
• Use care with background images. Background images for individual table cells are generally acceptable but may not appear in clients such as Lotus Notes.
  
  
• Host images on your Web site instead of embedding them in messages. Some ISPs filter email with embedded images. File size can get quite large with multiple embedded images, which can also get the message blocked. Instead, host those images on your Web site and make sure all paths point to the full URL (e.g., http://www.mysite.com/images).
  
  Additionally, use absolute rather than relative links. We often see messages with broken images that pointing to "images\image.gif" rather than a full absolute link.
  
  
• Avoid CSS (define). CSS on a Web site can simplify the coding process and ensure a consistent style. In HTML email, they can cause incorrect rendering in some email clients, or get stripped out or overwritten. If you must use CSS, choose the embedded styles also known as inline. Embed the style within the two body tags, not within the header. Inline CSS can also be embedded directly in the message code.
  
  
• Keep HTML email 500-650 pixels wide. Wider HTML messages often force the recipient to scroll horizontally to view the whole message. Messages that are too wide are problematic, especially in a preview pane.
  
  
• Use image alt tags. These show one or two words describing an image or an action when the image doesn't display because of slow loading time or image blocking. (However, except for Gmail, most ISPs/email clients that block images also block alt tags.) A sample alt tag looks like this: ""
  
  
• Add functionalities (e.g., send to a friend) carefully. Many email clients won't render forms correctly or pass data from an email form to your Web site. Use links to your Web site for send-to-friend forms, surveys, search boxes, and so forth to ensure the greatest compatibility.
  
  
• Just say no to Flash. Host rich-media functions such as inline audio, video, or Flash on your Web site instead of embedding them in an email. Post a link that connects directly to these functions on your site. Many recipients won't have the compatible computer platform, email software, or correct version they need to render those functions correctly.
  
  
• Avoid scripting (JavaScript, Visual Basic etc.) if you can. Usually the scripts will be stripped out, causing the intended function to break. Sometimes scripts are mistaken for malicious code and get the message rejected outright. Instead, move readers to your Web site, where you can more safely use dynamic components.

Test, Test, and Test Again

It's the same old song: test your message multiple times before you send it. It's critical with HTML, partly because it's so easy and low-tech to do on your own. Check with your email service provider to see if it can do this for you, or contract with a third-party service. Perform the following tests:

• Validate the HTML content with the W3C's Markup Validation Service. It's free!
  
  
• Test your messages in key subscriber email clients (Lotus Notes and Outlook for business; AOL, Hotmail, Yahoo, and Gmail for consumers with image-blocking and preview pane enabled).
  
  
• Test on different platforms -- PC, Macintosh, and handheld (Treo/BlackBerry) -- and in different browsers, including Internet Express, Mozilla Firefox, Netscape, and Opera.

You can find more advice in our earlier column, "Seven Steps to a Better Template."

Take the time to do HTML right, if you want to keep on deliverin'.

Want more email marketing information? ClickZ E-Mail Reference is an archive of all our email columns, organized by topic.

Back to Article