What Gmail supporting CSS media queries means for ecommerce marketers

Posted by Abi Davies 20 Sep 16

At some point in our lives, most of us will have experienced the horrors of unresponsive email design.

You’re on the bus en route to work when you receive a weekly update from your yoga instructor. You open the email, eager to find out when classes will resume for autumn, only to be met with a strange, unintelligible image stretched across your phone screen.

You get into work and reopen the same email ready to recoil once again, but instead are surprised to see a beautiful, hi-res version of the same image on your desktop.

Up until now, Gmail has not been optimised for every screen. This has led to issues like text composed on a large screen shrinking to a size only The Borrowers would accept once displayed on mobile.

However, all that is about to change - Google has revealed that the time has come to take action. How? By supporting CSS media queries.

What’s the background?

While Google’s efforts to shake up email - with tabs, schema and its Inbox app amongst others - have had a profound effect on the email experience, Gmail’s patchy support for CSS has long been causing major headaches for email designers and marketers.

By removing the <head></head> section in each email, developers have been forced to use inline CSS (read: massively time-consuming).

For the less tech savvy amongst us, Netherlands based developer Niels van Hove defines CSS media queries as “a feature in CSS3 (latest CSS) which allows you to specify when certain CSS rules should be applied.”

He adds that they enable email senders to target CSS rules based on factors such as screen size, device-orientation or display-density. For example, you could apply a special CSS for a mobile device and another for iPad.

download Ometria's welcome email cheat sheet

What do these changes mean?

To say that Gmail supporting CSS media queries is a pretty big deal is probably an understatement. Essentially, it’ll mean that no more (time-consuming) hacks are needed to ensure that your emails look tip top in Gmail on mobile.

As Gmail associate product manager Pierce Vollucci and Google Apps developer programmes engineer Steve Bazyl explain on the Google Apps Developer blog:

 “Later this month, you’ll be able to use CSS media queries with Gmail and Inbox by Gmail to ensure your message is formatted the way you intended, whether it’s viewed on a computer, a phone in portrait mode, or a tablet in landscape model.

“You’ll be able to change styles based on width, rotation, and resolution, allowing for more responsive formatting to optimize your email for every device.”


Gmail now support CSS Media Queries

Essentially what this will mean is:

  • Greater consistency in how your emails will look across different email clients.
  • Less time spent on inline coding
  • (Potentially) smaller email sizes

What does it mean for ecommerce marketers?

This is huge news in email design. As Ometria’s HTML developer, Dwayne, says: “The very fact that Gmail now supports media queries means that it’s the most comprehensive email client! This is pretty groundbreaking and the future of HTML development can and will only get better.”

It also means that the market share between Gmail and Apple is likely change from where it currently stands  (35% Apple, 15% Gmail).

If you’re an ecommerce marketer, the news is slightly less of a big deal as it won’t require you to take a great deal of action. You can just sleep peacefully in the knowledge that the experience between mobile and desktop should be seamless for Gmail users from the moment the update is rolled out.

 

 

Topics: Ecommerce email marketing, Ecommerce news

Artboard 10 B-1.png