Email Design Tips

The Top Ten Things Both Marketers and Designers Need to Know

 

QUICK TIPS:

  • On-line inboxes will only show the contents of the body tag and all other code is ignored.
  • All Styling must be in-line, use style attributes in every tag and not classes referring to style tags or external sheets.
  • Very few inboxes will show background images, including Outlook 2007, so don’t use them.
  • CSS positioning is ignored or does not work in emails, subsequently the only efficient way to structure an email is using tables.
  • Some tags, like TDs, will inherit the styles of the parent or sister TDs and Tables if it is left un-styled.
  • Most inboxes will not show borders so you have to use more table cells or nested tables with background colors.
  • Table cell width and height are rendered inconsistently; it is popular to use transparent gifs to additionally control the width and/or height of a cell.
  • The most popular width of email content is 600 pixels.
  • In order to make images render consistently, style=”display:block” should be used in all image tags.

Content and Deliverability Tips:
In order to avoid the junk folder, here are a few basics to keep in mind:

Text to Image Ratio:

  • There must be more text on the page than images, about 60:40 text.
  • You need to have at least four images on the page and not all of them touching.
  • Spam filters will assume/pretend that all text is ʻmediumʼ /12px, and then count the characters to add them up. They will then compare that number to the total area of the page covered by images.
  • If your creative is image heavy, a good way to add more text is to fill up the bottom of the email with lots of small, yet still readable text - like privacy disclaimers, linking to part of the web-site and don’t forget the legally required company contact and registration details.

Pre-Headers:

Include a Pre-header above the banner in order to earn the trust from recipients and to help them see the full email if the images are blocked. This will include at least a link to view the email in a new browser window/tab. You could also include a teaser at the very top which would automatically double up as the snippet content for Gmail, Yahoo and other snippet using inboxes. (A snippet is when the inbox will take the top two lines of html content and put it in the inbox view next to or under the subject line.) Some people will also include an opt-out link and sharing options in the Pre-header.

Click Here:

You do not need to have links with 'click hereʼ anymore, as long as the word looks clickable - use a different color and an underline - the words could just describe what is at the end of the click through.

'Spammy' Words:

There are various spam keywords identified by filters, any ESP will use at least the Spam Assassin filter to check the content. Most key words come in pairs and revolve around credit, competition, free stuff and drugs. Your spam checker will alert you if you have inadvertently included any unfavorable combinations of words.

Outlook 2007 Formatting Tips
From Microsoft document “Windows Live Hotmail – Enhancing e-mail Deliverability” (2007)

Here are a few recommendations for improving Outlook rendering:

  • Do not use background images. Background images, whether specified in the <body>, <table>, or <td> tag, cannot be used because of inconsistencies among e-mail clients, most notably Outlook 2007.
  • Do not use CSS (cascading style sheets), inline styles or JavaScript. Cascading style sheets, where the styles are defined within the Web page itself, are only fully supported in most e-mail clients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such as AOL Webmail and Gmail, change or comment out style tags, resulting in unpredictable formatting. As a result, we recommend that you use only basic HTML tags. (For instance, to underline text, use the <u> tag, for bold use the <b> tag.)
  • Inline style attributes are your only option. Use only the most basic style attributes to designate font size, color, and type, and use them within basic HTML tags (do not use <div> or <span> tags). Do not use styles to set table or row heights or any spacing. Do not define your style elements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript is not supported in any e-mail client. Do not include any JavaScript, including on Click=”return(false);” in your HTML.
  • Set table width to 600 pixels max. The convention for HTML e-mail is to limit a set table width to 600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, users with older systems or who choose an 800 X 600 display setting will not be able see the entire width of the e-mail.
  • Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahoo and Hotmail) strip out the BODY tag within e-mails completely. You should not include any attributes in the BODY tag. To set values such as background color, use the BGCOLOR attribute inside the TABLE or TD tags.
  • Use HTML character names. Many email clients won’t display raw 8-bit characters correctly (they’ll show up as questions marks or squares instead). As a result, you must use HTML codes for these characters. Use only the HTML names, not the numeric values.
  • Put image maps inside <body> tags. When using image maps, the <MAP> and <AREA> tags should be between the open and close <BODY> tags with the rest of the content. The links will not work in certain Web e-mail clients that strip out everything above the <BODY> tag (such as Hotmail).