Fabio Carneiro: Hard-Won Lessons in Responsive Email Design
Fabio Carneiro (@flcarneiro) was speaking at Smashing Conference about HTML emails, these are my notes from his talk.
Email is a horrible thing to deal with. It's still a dark art compared to traditional web design, there's no parity of rendering engines. 65% of Mailchimp emails were responsive and done by people with no knowledge of responsive emails thanks to templates.
What is the big deal with making emails responsive? There are dozens of email clients, some of them don't support margins, <p> can be tricky.
Design within constraints
CSS support is mostly 2, barely any 3. It's only now that the W3C is starting to talk about a standard for email. Have very hard and fast limitations but you can do anything just to make it work! Gmail is one of the worst mail clients available - forces styles to be inline. Outlook uses Word for its HTML rendering engine, it's worse than IE6!
Design for people
An email needs to be usable with one eyeball, one thumb and at arms reach. You should be able to tell immediately what it's for without stopping. You should be able to use one hand to do what the email wants you to do. You should be able to read it comfortably without bringing it up to your nose.
Design with purpose
With websites people come to you, with email you come to people.
- Buy me! Concise copy and simple CTAs.
- Join me! Event notices or invites to an action, concise copy and bold CTAs.
- Read me! Well written copy and clear typography.
- Transactional email. Convey a small amount of specific data. Focused, comprehensive, appropriate, practical, spartan.
Sticking to these categories help keep your design focused. Email is not a website, it's the most common reason for failure - why does an email need navigation? Why force people to leave your email? Don't distract people from what you want them to do. Take advantage of the intimate knowledge you have of people - you have people's names!
Long form email can work, even on mobile. You have to know your audience though. Frequency of emails can combat email fatigue - keep the space between emails appropriate. You should make email a seamless part of your web experience.
Building responsive email
Modular pattern email - break it down into smaller bits. Keeps focus on components rather than grand designs. Spongy, not fully fluid. Sketch out common design patterns: calendars, image with caption, buttons &c. Email is assembled from these blocks. As each block is isolated you just need to change the outer container and it is responsive.
Mobile first isn't really mobile first with email. Support for MQs is odd. Layout is table based and CSS takes advantage of the cascade by defining things in multiple ways. Conditional comments are used to deal with Outlook.
With tables you can't use floats and positioning as you are using tables. Can use the align attribute for tables. Problem is that it's very unstable, the Gmail app on iOS and Android is bad.
Email is ultra dense and stupidly complicated. MailChimp have a reference sheet for how to build a responsive email. Zurb has a responsive email package called Ink. Litmus community, from an email analytics firm - they have good numbers for email client market share. Mobile has risen ~140% in the last 12 months(?)
Webfonts are supported on a few clients.
Broken looking emails get deleted without even being read at a high percentage.
It is necessary to use attribute selectors in CSS it forces Yahoo to ignore the media query and render the email as you want it.
Each image you place in the email should be 100% width and have the height and width attributes. Also set a max-width for clients that support it.
Testing: read the email in lots of clients. Litmus have emulators you can use.