Unmasking Gmail’s Changes

in Front-end

Gmail recently added support for media queries to many of their email clients, greatly improving the small-screen experience. Here, we’ll talk about what changed, how it affects our HTML Emails course, Unmasking HTML Emails course, and how it affects building emails here at Code School.

Gmail Brought <style> Back

Since media queries can’t be applied as inline CSS, Gmail needed to stop removing the <style> element and/or linked stylesheets from HTML emails. As of now, they are still removing any linked stylesheets, but they are not removing the <style> element in most cases.

  • Non-Google accounts using POP/IMAP have not received this update and there is currently no indication that they will.

  • The maximum amount of characters Gmail will allow in a <style> element is technically 8,192. However, Eric Lepetit has been testing and it seems that one gets removed once it reaches 7,861.

Everything Changed, but Nothing Is Changing

As for how this affects our Unmasking HTML Emails course, it changes everything and nothing at the same time. The code in the email still works as expected and is still how I would suggest creating it. (With the exception of a personal preference for an alternate approach for single-column emails. Some of the information in the course is now incorrect:

  • The explanation of Gmail’s preprocessor as the need for inline styles is mostly incorrect. While the web version fully supports the style element, it will not be supported for any POP/IMAP accounts in the mobile apps. This means that if I check my G Suite email for Code School, I get <style> support. If I switch to third-party accounts like Yahoo!, AOL, or an email via web hosting, <style> is removed. Here’s the course email with all of the CSS in a style element in a Google account and non-Google account:

Two emails side by side. One is missing styles.

  • Screenshots throughout the course for how something would appear in Google apps are incorrect. They now look similar to Apple Mail ones:

Two emails side by side. One is missing styles.

New Ways to Improve Emails

For now, the lack of POP/IMAP support is keeping me from moving all CSS into <style>. The addition of support in the various Google apps (Gmail, Inbox, mobile web) leads to more testing and more chances to fine-tune font sizes. There is a variation in the amount of “chrome” in each.

The desktop version of Gmail has proven to be slightly challenging if you want to create a responsive email. The web version of Gmail is not using an <iframe> to render emails, so it crosses over into a problem that web developers struggle with: media queries adjust to the size of the window, not the size of a parent container. The smallest width Gmail will allow the email container to be is 452px. In this example, the container is 452px, but the styles from this media query aren’t applied:

@media screen and (max-width: 600px) {
  ...
}

Luckily, there is a (somewhat fragile) way of targeting web Gmail specifically. Thank you to Kevin Mandeville for saving this snippet that I’ve been tweaking a bit. Gmail outputs an empty <u> element before outputting your email’s <body> element as a <div>. If you apply a class to your <body>, it will be applied to the <div>, so you can then target child elements of that.

u + .gmail .selector {
  ...
}

I take this one step further for a responsive email in the desktop view. Using the course email as an example, the layout was intended to shift from a single column to dual columns at 600px. With some trial and error, I’ve found that is ~1160px including the UI within Gmail itself. This seems to work well for when people are using web Gmail and don’t have their browser full-width:

@media screen and (max-width: 1160px) {
    u + .gmail .selector {
    ...
  }
}

Here is the slides email with styles applied in that way:

“Final” Doesn’t Exist

Email clients are a moving target, so we will need to continually review and improve our code as they continue to evolve. For now, I’ll leave you with a quote from someone who taught me so much about web development: “This is how we do it every time, from now on, until we change it.”

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Dan Denney

I’m a seriously good copy and paster. Front-end dev for @codeschool, lover of all things web design/dev related and founder of @frontendconf.

Might We Suggest

Styling Text With SVG Filters

in Front-end

If you look at a US dollar bill up close, there are a lot of typographic niceties going on: the huge numbers in the corners, the beefy capitals across the top and bottom, and even the vibrant serial numbers on each half of the bill.