Designing Effective HTML Email

Designing effective email How effective is your email marketing? No, that's not a rhetorical question. Take a moment and answer these questions. Trust me: you'll thank me in a minute:

How many leads did your email marketing generate last quarter? Compared to last year?
How many sales did your email marketing generate last quarter? Compared to last year?
How many new subscribers did you acquire last quarter? And -- more importantly -- how many did you lose?

If these numbers are lower than you'd like, it's probably time to re-evaluate your email strategy. Are you sending emails on the right days and times? Are your headlines and copy compelling and actionable? Are users opening your emails? Or are they deleting them -- or (gasp) hitting the SPAM button?

These are all important questions to ask, and they represent the "low hanging" fruit of email marketing. It's relatively easy to change a subject line or reschedule a mailing.

It's much harder --but equally important -- to get your email design right. And it's a sad truth that designing great HTML emails is 10 times harder than designing regular web pages. Unlike the web, with its relatively small number of browsers and quirks, HTML emails get rendered in all sorts of odd places. Gone is Firefox and Internet Explorer, and enter Outlook, Outlook Express, Mac Mail, Gmail, HotMail, Yahoo Mail, and the dreaded AOL Mail. And you thought the browser wars were tough!

So, what's an online marketer to do? Here are some tips to help you make the most of the email opportunity:

Stand on the shoulders of giants.

Unless you have lots of experience designing, implementing and delivering HTML emails, we highly recommend starting with an existing template, and modifying it as needed. MailChimp.com offers four free templates to bootstrap your project. Campaign Monitor goes even further and gives away 30 free templates in a variety of layouts. They also offer an excellent gallery of real-life templates. This is a great source of inspiration, and by viewing the source on these templates, an invaluable source of technical know-how. Of course, please respect copyright!

Understand what works. And what doesn't.

Free templates are just a starting point. You'll want to make them your own. To that end it helps to have a bit of knowledge under your belt. EmailLab's 20 HTML Email Tips and SitePoint's How to Code HTML Newsletters are worth reviewing. Some particular tips 5Q would reiterate include:

Use HTML tables for layouts, and use inline CSS styles.. Gmail and Outlook in particular doesn't always play well with CSS.
Don't look like Spam. The only thing worse than being spam is looking like spam. Use SpamCheck to see if your emails are getting picked up as spam. It's not bullet proof, but it's worth your time. Email Check by Active Campaign is another good service. And some email services have spam-checking built right in. [Shameless Plug] 5Q's SimplyConnect tool includes an email checker in our Advanced package. Let us know if you want to see a demo.
Code by hand. Don't send boys like Dreamweaver where men should tread. It's much easier to create and test great HTML by hand. And you won't have code bloat!
Narrow is your friend.. Emails are typically rendered in narrow windows -- usually much more narrow than web browsers. Try to keep your design around 500 pixels wide -- or less.

Test, test, test, test, test, test. Then do it again.

Testing is vital to designing successful HTML emails. We recommend testing in at least Microsoft Outlook, Mail Mac, Gmail, Hotmail, AOL Mail, and Yahoo. Yahoo and Hotmail tend to do a good job, while Outlook and Gmail are harder to get right. Mac Mail, which uses the same HTML engine as the Safari browser, is the easiest to design for. Campaign Monitor has another great article with tips on testing emails.

Don't forget to bring the design!

With all the constraints and pitfalls of HTML design, you may feel tempted to compromise your design standards and deliver a below-par product. Fight this temptation. Internet users are getting more and more email every day, and a great design will help you stand out from the crowd. Sure, there are constraints, but don't let them keep you from hitting one out of the design ball park.

---

Follow these tips and you'll be creating great HTML emails in no time -- and seeing the results.

Of course, these are just some of our favorite tips. We'd love to hear from you! What has worked --and what hasn't worked -- in your HTML email campaigns? What is the #1 piece of advice you'd give to an email marketing newbie?

Designing Effective HTML Email