New Gmail App supports media queries! Hoora....Oh :(


Last year I reported that an update to the Android Gmail app had resulted in working media queries, it turned out i was wrong, but today I'm back with good news and bad news. As the redesigned Gmail Android app sweeps the nation with it's segmented inboxes and streamlined interface, I've had a chance to do some testing. The good news is theres media queries, but they're not what we've all been hoping for.

First off, this is the same old gmail, still no embedded css (only inline) and still the same old quirks. What is new is the support for @media, although when i say "support" I use the term very loosely.Gmail calls it auto-sizing and it can be turned off on the fly (although the availabilty of that option depends on the width of the email).

The bad news is that as far as i could tell, the only property read from the media query was width, so while a 100% wide table will display fine, try adjusting text size or making your links "thumb-ready" and you'll be out of luck.


What does this mean for us?

media querys have been mostly devoid of the quirks of modern email clients but the update means that reponsive techniques like background-images, font-replacement, display:none and pseudo classes must be used carefully.

As the update rolls out over the coming days/weeks we'll need to adapt and my advice is to make sure that your email looks good on the new app before adding in the more sophisticated mobile styles.

Turns out i was wrong about this, what's seems to actually be happening is that when a single table cell is above view port width, all tables scale to 100% width so it gives the illusion of reading the media query.

roshodgekiss roshodgekiss, 3 years ago

Redferret, this is genius - thank you for sharing your results here! We're going to do some testing on our end, so hopefully more good, over bad news will come out of this. We can only keep our fingers crossed, anyway...!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
nightjar nightjar, 3 years ago

Thanks for posting this!

Kyl, 3 years ago

Can confirm this. My existing responsive emails snap into place, however all styles except width are removed. An important note with this is that if your current responsive emails show and hide content based on device (using the CSS property 'display'), the new Gmail seems to ignore this and we are left with a desktop version of the email in a mobile layout.

If you are a perfectionist like myself and you use media queries to adjust padding and font-size etc to get ur mobile email looking spiffy, its a bit of a disappointment :( Here's hoping they add additional support for media query CSS properties.

Redferret, 3 years ago

Turns out i was wrong about this, what's seems to actually be happening is that when a single table cell is above view port width, all tables scale to 100% width so it gives the illusion of reading the media query.


Gmail app apologist
roshodgekiss roshodgekiss, 3 years ago

Hi folks, just did a bit of testing myself here. Definitely no media query support, just that the viewport snaps to the width of email content. So, as far as displaying email messages goes, there haven't been any major improvements - most content will still require the user to zoom in to view. Here's our latest email newsletter, for reference. Better luck next time, eh?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
nightjar nightjar, 3 years ago

I am having some really weird results with this. [Edit: previous problem was just a Litmus bug]

I am now testing on an actual Android device. Some emails are loading up looking as if they are 'responsive' but then when the images load they go back to full size. On my email in portrait everything that had any "align" on it is being switched to align left, 100% width tables are being reduced to the size of their contents.

My mind is going to explode. I wish they would release some notes explaining exactly what it does from a code perspective. Does anyone know if they have?

nightjar nightjar, 3 years ago

I've done a bit more testing since last night's desperate rant :)

What I'm finding is that it seems to choke quite a lot on nested tables — the fewer tables I use, the better it works out. That's all I've got so far :)

Redferret, 3 years ago

definitely seems to make all table cells 100%. but weirdly doesn't affect images so in Ros' screen shot up there the hero image is likely preventing it from collapsing down.

Looks like heavy use of spacer images may be become a viable tactic again!


Gmail app apologist
rsbridges, 3 years ago

We use nested tables that go three or four deep and it seems to be breaking on ours.  We don't use media queries (and honestly our messages aren't very mobile friendly - but we're working on that for future ones) and the new "auto zooming" seems to be adding some vertical white space in on the tables that are nested a few tables deep.  You can see a sample here.

If I uncheck the auto zooming selection and view it at full scale it looks fine.  I tried all sorts of different style settings and nothing fixed it.  If anyone comes across a fix please let us know.

nightjar nightjar, 3 years ago

Yes rsbridges, I found that the more nested tables I had, the more it would break. Which is sad news since nesting lots of tables in email is second nature!

Redferret, 3 years ago

i've been tying to figure out gmails rules regarding the auto-sizing, first thing to note is that results vary if you've not declared a width in a <td> tag, this is because at a certain threshold, every table is given 100% width, but only on the <table> tag.

It also seems there is some viewport zooming going on and I suspect that in Ros' example up there, the hero image is preventing the layout from collapsing


Gmail app apologist
tinabeans, 3 years ago

It looks like http://www.campaignmonitor.com/css/ says Android 4 (Gmail) DOES have responsive... but I have also been unable to verify that it actually does.

Might you lovely people at Campaign Monitor consider updating the chart to reflect this discovery? :)

Thanks so much for all you do!

roshodgekiss roshodgekiss, 3 years ago

Tinabeans, thank you so much for picking up that 'typo'! You're 100% correct - Android 4 (Gmail) should be marked as "No", so I've asked our team to update that straight away. Thanks again for your help!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098