Gmail finally supports responsive design: answers to 4 burning questions

You are here:

mrmohock / Shutterstock.com

Gmail started rolling out support for CSS media queries across its email clients around midnight last night, following through on the September 14 announcement that it would support responsive design later in the month. With these media queries, email designers will be able to specify different display styles based on things like width, screen resolution and rotation. We’ll talk about the ramifications of this move in a second, but we should take a moment to recognize how wonderfully strange that initial announcement was.

It wasn’t just that they’d be supporting media queries, a longtime wish of pretty much every email marketer. It wasn’t just that they told us ahead of time, when inbox providers seldom announce such changes beforehand. It was that they also supplied developer documentation, which is standard practice in the web browser world but utterly alien in the inbox provider world.

Supporting responsive design is awesome, but taking those two additional steps is, frankly, beyond amazing. And with this Gmail news coming less than a month after Microsoft announced a partnership with Litmus to improve rendering in Outlook, it feels like there’s a sea change in the email industry. (Disclosure: Litmus is my employer.)

Now that Gmail has implemented support for CSS media queries and we’ve had a chance to look at it, let’s address the four big questions that many marketers are probably asking themselves:

1. Do marketers need to use hybrid email design anymore?

Maybe, depending on your audience.

Hybrid email design uses email client-specific progressive enhancements to mimic responsive design but doesn’t rely on media queries, which enable traditional responsive design.

Now that Gmail is supporting media queries, 75 percent of email opens occur in email clients that support responsive design. It’s worth checking to see where your brands’ emails are being opened. If you have lots of emails being opened on Outlook desktop apps, Microsoft Windows Phone, Microsoft Surface and Yahoo Mail mobile app — none of which support responsive design — then hybrid email design becomes the more attractive option.

This likely breaks down along industry lines, with most B2C marketers finding responsive to be the better email design approach and most B2B marketers finding hybrid better.

That said, it’s worth noting that even those using hybrid design should be making near-term changes due to the shift at Gmail. The portion of hybrid code that addressed Gmail specifically should now be replaced with responsive code that will sit on top of the hybrid code, which will essentially be a fallback when emails are viewed in email clients that don’t support media queries.

The upside here is that hybrid code, which has been heavy and tricky to understand, will become less so on both counts.

2. Do marketers need to inline CSS in their emails anymore?

No, you probably don’t need to anymore.

Because it stripped code from the of emails, Gmail was the primary reason that marketers needed to inline styles. In the US, there are a few low-usage email clients out there that still require inlined styles, but they represent a small fraction — less than one percent of email opens.

Abroad, you’re also probably safe to stop inlining, although you may need to reconsider if you have a significant number of subscribers using Mail.ru, Yandex, Libero or a few other regionally popular email clients that don’t support embedded CSS style.

So instead of applying styles to each individual table row and cell, you can now centralize all your styles in the , which eliminates a lot of inefficient, but previously necessary, code from emails.

For marketers, this change means that emails will be much easier and faster to code. For subscribers, it means that emails will load more quickly.

Marketers can take those savings in terms of lighter code and faster email load times and spend those gains on other email elements such as:

Heavier image files such as retina-optimized images and animated gifs, which 46.9 percent of marketers never use, according to the 2016 State of Email Design (email registration required).
Heavier coding elements such as interactive email elements like hamburger menus and email carousels.

Just be sure to continue to keep the weight of your email code under 102 kB to avoid clipping in Gmail and slow load times in general.

3. Can marketers now use interactive email elements in Gmail?

No, not yet. But there are reasons to be hopeful.

While Gmail’s CSS support is extensive and includes support for :hover (which isn’t mentioned in the developer documentation), the company’s rendering engine does not support any CSS that uses classes or IDs — which is necessary if you’re going to use check boxes, radio buttons, labels, the :checked pseudo selector or the ~ sibling selector. All of those are key code elements for interactive email features.

For years, Gmail has cited security concerns around responsive design as the reason it’s not supported. Since Gmail was able to overcome those concerns with responsive design, it’s conceivable they will be able to overcome them with interactivity as well.

So for the time being, Apple email clients, which have 51 percent market share, remain the best venues for interactivity. Especially for B2C marketers. That’s a good enough reason to start trying out interactive elements today.

4. What’s driving these changes at the inbox providers?

In the wake of the Microsoft-Litmus partnership announcement, I explained that a number of changes over the past seven years had caused Microsoft to see email marketers as more of an ally than an adversary, as they had in the past:

Leadership in the C-suite has changed in recent years.
Leadership of email products has turned over.
Consumer behavior is different, with people accessing business and personal emails on the same platform.
Inbox providers are consolidating the email rendering engines they use to gain efficiencies.

These forces are also at work in the move by Gmail. Plus, there’s another factor at work that wasn’t initially evident to me:

Email marketers are no longer outsiders at Google and Microsoft. They’re insiders, thanks to B2C ventures and acquisitions over the years.

Yes, Google sends tons of email and has many consumer-facing businesses now like YouTube, Google Plus, Goggle Photos and Nest. It’s not a coincidence that Gmail used YouTube emails to demonstrate how responsive design works in its announcement blog post. And Microsoft has many consumer-facing businesses as well, including Xbox, Skype, and now LinkedIn, which is a huge, sophisticated user of email marketing.

It’s easy to imagine these brands approaching their coworkers on the Gmail and Outlook teams, saying how much they enjoy designing emails for Apple email clients and asking, “Why don’t our email clients support HTML and CSS, as well as its email clients?”

Whatever combination of factors led to these changes, the jobs of email designers and developers are clearly going to be a little easier going forward — at least until adoption of wearables ramps up and voice interfaces are used to access email. Then email rendering will get messier again.

From our sponsors: Gmail finally supports responsive design: answers to 4 burning questions