Responsive Email Support in Gmail Is Coming
We recently announced that we had worked on a fix for the lack of support for responsive design in email clients with the most prolific being Gmail. This lack of support by Gmail has long been the bane of our existence and many have shared their woes over the years.
When we asked some of email marketing’s most influential players to make predictions about what this year had in store, Alex Williams predicted Gmail would fix its biggest flaw.
That day is finally here.
In a brief post on the Google Apps developer blog today it was announced that support for responsive email is coming to their email clients by the end of September.
Later this month, you’ll be able to use CSS media queries with Gmail to ensure that your message is formatted the way you intended, whether it’s viewed on a computer, a phone in portrait mode, or a tablet in landscape mode. You’ll be able to change styles based on width, rotation, and resolution, allowing for more responsive formatting to optimize your email for every device.
While the announcement focuses on responsive email support, which is huge news, this update actually goes far beyond that. Let’s break it down and look at what’s about to change for those that code emails.
The end of inline CSS?
The update actually includes a number of similar but distinct email clients: Google’s three webmail clients Gmail, Inbox, and Google Apps, Gmail on iOS and Android, and Inbox on iOS and Android.
Lack of stylesheet support across all of these email clients (with a minor exception) has had us grimacing for years, and is the main reason why HTML email still relies so heavily on inline CSS. That’s all about to change with this update, which means inline CSS in email will largely be a thing of the past.
What this means is that not only can you drastically reduce the file size of your emails. Eliminating the inlining step from your workflow will also shorten the path to a finished email.
Support for media queries
Along with the stylesheet support comes support for media queries – one of the cornerstones of responsive design. This lets you apply different CSS based on the email client width and height among other things. It’s almost 2 years since Google confirmed that responsive email support was on their roadmap, and we’re stoked to see them finally reach this destination.
Meanwhile, Google’s lack of media query support has resulted in a number of hacks, including the hybrid fluid method and mobile-first emails. While we expect these techniques to continue to work nicely in Google’s updated email clients, it should be possible to clean these hacks up considerably once the new client versions are fully rolled out.
Google will also be supporting other media query features like orientation, letting you optimize the landscape and portrait views of your email, and min-resolution, which is handy for applying retina assets.
Documentation of CSS support
Another big change for email developers is that Google now documents their CSS support in an online reference. This type of documentation is incredibly rare in the email client world, where we’ve resorted to tracking CSS support in email client ourselves instead.
Their reference also indicates support for a number of properties Gmail has previously ignored, so we’re excited to try this out in practice and see which possibilities open up.
What about interactive email?
Something that’s not specifically addressed in their reference is whether the <style> support will also include support for :checked selectors. These selectors are commonly used for various interactive email techniques, so it’ll be interesting to see whether Google’s support for interactive email will improve.
Wrap up
Now that Gmail promises to make it easier to design emails that will look great across all their clients, more time will be available to focus on the many other aspects of email marketing. An update to this post is available.
