Guidelines for HTML email’s

This was provided to me by an agency that I was doing some work for, so I take no credit for it. It’s ridiculously thorough and I find myself referring back to it each time I build an email campaign for a client.

General Guidelines

  • Use tables for layout
  • Do not use rowspan in tables (see example below).
  • Do not use background images if your design is depends on the image (Note: Outlook 2007/2010 does not support background images)
  • Use absolute urls for links
  • Use target=”_blank” for all links
  • Use empty columns/rows for padding when possible; padding-top in a <TD> will affect the adjacent <TD>; sometimes padding-right will push out the design to the right
  • Use simple inline styles; styles in the head of a document will be removed by most webmail clients. Do not use external style sheets.
  • Do not define attributes in the body tag such as any margin or color settings. <BODY> is often stripped out by web mail clients.
  • Use inline styles to define text formatting (<td style=”font-family:arial…;font-size:12px;color:#000000;”>)
  • Links may be styled but may not render properly; use style=”text-decoration:underline” to ensure that links will be underlined
  • Use alt attribute for images
  • Use <BR> instead of <P>; <P> tags will render incorrectly in webmail clients as they are generally defined by the webmail’s style sheet.
  • Avoid using image maps
  • Do not use forms
  • Do not use JavaScript
  • Do not use DHTML
  • Do not use Flash
  • Do not use Streaming Video

Test your design in multiple email and webmail clients (Outlook 2007 and Hotmail and Gmail using IE7, Firefox, etc). Try to test using a deployment tool such as MailChimp
As mentioned above, rowspan in TD tags is not supported in all email clients. To get around this you must use nested tables. For example the table below would be rendered as follows:

Cell 1
Cell #2 Row 1
Cell #2 Row 2
[html]<table>
<tr>
<td> Cell #1</td>
<td>
<table>
<tr><td> Cell #2 – Row #1</td></tr>
<tr><td> Cell #2 – Row #2</td></tr>
</table>
</td>
</tr>
</table>[/html] The following HTML tags should not be used in your HTML email, because several webmail applications and email clients are removing or ignoring these tags.

  • DOCTYPE
  • Base tag <BASE>
  • Link tag <LINK>
  • Script tag <SCRIPT></SCRIPT>
  • Applet tag <APPLET></APPLET>
  • Frameset tag <FRAMESET></FRAMESET>
  • Frame tag <FRAME>
  • IFrame tag <IFRAME></IFRAME>
  • Div tag <div></div>
  • Span tag <span></span>

Considerations for images

Some webmail clients will add a transparent border to all images. This results in gaps showing between any adjacent images. To fix this, use style=”display:block;” for all images that are in separate table cells. If the image is positioned beside any other element and they are not in separate table cells, such as another image or text, then use style=”display:inline;” to avoid the images wrapping to the next line.

Outlook 2007 HTML Rendering Issues

Microsoft Office Outlook 2007 uses the HTML parsing and rendering engine from Microsoft Office Word 2007 to display HTML message bodies.

Yes, you read that correctly. Word is used to render HTML emails in Outlook 2007.

Here are a few highlights of the limitations:

  • no support for background images (HTML or CSS)
  • no support for forms
  • no support for Flash, or other plugins
  • no support for CSS floats
  • no support for replacing bullets with images in unordered lists
  • no support for CSS positioning

Plain-Text Email Design Checklist

  • Use a simple plain-text program. Microsoft Word will NOT work.
  • Restrict each line to 65 characters offers the greatest protection from jagged formatting problems
  • Bullet points are key. Plain-text emails are harder to read, so break it into chunks that are easier to skim and scan. Use little characters like (*) to make bullet points, and use ====== as line separators.
  • In plain-text emails, you can’t code hyperlinks like “Click here to hyperlink” You just enter a URL like: http://www.hyperlink.com/tryit.phtml and the user will see it.
  • The following characters are absolutely safe to use in your plain-text emails:
  • a b c d e f g h i j k l m n o p q r s t u v w x y z
  • A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
  • 0 1 2 3 4 5 6 7 8 9
  • ” % & ‘ ( ) * + , – . / : ; < = > ? _
  • The solution is to justify your text so that it still looks passable in other fonts. Be particularly careful when centering or right-justifying text using the space bar.