Listed below are the best practices, which include:
- Code all the 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 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.
- Use only absolute links for images and host those images on a reliable server.
- 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.
- Test, test, test. Create email accounts across various services and send emails to yourself.
- 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.
- Always declare the document type as the first line in your document.
- Use Lowercase Element Names.
- Close All HTML Elements.
- Use Lowercase Attribute Names.
- Always Quote Attribute Values.
- Avoid Long Code Lines.
- Never Skip the <title> Element.
- You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
- Set widths in each cell rather than on the table.
- Whitespace in HTML files should be ignored.