Gmail will now be supporting CSS media queries (googleappsdeveloper.blogspot.com)
over 6 years ago from Jason Rodriguez, Product Manager at Litmus
over 6 years ago from Jason Rodriguez, Product Manager at Litmus
I've waited so long. I almost stopped believing...
I don't think most people believed in the first place. Huge move from Gmail, not only opening up more traditional responsive design options, but will lead everyone away from using inline styles, too. Say hello to more compact, maintainable email code...
Knock, knock. Who’s there? 2012.
It was about time. Happy to see some movement, but there're still enough mail-clients far behind. Developing emails is such a pain.
As exciting as this should be, we'll still have to design for the worst case scenario – so in reality it makes little difference in the short term.
As mentioned by Jason, if it leads to everyone changing their standards then that would be amazing.
The worst case scenario now will be Outlook, which made a huge deal last month out of getting their shit together.
There are a bunch of smaller clients that will probably never change. But — as with web development — check your analytics and know specifically which clients you need to design for.
I'm not sure I agree with your last point — the worst case scenario is the client you need to design for. If 80% of our user base can see the email perfectly, but 20% can't, it's the 20% I need to design for.
If that number is 20%, sure. What if the number is 20? What if the number is .2%?
Depending on how many users are on obscure or outdated email clients or web browsers, many companies make the call to ignore them because it isn't worth the additional time cost.
As Dylan mentioned, the worst case scenario for most people is now Outlook. The two good things about Outlook are that 1) all of their bugs are essentially known issues with known fixes and 2) Microsoft is actively looking to improve Outlook, so hopefully those problems will eventually be fixed.
It will potentially make a big difference in the short term, since designers will be able to stop inlining styles if they want to, which will be a big productivity win. It will help clean up the code and reduce style duplication and make the creation and maintenance of emails much, much better.
Is there a list somewhere of which clients will still require inline styles? I would love to stop inlining styles as soon as possible.
Not that I can think of, but Gmail was always the main reason we had to inline styles. There may be a few, very small, third-party edge cases, but once Gmail makes the update, embedded styles will have near universal support.
Thanks, Jason! I'll make sure to do some research but this will make a huge difference in my development.
Finally! No more inlined styles is going to be so nice.
'Bout time!
Curious to see if this includes the Gmail app for Android and iOS. CSS support is coming for "Gmail and Inbox" but that's about all the info we have for now.
That's the real question. I wonder how many people use gmail.com/inbox on their mobile browser. If the mobile apps don't support this, it's not a huge improvement.
We'll see when it rolls out, but I suspect that the change is happening on their preprocessor/sanitizer that they use before emails even hit individual clients, so it should cover most of their email clients.
Exactly, as long as the styles aren't stripped, they should work fine within the iOS WebView. I assume that has rough parity with Mobile Safari.
Agreed. The .gif
in the announcement article looks like a native app, not sure exactly which one though.
I am not sure what this mean really? I know What CSS Media queries are, but what does mean that Gmail will use them. Not everyone uses gmail. Please someone expand on this.
Gmail (website and mobile app) has never supported CSS media queries in HTML emails (see: https://www.campaignmonitor.com/css/). This made it really difficult for responsive email designs to adapt in the Gmail mobile apps and was generally a very frustrating thing to deal with (as are most things in the HTML email world).
Thank god for that!
My main gripe with Gmail at the minute is that they support -webkit-linear-gradient, but not -webkit-background-clip or -webkit-text-fill-color, so while gradient text degrades gracefully everywhere else it's impossible with gmail. So strange that it supports just that webkit property and not the others.
Gmail and Inbox support background-clip.
https://developers.google.com/gmail/design/reference/supported_css
Thanks! Not the text-fill-color though unfortunately.
I think it's time.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now