Recently, I’ve found myself creating design, not for the web, but for HTML emails. It has been an experience reverting back to techniques used in the previous century, prior to the advent of CSS. I’ve also learned from mistakes made, and I’d like to share what I’ve learned with you.
Use a Email Management Service
Using one of the many services out there (i.e. ConstantContact, MailChimp, Lyris, etc.), you can send out effective and professionally designed HTML email communications without knowledge of HTML by using pre-established templates. These services also allow those marketers with the proper skills to create custom HTML emails. Most systems are designed to ensure the greatest compatibility with the greatest number of email clients. They also offer great reporting and metrics to provide information on open rate (for HTML emails only), clicked links, etc. Lastly, the systems handle all subscriber management tasks, such as subscribes, un-subscribes, etc.
Layout with Tables
After several years after migrating to using <divs> and CSS to layout web pages, it was awkward, but necessary to revert back to using tables for layout. This to ensure the greatest compatibility with the many email clients used. You should first use a “body” table at 100% width, especially if you plan to use a background color or image for email. This should be followed by a “container” table that will hold the content of your message. The width should be limited to around 600 pixels. You should think of your email message in terms of sections, with each section hosted within a table, with each table stacked on top of each other. A note on nested tables: you should limit the number of nested tables as much as possible. Some email clients have difficulties in rendering multiple levels of nested tables. In the example below, the green stacked tables are nested 2 levels down.
Use CSS Sparingly
Though some email clients can understand CSS instructions, you should limit CSS to simple text formatting. Also, CSS should be implemented in-line, not embedded (within the <head> tag) or from an external style sheet. In fact, at least one email system formats text using the <font> tag, and places in-line CSS as an attribute within the <font> tag. Example:
<font color=”#000000” face=”Verdana, Arial, Helvetica, sansserif” size=”4” style=”FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;FONT-SIZE: 14pt;COLOR: #000000;”>
Use Tables for Backgrounds Colors & Images
If your design includes background colors or images, consider using tables to implement. The <body> tag is frequently stripped on attributes by email clients. Also, make sure your design does not require (is only enhanced by) a background image. Many email clients do not support background images.
Place Your Key Message Prominently
Many people scan their inbox for messages to read or delete. Each email client handles HTML emails differently, even dependent on the platform. Email applications, such as Outlook, provide a preview pane that can be sized and laid out as the user sees fit. This can produce unwanted results, as the main message of your email is more than 200 pixels down the screen and not seen. To improve on this, place a textual statement that presents the key message of the email at the very top of the page. Example:
Using this method also benefits users of email services such as GMail, that display the first few textual characters of each email next to the subject:
Use Alt Text in Images to Repeat Your Message
Most designed think graphically. Therefore, many designers may be horrified when they discover that most email applications and systems have images turned off by default. You can still get your message out, but you’ll have to leverage the image’s “alt” attribute to repeat the message. This way, the message is isplayed in text and not lost. Example (compare with the screenshot above):
Target, Target, Target
Less of a design best practice, you must target your email communications to your audience. For instance, I have a client, a travel agency, who sends emails targeted to their audience based on destination. We wouldn’t send an email on Alaska cruise promotions to people who have communicated interest in Costa Rica. And constantly check your email metrics to make sure your communications are relevant. One sure sign of irrelevancy is an increase in opt-outs.
Test, Test, Test
Before sending out each and every email, you must test, both the HTML email and the text version. Test links, ensure that images appear, make sure the message appear effectively in the preview pane, the initial text in the subject line in Gmail and like web-based email systems. Send a test email to some friends who use different email clients and ask them to view/test.
Use a Web Analytics Tool to Track Conversions
If you’re using your email messages to drive conversions, you need a good way to see what happens from email through your website, to your conversion end state. That’s where a good web analytics program can help. For instance, with Google Analytics, you can tag the links in your email and be able to track conversions. (see this Google help doc for more information). This is vital to show the effectiveness of your email messages.
Lastly
Check out the best practices at Email Labs for more in depth HTML Email best practices.
1 Comment
June 11, 2008 at 12:07 pm
An update: I’m trying to get an initial email out. After some validation headaches, now I realize that I have to include the hyperlink text and an image references as attributes of the click tracking tag in Constant Contact. Argh!