By Contributing Editor Kristin Zhivago, Author of Rivers of Revenue

It's easy to get into an HTML rut. You and your designer worked hard to develop the templates you use for newsletters, regular alerts and announcements. Now you focus more on the content of the message, rather than the look and feel.

But, just as with Web sites, email templates need to be periodically tweaked and tested to improve results. HTML email templates should be organic too.

Meet three marketers who revamped their templates this year and improved their results. (Note: link to before-and-after samples of all below.)

Revamp #1. CareerBuilder

At first glance, CareerBuilder's old HTML design for the Cool Jobs newsletter looks pretty good. Similar, in fact, to many other top mailers' newsletters.

But, there was one problem: if you opened the message using Outlook preview, you saw a logo, peppy headline copy, even photos of some happy people. What you didn't see was a clickable link.

Recipients had to scroll down in preview, or click to open the message as a whole, to see links. The redesign was simple. The team ripped out the friendly photos, and dramatically reduced the headlines and other header graphics. Now clickable links appear even in preview.

Results? According to CareerBuilder's April Guy, "Comparing these two emails, we doubled our clickthrough rates by editing email design and strategically placed links.”

Revamp #2. Heartland Film Festival

Marketers at the Heartland Film Festival could count on getting a relatively high open rate averaging 49% to their monthly promos for new films.

Recipients recognized the brand name, and figured the content would probably be entertaining.

But the click rate was around 3.3%. Partly this was due to the fact that there was only one place to click. And also the content focused 100% on just one film-of-the-month, so recipients probably felt they had enough info without clicking.

This September the team redesigned their template to include a side column of clickable links to a variety of films in addition to the main attraction. Result? Unique clickthroughs at 11.9%.

Revamp #3. PostNewsweek Tech Media

Although PostNewsweek Tech Media publish well designed newsletters for the general public, their sales team's announcement template suffered from back-burner-syndrome.

No one had touched the templates for years, and it showed. Once above-average, they now appeared amateurish. Plus, no one tracked click metrics at all, partly because there wasn't much to click.

The new template launched this year features some of the fattest click buttons we've ever seen. PostNewsweek's Kerree Wolf says, response rates have at least quadrupled.

Seven HTML Email Format and Design Tips

We asked Exact Target's Design Services Manager Chad Rader, who helped all three of the emailers above with their revamps, for his HTML tips.

#1. You can use cascading style sheets—but use Cascading Sheets 1.1, not 2.0. If you use Cascading Style Sheets 2.0, it may not make it past the email gateway, and certain email clients (Netscape Communicator and Lotus Notes) won’t render the message properly.

#2. Be careful how you employ Javascript. It’s often used by hackers to trigger a virus, so security programs view it with suspicion. Avoid code that causes an action to be taken inside an email. For example, it’s OK to have a search function with a “submit” button that takes the recipient to a Web site where the results are displayed. In that case, the “action” takes place “outside” of the recipient’s computer. But a mouseover within an email would be viewed as an “action” taken within the email itself… and firewall programs will bounce the email.

#3. Don’t exceed a pixel width of 700 pixels. That will keep the email centered nicely in the preview panes used by Outlook, Lotus, or Outlook Express, without forcing recipients to scroll back and forth to read the preview. (As if they would!)

#4. Put your main message, corporate identity, and call to action at the top. Because so many people use the preview panes, you want the top third of your email to work the hardest. Recipients should know who the email is from, what the email is about, and what you’re asking them to do—without needing to scroll.

#5. Use an HTML table structure to format your email. Tables provide the most control; they’re recognized by all email clients. However, don’t use percentages to define table widths and heights, which confuse older email clients such as Netscape Communicator and Lotus Notes. Instead, spell out specific table measurements using pixels.

#6. Pay attention to “printability” when choosing background colors. Let’s say you’ve got white text on a blue background. If the recipient’s email browser is not set to print background colors, the type will print white—as designed—but so will the blue background. The entire printout will be white.

#7. Pre-test creative alternatives with a small audience. “The simplest change can make a huge difference—things like a button that says, ‘go here’ versus ‘click here’ could put your response through the roof,” Chad says. “Treat it like a science project.” Test new variations in emails sent to small audience groups. Incorporate whatever works into your final, best-of-breed message.

Three More Tips: How to discourage phishers from pretending to be you

Rader says one of the top revamp concerns many mailers have these days is how to discourage phishers from ripping off your design in order to rip off your customers.

The problem is you get the best marketing results if you stick to a consistent look and feel for your emails to house lists. But that consistency makes you more of a target for phishers. If your emails always look the same, a phisher’s exact match will look “right” to recipients.

Of course, you wouldn’t want to fight back by being inconsistent. That’s a branding no-no. Instead, here are Rader's three tips on making life tough for the phishers:

#1. Encrypt all of the links in your email, including image links.

#2. Use a watermark in the background of your emails. That way, anyone who steals your template and attempts to change the copy will have to remove the watermark, replace your legitimate copy with their own copy, and then replace the watermark. That’s a lot more trouble than just replacing black type on a white background.

#3. Use well-defined style sheets. Sophisticated use of colors and fonts will make it more difficult for a hacker to copy your emails.

In short, make it difficult for hackers. As Chad says, “If you make it too complicated, they’ll look elsewhere for emails that are more easily replicated.”

Useful links related to this article:

Before-and-after screenshots of the three HTML email makeovers: www.marketingsherpa.com/emailredesign/ad.html

Last week's MarketingSherpa article (in case you missed it) 'HTML Email Campaign Best Practices: 12 Design Rules' http://www.marketingsherpa.com/sample.cfm?contentID=2824

Exact Target http://www.exacttarget.com