Home  › Email › Email Marketing

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

  |  July 5, 2006   |  Comments

Ten HTML tips for e-mail. Ignore them at your peril.

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: "E-mail marketing solutions"

  • 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.

ClickZ Live Toronto Twitter Canada MD Kirstine Stewart to Keynote Toronto
ClickZ Live Toronto (May 14-16) is a new event addressing the rapidly changing landscape that digital marketers face. The agenda focuses on customer engagement and attaining maximum ROI through online marketing efforts across paid, owned & earned media. Register now and save!*
*Early Bird Rates expire April 17.

ABOUT THE AUTHOR

Kirill Popov and Loren McDonald

As director of ISP relations and delivery, Kirill Popov creates and enforces strict usage and anti-spam policies, maintains ISP and community relations, and oversees all abuse and policy investigations and inquiries for EmailLabs clients. Kirill works with clients on best practices, content, design, and list hygiene to minimize potential delivery issues. He's a registered member of the SpamCon foundation and representsEmailLabs on AIM's Council for Responsible E-Mail.

Loren McDonald is vice president of marketing at e-mail marketing automation company EmailLabs, overseeing corporate marketing activities and client consulting services. He has 20 years experience in marketing, consulting and strategic planning. Earlier, Loren was founder and president of Intevation, an e-marketing services firm specializing in e-mail and SEM. He's held executive marketing positions at companies including USWeb/CKS (marchFIRST), NetStruxr, and Arthur Andersen.

COMMENTSCommenting policy

comments powered by Disqus

Get ClickZ Email newsletters delivered right to your inbox. Subscribe today!

COMMENTS

UPCOMING EVENTS

Featured White Papers

ion Interactive Marketing Apps for Landing Pages White Paper

Marketing Apps for Landing Pages White Paper
Marketing apps can elevate a formulaic landing page into a highly interactive user experience. Learn how to turn your static content into exciting marketing apps.

eMarketer: Redefining Mobile-Only Users: Millions Selectively Avoid the Desktop

Redefining 'Mobile-Only' Users: Millions Selectively Avoid the Desktop
A new breed of selective mobile-only consumers has emerged. What are the demos of these users and how and where can marketers reach them?

Jobs

    • Contact Center Professional
      Contact Center Professional (TCC: The Contact Center) - Hunt ValleyLooking to join a workforce that prides themselves on being routine and keeping...
    • Recruitment and Team Building Ambassador
      Recruitment and Team Building Ambassador (Agora Inc.) - BaltimoreAgora, www.agora-inc.com, continues to expand! In order to meet the needs of our...
    • Design and Publishing Specialist
      Design and Publishing Specialist (Bonner and Partners) - BaltimoreIf you’re a hungry self-starter, creative, organized and have an extreme...