Best Practices: Design
There are a few things to keep in mind when designing HTML email campaigns.
- Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.
- Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
- Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
- Don’t design an email that’s essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.
- Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
- Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.
- Don’t forget about the mobile experience! Is your email readable at arm’s length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?
Best Practices: Development
Much like with design, there are best practices to follow when coding HTML email.
- Code all structure 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 compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
- Inline all CSS before sending. (MailChimp will do this for you automatically.)
- Use only absolute links for images, and host those images on a reliable server. (MailChimp provides free image hosting.)
- Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
- Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
Comments