Gorgeous HTML Emails That Generate Results

Your hand trembles, clenched around your mouse, as your curser gets closer to that “Launch” button. The html email that you and your team have slaved over, a pinnacle of design and message, awaits your command. You click. The email blasts out to 10,000 of what you hope are big fans of your business, and you make a mental sacrifice to the Marketing Gods, hoping that even a 10th of your recipients will open the email, much less jump on your call to action.

HTML emails are a tricky lot, with so many email clients (each that interpret the email slightly differently than the next), plus browsers, plus ways to view email on mobile. Your email has a million ways to break down and look ugly. Your email might look gorgeous in Eloqua or Vertical Response, but what about in your readers’ inboxes?

Image madness

First, and this is important: whatever you want your reader to see, keep it near the top, and preferably in text form. Not everyone will see your images. Sure, you’ll have a text-only version for people who can’t see your images, but plan on some people not being able to load your images. Or not bothering to load your images, for that matter. So, if you have a header image, keep it fairly small in case it doesn’t load. And don’t hide any important text in that header. Your big message could get completely lost if it loads as alt text.

Ah, yes. Alt text. You need it. Your important headers should not be stuffed away in an image, but if you desperately need that Myriad font, at least make sure your alt text reflects your message.

Make sure your Call To Action can be heard

So the big drive in your email is your call to action – that’s something you definitely don’t want getting lost! It’s good practice to have it live above the fold. The less scrolling, the better. This becomes even better practice in an HTML email. Don’t make your readers sift through a bunch of text and graphics to get to the good stuff. After all, the Delete key is a very easy key to push.

Don’t let your call to action live on the right side of your email. Ever used Windows Live Mail? Or rather, ever used Windows Live Mail on a monitor with a small resolution? The right half of your email will be completely lost in an abyss. So if you’ve got a button you’re just dying for your readers to click, having it live on the right side of that email means some of your readers might never see it.

And speaking of buttons – if your call to action lives in an image, make sure you’ve got a text version in there somewhere as well. It doesn’t matter how fabulously freaky and clickable your button is if it’s a graphic that doesn’t load. So include a text version, which you can easily spice up with the font tag to make it stand out.

Building Emails Like It's 1999

Imagine the days of yore when CSS was new and tables were king. This is the world of html email architecture. Every client will read your code differently (and believe me, there are quite a number of email clients out there.) The best way to make sure your email is sturdy is to build emails like web pages were built back in our Grandparents' days.

• Want padding? Don’t bother with CSS. Use a table.
• Be sparse with your CSS use, and make sure it's inline.
• To spice up your text, use the <font> tag.
• Text with a background image? Good luck. Plan on the background image not being visible in many email clients.
• Have I mentioned that you should use Alt text?

And most importantly, test your email in as many clients as possible! A great resource for testing emails is http://getfractal.com. Or, pick a relative who's still using their old PC with Outlook 2000, and send them a test email. A thumbs up from them might just be gold.