Like our blog? Try our product free for 7 days! Never send a bad email again.

Industry News

Gmail Announces Support for Embedded Styles and Media Queries

Email On Acid

Have you heard the good news?

Gmail has long been a thorn in the side of email developers everywhere. This client's lack of support for embedded CSS (in the <head> of an email) has been the main reason that all styles must be inlined before sending. This has led to the popularity of tools like our CSS Inliner and by extension to thousands of extra characters and untold code bloat, as well as increased complexity maintaining email code that's already been inlined.

No longer! Gmail is about to make a major update to how their email client handles code. Read on to find out what changes will be made and how it might affect your emails.

What changes will be made?

Justin Khoo and I took a look at the changes Gmail listed and what they're going to mean for email devs.

Gmail will support embedded styles

That's right! Gmail previously only supported embedded styles in its webmail version. Because they stripped all classes and IDs, though, this support didn't do a whole lot for email devs. We'll get into more detail as you read, but for now you can just bask in the joy of email developers worldwide.

Gmail will support classes and IDs

This is huge. This means that we can stop using inline styles for every single thing in email. You can use a class instead, and a single update to that class in the head will affect every instance of that style. Like real web development.

Gmail will support media queries

Combined with support for embedded styles and classes/IDs, this is fantastic news. This means that responsive emails (emails built with media queries that trigger at certain breakpoints) should now render properly in Gmail.

Previously, we had been huge fans of the hybrid fluid technique because it enabled developers to create emails that adapted to any screen size, regardless of media query support. So does the Gmail update mark the death-knell of hybrid fluid? Probably not quite yet. Hybrid fluid is still the only way to get responsive email in some mobile apps, and may work better in some international clients.

Gmail will support background-position and background-size

These properties can really add some flexibility to email designs. Unfortunately, Outlook.com only supports the table background attribute and not background CSS so the impact is muted. But it will be fun to experiment with responsive backgrounds in the Gmail app!

Animations, transitions and transforms won't be supported

Sadly, some of the techniques we've recently covered (like our two part CSS animations in email blog) won't work in Gmail. As far as I'm concerned, animations are just "gravy" for the user, and not a must-have like media queries and embedded styles. Hopefully Gmail will add support for these innocuous and fun techniques some time soon.

What we don’t yet know

Will Gmail still auto-resize your content?

Although the announcement did not mention it, we're hoping that Gmail does away with the annoying and troublesome resizing of font and content.

You can almost hear the collective sigh of relief from email devs everywhere. Now that media queries are usable, it’s most likely that you’ll no longer need to use the Gmail non-breaking space fix as pioneered by Justin Khoo. Instead, you can use the power of media queries to make your email adapt to mobile the way you really want it to!

Will attribute selectors be supported?

Attribute selectors are widely used in media queries due to the (now fixed) media query bug in Yahoo! Mail. If Gmail does not support attribute selectors, emails with attribute selectors will still not be responsive in Gmail.

Either way, if you're still using the old attribute selector hack for Yahoo! Mail (to prevent it from rendering your media queries on desktop), you should take those out! In March of 2015, Yahoo! Mail updated their client to handle media queries properly, so it's no longer needed.

Will Gmail still convert CSS height to min-height?

Unless this gets fixed along with what they have announced, it might cause problems for responsive images in mobile. This is because many emails are coded with height and width attributes and are then overridden in the CSS styles to make responsive. For example:

<img src="http://....png" width="600" height="200" style="display:block;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!

Will pseudo classes be supported?

Pseudo classes include things like :hover and :checked, and are widely used for interactive email. It would be a shame if Gmail supported embedded styles and lost support for interactive email.

What do these changes mean for you?

Mostly great things! You should now be (mostly) free to use responsive email templates.

Here are a few things you can may want to do as we prepare for the big update:

  • You can use media queries!
  • You can use embedded styles, including classes and IDs, to style your emails!
  • Follow our blog for the latest updates in Gmail. We'll write an in depth report once Gmail's changes are live!

Start testing today

Changes like these are what make it so hard to stay up-to-date on your email code. Start testing with Email on Acid today and make sure your emails look perfect in every inbox.

About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

The main thing I want to know, will this be an update that requires a new app, or will it be server-side?
humulos
humulos,
Most likely this will be pushed out as an update to the apps.
Geoff Phillips
Hi Geoff, this is really great news! I jumped right in and I started testing some responsive emails. While don't break anymore, they display the desktop layout instead of mobile responsive.

Looking at the Google page with the announcement it looks like they already released the update and the emails should display responsive. Judging by the wording they used it makes me think it's all rolled out.

Is it working for you guys?
Vic Dinovici
Do you know when the change is expected to go live? Thank you!
Miquel
Vic Dinovici and Miquel,
Despite the wording of the announcement, this change hasn't been made live yet. We expect it to go live within the next week or so, bit there's no way of knowing for sure.

When it does go live, we'll add an update to the blog to let you know.
Geoff Phillips
Sounds good Geoff, please keep us posted. Thanks.
Vic Dinovici
Does this include the App is the big question! It's all very well including them on the website, but that app is surely more prevalent on mobile phones.
SquareBalloonEoin

Leave a Comment