A Designer’s Life

by Deborah Gray Smith Graphic and Web Design

HTML Email Design Giving You Headaches?

September8

emailI can help. I’ve designed hundreds of email campaigns for both large and small businesses and learned the frustrating ins and outs of the process as a result.

First, you have to be willing to let go of all the wonderful standards-based design you’ve learned over the last few years. We’re leaving the world of CSS layouts and the separation of structure and presentation for the old world of tables. Unfortunately, CSS support in email clients varies a great deal, so tables are necessary for the email structure. Here’s the good news: there is a baseline of safe CSS supported by most of the email clients. However, these styles need to be placed as inline styles or included right after the body tag in your email—the safest choice is inline—due to the fact that many online clients strip out the head tags. No important information, especially CSS, should be included in the head of your document. Additionally, avoid using floats and background images if you want it to look good in all of the online email clients. Check out Campaign Monitor’s Guide to CSS Support in Email.

Keep the preview pane in mind when you design. I use a width of 600px for most of the emails I create. You’ll want to make sure the important information is in your text, not embedded in images – many people will have images turned off, at least initially. Because of this, be sure to include alt tags on all of your images. Images need to be linked via absolute URLs to a storage spot on the server for obvious reasons. Keep the email short and to the point – most people scan email; they don’t want to read article-length text. Use teaser links to take the reader to your website.

You’ll also need to watch out for things that trigger spam filters, like red text, use of all caps, and exclamation marks in your subject line. Here’s a good article about spam triggers.

Test your email in multiple clients – I have several accounts set up for testing purposes. Also, test in the popular desktop email programs like Outlook, Thunderbird and Windows Mail. Be sure to include a link to your HTML file stored on your server for those who have trouble viewing the email.

Lastly, Outlook is not for sending email. I can’t stress that enough. To send your emails, use a database program like Listrak or sign up for an account at Constant Contact, Vertical Response or Mailchimp (just to name a few) – all will allow you to paste in your own code to create a custom email. They also ensure that you’re meeting CAN-SPAM guidelines, and they provide excellent tracking feedback.

I’ve just provided a general overview here. For more information, here’s a great online guide to designing HTML email:

http://www.sitepoint.com/article/code-html-email-newsletters/

If you find all of this frustrating, as I do, and want to get involved in improving HTML email standards, visit the Email Standards Project.