Responsive Web Design, Part 2 (2015)
Responsive Email Design
Mobile clients have taken a huge chunk of the email client market in the last three years, and now account for over half of all email opens worldwide. That shouldn’t be terribly surprising; both email and mobile phones (and, to a lesser extent, tablets) are very personal, vital parts of modern life. Our devices are always with us, and, by extension, so is email. A mobile-centric web ecosystem isn’t the future; really, it’s the now. But that doesn’t mean email on mobile doesn’t suffer any of the problems of the past.
Gmail on Android and iOS is a prime example. Both mobile versions of the client share a host of problems with their webmail counterpart.
That means you’ll run into the same issues raised by Gmail’s lack of support for non-inlined CSS. This includes Gmail’s nonexistent media query support, which means that true responsive email isn’t possible in Gmail on mobile devices. Google’s new Inbox app is exactly the same, sadly.
If Gmail represents the bad end of the mobile client spectrum, then iOS Mail is undoubtedly on the good end.
Much like its desktop Mac OS X-based cousin, iOS’s version of Mail is almost entirely without fault. CSS3, media queries, web fonts — support for all of it’s there. It has the rendering engine that lesser apps aspire to have.
If you’re not a big fan of either Gmail or iOS Mail, there’s a great third option. The Outlook.com app, which is available on Android or iOS is fantastic.
Email rendering is just about perfect, with robust support for CSS3, media queries, web fonts, and just about anything else you want to throw at it.