How We Monitored Gmail For Their Media Query Support Update

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!

Leave a Reply