/html-email-resources

A collection of developer resources for HTML email development

Primary LanguageHTML

HTML Email Developer Resources

Snippets

Tools

Guidelines

Responsive Images

  • Set a fixed width as an HTML attribute for Outlook
  • Set max-width and width to 100% inline
  • Set min-width to fixed px value inline

Background Images

  • Use the background attribute on td
  • Use bgcolor attribute to provide a fallback color
  • Add background inline style with fallback color and image url

Accessibility

  • Keep tables quiet using role="presentation"

Table Layouts

  • Ignore table headers, body, footer
  • Restricts components to table tr td
  • Place most styles on table cells (td)
  • Padding is more reliable than margin on table cells
  • Use the align property on table cells for horizontal alignment
  • Do not use exact percentages (e.g. 50%-50%) in Outlook, rather use something like 48%-48% (it cannot calculate precisely)

Responsive Layouts

  • Media query sets container width: 100%;
  • Media query sets tables that serve as columns to display block; with width: 100%;

Can I Use

Testing Services

Additional Resources