Stupid Email Design Mistakes

It's amazing how many professional web designers make silly mistakes in their HTML email campaigns. After all, HTML emails in many ways are simply miniature web pages. But the limitations of email software programs and the increasing use of strong virus filters combine to deep-six up many a campaign. Here are six common mistakes you should avoid:

1. Not designing for preview panes

It's the most common mistake we see with new email designers. They design web pages to fit 1024x768 screens, so they think they should continue to do that with emails too. Truth is, people read email in their preview panes, which they rarely maximize to full screen. In addition, different email programs sport different sized preview panes. Mozilla Thunderbird's preview pane is horizontal. Outlook 2003's preview pane is vertical. AOL's preview pane is tiny. What’s a designer to do?

Tips for dealing with preview panes:

• Don't design your emails too wide. About 600 pixels wide is the maximum.
• Make sure the most important content "peeks" out the side of the preview pane. Try to get your call to action above the scroll.
• Left-align your company logo. You don't want that to be hidden somewhere behind the preview pane viewing area. 

2. Assuming images will work

More and more email programs have images turned off by default. For privacy protection, recipients have to click a button, or right-click to "load images." As a result, when you design HTML emails, you should always assume that images will be turned off by default, and that your recipients will be too lazy to load them.

Tips for dealing with images turned off:

• Include alt-text for your images. Hint: some email programs will even apply CSS to alt-text, so you can wrap images inside a span, and set "font-size:24px;color:#FFCC00;" to make your alt-text pop.
• Don't put the important content into images. Always use text.
• Email certification (if you are willing to pay for it) may get you into inboxes with all images ON by default. 

3. Too many images, not enough text

We all know by now that spam filters look for spammy keywords. So spammers are trying to fool them by sending emails with one giant graphic instead. When you design your HTML emails, always include some text in it. Never design an "e-flyer" or just one big, enormous graphic. With images turned off by default, spam filters will think you're sending image-only spam. You may even get black-listed.

Tips for image-weight-to-text ratio:

• Lots of small thumbnails seem to work better than lots of big graphics. Even if you have lots of text to balance things out.
• If you don’t have tons of text to include (e.g. your content is just one or two lines of text), don't insert more than one or two graphics into the email.

4. Not testing in different email programs

When your web designer designs web pages, he or she probably tests your web templates in several different browsers — Firefox, IE6 and IE&, and Safari. With email, it’s just as important. There are a few dozen email programs and webmail clients out there and they all render HTML email differently. That means you have to assume CSS will break, images will be blocked, and table padding won't always work as planned. So test your designs in as many email programs as you can or use a reporting service that will generate screenshots of your campaign in all the major email programs. 

5. Neglecting your footer

You should always include an unsubscribe link and your physical mailing address in the footer of every single email campaign you design. That should be common sense, but it's also required by the CAN-SPAM Act.

Tips for your email footers:

• Always include an unsubscribe link
• Always include your physical (postal) mailing address. P.O. Boxes are not sufficient.
• Include a "Permission Reminder" to minimize those "Who the @#$% are you, and how'd you get my email address?!?!?" situations.
• Your footer is not just for the recipient. Assume that an abuse desk engineer at a major anti-spam organization has just received a copy of your email as "reported spam." He's going to analyze your email for clues that it's legit and opt-in. 
• If you have a privacy policy, link to it in your footer. 
• The footer is also an excellent place to insert a "forward to friend" link. 

6. Too fancy

Most email apps actually support fancy effects created with Flash, JavaScript, ActiveX, etc. But since that's how most email programs get infected by viruses, most of your recipients run anti-virus programs that remove the offending effect or quarantine your message.

Tips for Flash, movies, etc. in HTML email:

• Take out the flash movie, and replace it with a stunning graphic that would make people want to click (don't forget to include some text to balance your image-weight-to-text ratio).
• Link the graphic to a landing page on your website. Put the flash movie on the landing page.

These tips aren’t meant to discourage creativity. They are meant to get your emails delivered and viewed as intended. If your design team gets discouraged, have them concentrate on creating effective landing pages. If you send enoughpromotional email campaigns, you soon learn that the landing page is where all the action happens.