Email development best practices
When developing HTML emails, follow these recommendations to improve compatibility, readability, and responsiveness. Following these guidelines helps ensure your emails look consistent, function correctly, and are easily accessible on various platforms
- Structure your email layout using
<table>
elements, nesting tables as needed for more complex layouts. Tables help ensure consistent rendering across different email clients. - Set table dimensions and layout using element attributes (for example: cellpadding, valign, width) to enforce a reliable box-model structure.
- Avoid complex code 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
- Compound style declarations:
- Inline all CSS styles to enhance compatibility, as many email clients strip out embedded CSS.
- Use only absolute URLs for images and host them on a reliable server to avoid broken images.
- Do not code with JavaScript or Flash. Most email clients do not support these technologies.
- Optimize for mobile users:
- Make emails responsive using media queries to adjust font sizes and layout for smaller screens.
- Ensure clickable elements are at least 46x46 pixels for easy tapping on touchscreens.
- Test email design by sending it to various email accounts to check compatibility across different services and devices.