HTML Email Coding Tips
Essential coding techniques for creating email templates that render consistently across email clients from Outlook to Gmail to mobile apps.
The Unique Challenge of Email HTML
HTML email coding is fundamentally different from web development. Email clients vary wildly in their rendering engines and CSS support. Outlook uses Microsoft Word's engine. Gmail strips many CSS properties. Mobile clients have their own quirks. Success requires understanding these limitations and coding defensively.
Table-Based Layout
Despite modern CSS capabilities, tables remain the most reliable way to structure email layouts. Use nested tables for complex layouts, and add role="presentation" to prevent screen readers from announcing layout tables as data tables.
Table Best Practices
- Set cellpadding="0" and cellspacing="0" explicitly
- Use border="0" to remove default table borders
- Specify width on tables, not just cells
- Nest tables for complex multi-column layouts
- Use align and valign attributes for positioning
CSS in Email
Inline Critical Styles
Many email clients strip styles from the head section. Inline your most important CSS directly on elements. Use tools to automate this process while keeping your source code maintainable.
Supported CSS Properties
Widely supported: color, background-color, font-family, font-size, font-weight, line-height, text-align, padding, border, width, height.
Limited support: margin (use padding instead), float, position, flexbox, grid, max-width (inconsistent).
Outlook-Specific Fixes
Microsoft Outlook requires special attention due to its Word-based rendering engine.
Conditional Comments
Use conditional comments to serve Outlook-specific code when needed. This allows workarounds without affecting other clients.
Common Outlook Issues
- Images need explicit dimensions or Outlook may resize them
- Line-height requires mso-line-height-rule: exactly
- Buttons work best using VML or table-based approaches
- Background images require VML fallbacks
Image Handling
- Always specify width and height attributes
- Use display: block to remove gaps below images
- Add border="0" for linked images
- Use absolute URLs for images
- Keep file sizes small for faster loading
Skip the Complexity
HTML email coding requires significant expertise and ongoing maintenance as email clients evolve. Sequenzy generates cross-client compatible code automatically, handling all these technical details so you can focus on your message.