Stupid HTML Email Design Mistakes

As the EmailLoop Abuse Desk person, I watch our outgoing email server queue all the time. I see a lot of emails. Most of them are great, but as you can probably imagine, I see a lot of mistakes. It's one thing if it's some small business owner who goofed on a CSS tag. That's forgivable. But it's astounding how many professional web designers (and programmers!) make silly mistakes in their HTML email campaigns. With the exception of just a few little tweaks, HTML emails are really just miniature web pages. So there's really no excuse for the mistakes I keep seeing.

If you're a web developer, and you're totally new to designing HTML emails, read this before you start offering email marketing services to your clients.

1. Not designing for preview panes

It's the most common mistake we see with newbie email designers. They figure, "HTML email is like web page design. I design web pages to fit 1024x768 screens, so I'll do that with my emails, too." Truth is, people read email in their preview panes, and they rarely maximize emails to full screen. Different email programs have different sized preview panes. Mozilla Thunderbird's preview pane is horizontal. Outlook 2003's preview pane is vertical. AOL's preview pane is tiny:

Tips for dealing with preview panes:

• Don't design your emails too wide. About 600 pixels wide is as far as you should go.
• 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 behind the preview pane somewhere. Your logo gives your email credibility.
• How does AOL design their own emails? Screenshot here

2. Assuming images will work

More and more email programs are turning off images by default. Recipients have to click a button, or right-click on an image to "turn images on." It's a privacy protection measure. When you design HTML emails, you should always assume that your images will be turned off by default, and that your recipients will be too lazy to turn them on:

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. The downside to using alt-text is that if you're too descriptive about the missing image, they won't actually need to view the image.
• Don't put the important content into images. Always use text for the important stuff.
• If you (or your clients) are willing to pay for it, email certification sometimes gets you into inboxes with all images ON by default. Read about email certification here.

3. Too many images, not enough text

We should 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. Go look in your email junk folder. Chances are, your spam filter has hundreds of image-only spam already trapped.

We've seen a lot of designers create emails that are nothing but one giant image. Sure, their emails aren't spam, and they look way better than the grainy "Ch3ap R0L3X W4tches" image spam we all get, but spam filters can't exactly judge beauty (yet).

When you design your HTML emails, always include some text in it. Never design an "e-flyer" or just one big, ginormous graphic. For one, images are turned off by default (see Mistake #2 above) and spam filters will think you're sending image-only spam. If you send one giant image, with not enough supporting text, you can even get blacklisted (click the screenshot to see what we mean).

Some spam filters appear to place the "image vs. text ratio" criteria even higher than the "spammy keywords" criteria. We've tested one campaign where removing all their spammy keywords actually resulted in a worse spam score, because we reduced the overall word count. Here's the study.

Tips for image-to-weight 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.
• Just can't include tons of text? If your content is just one or two lines of text, don't insert more than one or two graphics into the email.
• We've seen emails with very little text, and one giant graphic get past spam filters. But the image was very well compressed, and the HTML code was spotless.

4. Not testing in different email programs

When you design web pages, you probably test in a couple browsers, right? Firefox, IE, and Safari? What about testing email? There are a few dozen email programs and webmail clients out there. And they all render HTML email differently. That means you kinda have to design with your eyes crossed. Things aren't going to come out perfectly. Assume CSS will break, assume images will be blocked, assume TABLE padding won't always work as planned. Above all, test your designs in as many email programs as you can. At EmailLoop, we have a few test computers. Our big momma lets us run multiple operating systems, so that we can install different email programs with different spam filter settings. We're also subscribed to AOL, Comcast, Earthlink, Bellsouth, and other ISPs. You can do all this too, or just use EmailLoop's Inbox Inspector to let us test for you. We'll generate screenshots of your campaign in all the major email programs, and test it in all the major spam filters. Details...

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 of 2003 which is now law.

If you use any of EmailLoop's built-in HTML email templates, we actually insert all that stuff for you automatically.

But we've seen some designers try to remove their footers. Or they try to make the text in the footer extremely tiny. Or they use a font-color that almost blends in with the background. Some of them even try to work all that footer content into an image map! When we call them up to scold them for trying to break the law, they're usually shocked, because they had no intention of breaking the law. They were just "trying to make the footer look pretty." Don't let aesthetics trump common sense. If you break CAN-SPAM rules, you can get sued (up to $11k for each recipient). The FTC has already been actively suing some well-known companies for breaking the law. They don't care if it was an accident or not.

Tips for your email footers:

• Always include an unsubscribe link
• Always include your physical (postal) mailing address. PO Boxes are not sufficient.
• Bonus: Include a "Permission Reminder" to prevent those "Who the @#$% are you, and how'd you get my email address?!?!?" situations.
• Your footer is not just for your recipient to read. Assume 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. The more details in your footer you can provide, the better.
• If you have a privacy policy, link to it in your footer. Don't have a privacy policy? Here's a tool to generate one.
• The footer is an excellent place to insert a "forward to friend" link. See how in EmailLoop

6. Too fancy-schmancy

Most email apps probably support stuff like Flash, JavaScript, ActiveX, etc. Problem is, that's exactly how most email programs get infected by viruses. So most people run anti-virus programs on their machines, that check incoming email for that fancy stuff, and remove it (or quarantine your message). It's not that email programs and spam filters won't take your beautiful flash animation, or your embedded movie. It's their anti-virus app spoiling all the fun.

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.
• If you send enough promotional email campaigns (not the same as newsletters), you'll soon learn it's more about the landing page than the email itself. The landing page is where the ka-chings happen. That's why we recommend building a few solid, re-usable email templates, and don't reinvent the wheel for each campaign. Waste of time. Just focus on good, solid content that you can email quickly, and spend most of your time on your landing pages. For tips on landing pages that convert, get this book from Bryan and Jeffrey Eisenberg: Call To Action. Thumbs up.

Free Email Marketing Newsletter

Will your campaign make it past the spam filters? Check your spam score with EmailLoop's Inbox Inspector tool.
Find out more...

Do you know if your email's rendering correctly in all the different email programs? EmailLoop's Inbox Inspector generates screenshots of your campaign in 16 different email programs. With one click.
Find out more...

• Customer Showcase
• EmailLoop Blog