Gmail Update

Gmail Update: Support for Embedded Styles and Media Queries has Arrived!

22

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!

Author: Kyle Lapaglia

Author: Kyle Lapaglia

22 thoughts on “Gmail Update: Support for Embedded Styles and Media Queries has Arrived!”

  1. What I’m seeing right now is that if you’re using an @gmail.com address, it’s working, but if you have a Google Apps, um, excuse me, G Suite account, it doesn’t.

    On my tablet, I’ve got my personal G Suite account, my work G Suite account, and my OG Gmail address.

    I sent the same message to all three accounts, using the demo code that Google provided, and only the Gmail account displayed correctly.

    I’d guess that this will roll out eventually to the other G Suite accounts, but it’s disappointing to know that there still isn’t a definitive solution go the Gmail App problem.

  2. This is indeed very good news. However, the Email on Acid Tests for Gmail aren’t reflecting this.

    My bad because my latest template did not use the Gmail first hack, (thinking that those days were over). Please advise.

  3. The gmail android app does not appear to be supporting anything …it strips all embedded styles still. Inbox app, and Android 6 both have them though…I’m using a gmail address and I’m in the US using a samsung galaxy 7 edge to test.

  4. I am testing, but seeing no change in display. Fonts are still resized and media queries are not being read. Has anyone actually seen that they are working?

  5. Hi. I’ve been testing and resending and resending and retesting and now have fully a responsive (desktop to mobile switching using show/hide and resize method) template that works in Gmail App (Android) and responds exactly the same as the native mail app. I did see some weird stuff on the way and at first wasn’t sure the Gmail App had updated. There are bound to be loads of posts shortly showing templates/boilerplates which work across the board and I will share mine when I get the chance.

  6. We’ve been waiting in anticipation of this update, however the Gmail app still doesn’t accept the media queries. All the members of my team have updated their phones to the latest version of the Gmail app for Android, but still nothing. Is there anything new that needs to be included in the CSS in order for it to be accepted? Thanks 🙂

  7. I’ve tried three times, sending to my gmail account, using a google font on one line, with the style in the <head> the link to google font, and the inline style. It never worked. Can someone tell me how to do it, so it works ?

  8. My Gmail app (Android) won’t show the media query functionality at all. Will this change be rolled out little by little throughout the world? For what it’s worth, the email account I have in the mentioned Gmail app if from Gmail.

  9. Karl,
    Nothing needs to be included in the CSS. You may need to restart your phone to see these updates. So far only Android Gmail and Inbox have gotten the updates, and not iOS.

    Benveniste,
    Unfortunately Google fonts still aren’t supported in any version of Gmail.

    Manuel,
    You may need to restart your phone to see these updates. We can’t say for sure if the release is being staggered throughout the world, but as far as we have seen it has been released for all Android devices.

  10. I’m still not seeing this for my personal account, web or Gmail app.

    For the record, this is my test code, which I took directly from Google:


    <html>
    <head>
    <style>
    .colored {
    color: blue;
    }
    #body {
    font-size: 14px;
    }
    @media screen and (min-width: 1500px) {
    .colored {
    color:red;
    }
    }
    </style>
    </head>
    <body>

    Hi Pierce,

    This text is blue if the window width is
    below 1500px and red otherwise.

    Jerry

    </body>
    </html>

    When I send that to me@gmail.com, it’s red. When I send it to me@mydomain.com, it’s blue.

  11. Jim S.,
    The problem could be that your query will only trigger on screens wider than 1500px.

  12. You’re right, I think I had old debug code in there. I changed it to 500 and now I get blue on the phone and red in webmail, at least until I shrink the screen. Finally!

  13. Does anyone know if the update is already open for iPhone Gmail app? I know it works on Android, but we have difficulties making iPhone Gmail app recognize the media queries.

  14. Tom,
    As far as we know, the update has not been released for iOS yet. You can come check back on this blog and we’ll add an update when they do release support for that.

  15. Hi, at the end of the article, you’d mentioned that Microsoft made a recent announcement in regard to email, but I don’t see a link or any clarification on it. What announcement did they make? Thanks in advance.

    This, combined with the recent Microsoft announcement, shows that big things are in store for email!

  16. If anyone is still running into Gmail issues on Android or iOS, I found something that worked for me in terms of properly displaying multi-column text and styling. The workaround I used was using 3 columns in the email (anywhere in the email should work) to force Gmail to go 3 columns wide. This allows both 2-column and 3-column text to display properly. However, the text in those 3 columns must be hidden by changing the color to fit your email’s background color (display: none, font-size: 0, and other hacks didn’t work for me). So, an email with a white background would have its text color as white (or #ffffff) in those 3 columns. I’d post my code here, but the character limit here isn’t letting me.

Comments are closed.