If you’e ever dealt with trying to make complex emails look good on every email client, you’ll know how big of a deal this is.
Big news email designers: Gmail announces that they will support responsive email design, as well as improved font styling and CSS for accessibility.
Read more at Litmus
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/
The next generation of responsive emails: make the text version easy to read on Apple Watches
From the article: “When Apple Watch detects remote or linked images in an email, the plain text version will be displayed–but only after a lengthy warning: “This message contains elements Apple Watch can’t display. You can read a text version below.” This message is reminiscent of the warning that Outlook displays before ALT text on images and takes up a full screen of Watch real estate before displaying the plain text part of the message.”
Read more from the source: litmus.com