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 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/