Click to Sign Up for a 7 Day Free Trial!

Industry News

How We Monitored Gmail For Their Media Query Support Update

Email On Acid

In September Google announced that Gmail will be adding support for embedded styles and media queries. The announcement only hinted that the changes would be rolled out by the end of the month. That immediately set email designers into a frenzy, guessing exactly when the changes would roll out.

Being email developer advocates, we set up a website called GmailUpdates.com so that email designers, developers and marketers could sign up to be notified the moment we detected that the changes have been rolled out.

Here’s how we went about monitoring Gmail for media query support.

HTML Email With Media Queries

We created an HTML email with media queries that showed green checkmarks when media queries are supported and ran them through our email rendering service. Our engineer Tom Skinner spent the weekend hacking up a solution using the Email on Acid API to continuously re-run the email through the Gmail client every five minutes and linked it to the website.

The screenshots allowed us to visually detect when the changes happened, but we needed a way to programmatically detect it. Since time was of the essence we didn’t want to turn this into a major engineering project.

Using OCR

The solution came in the form of a lightweight command line Optical Character Recognition (OCR) tool called Tesseract. An OCR converts text in images to plain text so we can perform pattern matching on them. Tesseract was developed by HP but has been taken over by Google.

We then edited our HTML so that the phrase “The updates have not yet happened” is displayed by default and hidden when media queries are present.

When we tested the OCR tool on the screen capture of the Gmail interface, the transcription was pretty bad - mostly because the OCR engine expects a well formatted document and the Gmail UI is anything but. However, we got what we needed, Tesseract managed to capture the word "happened".

Site Monitoring Alerts

We then wrote a script that would copy the converted plain text into a publicly accessible URL and pointed our site monitor at it. We set it to send one of us a text if it detects that the phrase "happened" is no longer present in the document.

This meant one of us might have to be notified at odd hours of the night if the update happened then. We felt this was safer than having a false positive trigger off the email notifications to hundreds of disappointed recipients.

The Event

At 9:42 MST (Mountain Standard Time) on September 29th, the text came and sure enough, the screenshot showed three green checkboxes - support for classes, ids and media queries. Mallory Mongeon had the auspicious assignment of sending the eagerly anticipated announcement that finally, after 12 long years - #GmailGotStyle.

Due to the way Gmail rolled out their update we weren’t the first to see the rollout. One of the first members of the email community to get it was Ryan Person from Nike. Congratulations Ryan!

If you're wondering why the announcement was such a big deal, head over to this article to find out!

Be the First to Know

Email on Acid is committed to helping our customers stay on top of changes in the industry. Any change to an email client can have a huge effect on your bottom line if you aren’t prepared for the changes. Keep your eyes on our blog so that you can be ready for industry-shaking events when they happen!

About the Author

Justin Khoo

Justin Khoo

Justin Khoo (@freshinbox) is an email developer and writes about email techniques and new innovations. He has been involved in many aspects of email over the past decade, everything from building webmail clients and email campaign services to coding HTML emails.

Join the Discussion

Are you testing these for every country?
SquareBalloonEoin
Hi, I was wondering if you set a background image in a media query and one outside of a media query and then tracked those links. On each test if you only receive one link track (ensuring your media query image would not show on the testing device size) then it would show that it is working?
I haven't tested this,but if there is an obvious reason why this wouldn't work I would love to know.
Renier
SquareBalloonEon, we were mainly monitoring to when Gmail started to roll out media query support, so we only checked the Webmail version although admittedly they could have started rolling out on other versions first.

Renier, yes it seems that would work as well! We could track if a background image set in a media query was loaded and have that link trigger an alert.
Justin Khoo
Hi, I was wondering if anyone has had issues with inconsistent callbacks to their CSS? For example, Gmail will get the mobile responsive font sizes, but none of the omissions (leading the whole email to look like a mess)?

Didn't have time to fix so I've since kept Gmail to not render mobile, which is unfortunate. Was wondering if anyone saw this too and had a fix. Thanks!
Jon
The GmailUpdates.com page doesn't appear to be doing anything. Is the page no longer active?
Eddie
Eddie,
That's right. We're no longer monitoring the roll out of these updates using that domain. You can check here for up to date info on where the updates have been released: https://www.emailonacid.com/blog/article/email-development/media-queries-in-html-email

Let us know if you have any questions!
Geoff Phillips

Leave a Comment