Good HTML Email Design

Tips for good design when using HTML to create your messages.

Many marketers overlook the effect that design can have on the deliverability of an email message. In light of the increasing use of preview panes, filters, and the default blocking of images in popular email clients such as Gmail and AOL, here are three primary design best practices that will help you successfully reach your target audience.

Code Carefully

Use efficient HTML code and avoid designing your email with any programs that allow you to "Save for the Web." Here are a few guidelines for good HTML email message design:

  • Properly close HTML tags. Poorly formed HTML often results in email messages being rendered in surprising and undesirable ways. Most mail clients are smart enough to know that if you don't close a paragraph tag, then you probably made a mistake and it will add one in for you. However, other things, like table tags, are pretty tricky. In this case, the email client might guess correctly or it might not; it might not even try to fix it. Your email message could look fine, or it could be mangled completely. It's a lot like leaving the punctuation out of an entire paragraph; people can guess what you meant to say, but they might guess wrong.
    Note: HTML5 does not allow nested <p> tags inside of <span> tags.
  • Be mindful of CSS (Cascading Style Sheets). Don't link to external style sheets. Use inline styles tied to individual HTML tags since they display more reliably. Also, don't embed CSS in the head tags. Many email clients strip those tags from email. If you do use CSS, be sure to test extensively. Some email clients strip it out completely or mangle it. Some web-based mail clients combine your CSS with their own, breaking down the look of their application as well as the look of your email message.
    Tip: A really good way to test how your email messages will look in a variety of different inboxes is to make use of the Previewer app. For information see Previewer.
  • Use an HTML validator. HTML validators make sure your message uses properly formed HTML. Professional web design packages and browser add-ons, such as HTML Tidy, often include this feature.
  • Keep a balance between text and images. Filters are on the lookout for email messages with only images. If you embed your text and graphics into a single image, you risk your message going straight to the contact's Junk box.
  • Include an alternative text version of your message. In addition to being another criteria for some filters, the text version of the message ensures readability by email clients that are not receptive to HTML messages.
    Tip: For more information on the text version of email messages, see View A Text Version Of An Email.

Design Simply

There are many different types of email clients and the way in which they display email messages can vary wildly. For the best, most reliable results, keep your email message and HTML code as clean and simple as possible. Here are some more specific guidelines:

  • Design your newsletters top-to-bottom and don't overuse tables. Using multiple columns or nested tables can be very unstable. In fact, two columns can turn into a straight vertical line in some email clients. In most cases, it isn't worth the risk of your HTML "blowing up" due to excessive table tags. Tables also typically add a significant amount of extra bulk and extraneous HTML to your email message.
  • Avoid Flash. Embedded Flash does not work consistently in most email clients other than Mac Mail (only because it uses QuickTime, not Flash, to play). Relevant, concise copy, a compelling call to action, and clean simple design will create more reliable and consistent impact than a risky "flash in the pan" mailing. If you do want to include Flash or other audio/video elements, it is most effective to include them on the adjoining webform, rather than embedding in the email message.
  • Avoid JavaScript. JavaScript is disabled in most clients as a security precaution. Leave JavaScript out altogether, rather than risk having your audience see a JavaScript warning when trying to read your email message.
  • Use absolute links versus relative ones. Relative links open up the risk of all links and images being broken in the email because the mail client won't know where to go to get them. It's like giving the mailman your house number and street but no city or state. If you code a link to go to, it has all the info that it needs to get to where you want it to go. However, if you just code the link as /stats/, then it's not complete and things will break.
  • Don't link to images used elsewhere on your website. Your web designer may replace, rename, or delete these images and inadvertently cause your images not to be displayed in your email. By hosting your images in the application (or at the very least, separate from your other website images), you will avoid problems with broken links showing up in your email and probably speed up the display of these images.
    Tip: For more information on hosting images in the application, see Uploading Files to Bronto.

Test, Re-Test, and Test Again

If you don't have a distribution list for testing, stop what you are doing and immediately set up one! Never rely solely on your internal email client and standard browsers for testing. You should conduct tests for the major ISPs (AOL, Gmail, Yahoo, Hotmail, etc.) as well as other email providers that make up a large proportion of your email lists. Also, test the readability of messages in different browsers (Internet Explorer, Firefox, Safari) to verify that your text and images translate successfully in each. Make a checklist for yourself of critical items that you will test across multiple ISPs and browsers. For example:

  • Cascading Style Sheets are not altered or mangled.
  • HTML images are not blocked or there is a proper placeholder for the image if it doesn't appear.
  • Images are hosted with your ESP and not linked from elsewhere on your website.
  • An alternative 'text version of this email' label is displayed.
  • If the email client strips out your text and changes the background color, you can still read your message.
  • If used, columns and tables are unaltered.
  • URL links function properly.
Tip: You can send test messages in the application before actually scheduling your real deliveries. For information on sending test messages, see Message Testing Program.
Tip: Before you actually send your message, it's a good idea to run through our sending checklist to make sure everything is in order. To view the sending checklist, see Email Checklist: Before You Send.