Gmail Update: Support for Embedded Styles and Media Queries has Arrived!
It's finally here! It's like Christmas in September for email developers!
Gmail has just released a bevy of important updates to their email client, bringing it into the 21st century and enabling email developers everywhere to leave behind old tools and techniques. Earlier, we provided some analysis on the Gmail announcement. This blog details what we've found out now that the changes are live.
We've so far been able to confirm that Gmail and Inbox Webmail have received the updates, as well as the Android apps for Gmail and Inbox. The iOS apps for Gmail and Inbox have not yet gotten these updates, nor has Google Apps for Business (also known as G Suite).
What we already knew
Gmail now supports embedded styles, classes, IDs and media queries
Together, these updates unlock the full power of responsive design for all users of the Gmail app. If Media Queries had been enabled with no support for Classes and IDs, email devs would have been left jumping through a lot of hoops to make their emails properly responsive. By including all of these updates in one bundle, Gmail has really taken their email client to the next level. You can read more about these changes in our earlier post on the Gmail update.
For now, these changes only affect Gmail webmail and the Android Gmail and Inbox apps, but we expect them to be rolled out to iOS soon. The only place that we haven't seen these changes would be with Gmail Android App for Non-Gmail Accounts (GANGA), usually with POP/IMAP. That is, somebody using the Android Gmail app to connect to an account that's not a Gmail account, such as Yahoo! or Outlook.com. This is a pity as we'll still need to inline our CSS until Gmail rolls out the changes for this configuration. GANGA accounts may get to benefit from these new updates soon, so we'll update this blog if anything changes.
Animations, transitions and transforms aren't supported
These enhancements can be a great way to increase engagement and create dynamic email, so we were sad to see that support wasn't included in the update.
What we discovered
We did some sleuthing in the Gmailweb app and these are some of the changes that were not mentioned in the original announcement.
Gmail no longer auto-resizes content
Yes, we've confirmed that Gmail has gotten rid of this irritating "feature" on its Android apps, and it will probably be rolled out for iOS soon. You can then abandon the Gmail non-breaking space fix. With media queries are enabled, email devs have the power to control the appearance of their emails on mobile and no longer need Gmail's "automatic" resizing.
Attribute selectors are not supported
While these can be useful for a number of email techniques, they aren't required for responsive emails. Just make sure you aren't still using the outdated attribute selector hack for Yahoo! Mail. Now that Yahoo! Mail correctly supports media queries, it isn't needed any more.
Gmail no longer converts CSS height to min-height
This was an existing issue, but wasn't too much of a problem when the client was non-responsive. Many emails are coded with height and width attributes on images that are then overridden in the CSS styles to make them responsive. For example:
<img src="https://....png" width="600" height="200" style="width:100%;height:auto;">When height:auto is converted to min-height:auto, it no longer overrides the height attribute and results in a variable width but fixed height image in mobile. That can look really bad!
Luckily, this has been fixed the height style is no longer converted to min-height, helping to make sure images will look good on mobile without extra workarounds.
Pseudo classes mostly aren't supported
Pseudo classes include things like :hover and :checked. This means that Gmail isn't going to have much support for interactive email in the near future. However, the good news is that most non-interactive email templates don't make use of these classes. The one exception here is that :hover appears to be supported in Gmail webmail only. That will be a welcome addition for those devs who like to have pretty buttons!
Gmail removes all CSS in <style> block if it exceeds 8192 characters or if it contains errors or nested @ declarations.
If there is even a slight error in your CSS or the total CSS code in the <style> block exceeds 8192 characters, Gmail removes the entire block. So if you find that your embedded styles are not working make sure to check that its free of typos or that it is not too long.
Rémi Parmentier discovered that Gmail will strip the <style> block if it encounters an @ declaration within an @ declaration. This means Gmail will remove all your CSS in a style block if you have @font-face or @import within a media query (@media) block. If you need to nest @ declarations, put it within a separate <style> block so it won't affect the rest of your styles in Gmail.
Image blocking breaks class and ID styles
This one is a big problem, but will probably be resolved soon. If a user has image blocking enabled (not the default option), when they download images it will break all class and ID-based styles in the email. This is because of the Gmail prefix being applied to all classes and IDs inline, but not in the embedded styles. When the switch to display images is hit, the classes and IDs inline will no longer match the classes and IDs in embedded styles. Because image blocking is not the default option for Gmail users, hopefully this won't affect too many people. The solution? Keep inlining for now. Thanks to Mark Robbins for pointing this out.
You can write CSS that targets Gmail
Thanks again to Mark Robbins there is a technique you can use if you want to target your CSS just for Gmail. Its quite a hack but you can see the technique in this article.
It's all happening
Gmail is listening to the email community and making huge improvements. This, combined with the recent Microsoft announcement, shows that big things are in store for email!
I really respect the fact that Gmail got in there and started making improvements so quickly, and I look forward to seeing the changes that Microsoft will bring about with their new feedback feature. 2017 could be a huge year for email, if this is any indication.
All hail the return of responsive!
The debate around "Is Fluid Hybrid dead?" is raging amongst email devs even as we speak. My take on this is that (if you're not worried about GANGA accounts) you can safely switch back to responsive design and abandon hybrid fluid now that Gmail has made this change. While it might look better on a few regional clients, it's just as likely to look bad on some! Responsive code is a lot cleaner and lighter than fluid hybrid, so I'm excited to do away with conditional tables. Hopefully GANGA accounts will get these updates soon, and then we'll really be free to go responsive.
Need a new responsive template? We have tons in our Resources section, free to download! Just sign up for our Community and start perusing free templates.
What are your thoughts on the Gmail update? Is fluid hybrid dead? Let us know in the comments below!
