Email development best practices

Consider the following suggestions when using HTML in your email:

  • Code all structures using the table element. For more complicated layouts, you should nest tables to build complex structures.
  • Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
  • Keep your CSS simple. Avoid the following coding styles:
    • Compound style declarations: font:#000 12px Arial, Helvetica, sans-serif;
    • Shorthand code: #000 instead of #000000
    • CSS layout properties: slot, position, clear, visibility, and so on
    • Complex selectors: descendant, child or sibling selectors, and pseudo-elements
  • Inline all CSS before finalizing emails or email templates.
  • Use only absolute links for images, and host these images on a reliable server.
  • Do not code with JavaScript or Flash; most email clients do not support these technologies.
  • Plan for mobile users, and make emails as responsive as possible:
    • Use media queries to increase text sizes on small screens
    • Provide thumb-sized hit areas for links, approximately 46 px by 46 px
  • Test often. Create email accounts across various services, and send emails to yourself to see the appearance of emails on various clients.