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/