Responsive email design

The lessons I’ve learned for designing emails that look good on every device

  • Campaign Monitor explains a lot of these ideas that I’ve discovered through my own email projects:
  • Outlook respects widths only for table, tr, and td elements.
  • Outlook handles padding only for td elements.
  • You can add css targeted to Outlook using this block: <!–[if mso]><style>…</style><![endif]–>
  • You can insert a <link> element to get custom Google Fonts; just be sure that you use an mso block to specify a fallback font for Outlook; otherwise it will fall back to Times New Roman.
  • You can shrink content widths and images for iPhone Mail using media queries.
  • Always use 6-character hex values for colors (not 3 characters).
  • Lotus notes and Blackberry are lost causes.
  • You’ll have to deal with a sub-optimal experience for Gmail for Android. It suffers from most of the limitations of web-based Gmail.
  • Use Litmus.com for testing emails!
  • It is complex but possible to send multi-column emails using <table align”…”>.
  • Always provide a sensible plain-text mime part; Outlook and others use this plain text to construct the first-line preview. If not, you’ll see <doctype html><head>…

Read the guide at campaignmonitor.com

Other helpful resources:

http://templates.mailchimp.com/development/css/client-specific-styles/ http://templates.mailchimp.com/development/css/reset-styles/ http://templates.mailchimp.com/development/css/outlook-conditional-css/