Gmail to support Responsive Email at last!

We're back, marketers! The routine begins for most people. And what better way to come back than with good news? What seemed like it would never come... is here. Gmail finally leaves its stubbornness aside and agrees to support media queries in order to correctly adapt the design of the emails to the different screens.

Soon, users who use Gmail as an Email Service Provider (ESP) will be able to receive their emails on mobile with responsive design, bringing better visibility and usability to the user experience.
Gmail aceptará el Responsive GIF
Until now, Gmail has focused its efforts on improving the mobile usability on its own, ignoring the CSS within the tag and, therefore, preventing the correct rendering of emails. Finally, it has come to its senses and made the right decision: to make life a little less complicated for email marketers. It seems that the ESPs are starting to collaborate in the standardisation of email marketing, which will make the day-to-day work of email marketers much easier. Another clear example of this is the collaboration between Microsoft and Litmus.

What are the practical aspects of this news?

  • Standardisation of the use of media queries for the adaptation of email design to mobile phones.

The objective of the use of the Responsive Email is to improve usability and user experience on different screens.. However, media queries do not work in all ESPs. Gmail is the main email client that refused to accept this type of code, which complicated the work of the email composers. But that is now history, Gmail will now accept the use of media querieswhich means that about 75% of the email clients will accept responsive design in their emails. Undoubtedly, we are getting closer and closer to the standardisation of the process of adapting emails to mobile.

CSS Media queries
Source: Google Apps Developer Blog

  • No more "hacking" emails so that Gmail displays the original design

Email designers have struggled to get email layouts to look at least minimally good for users with Gmail accounts. However, although they managed in many cases to make it look like the original design, the work involved was very laborious and totally unnecessary. And even more, if we take into account that the results in many cases were not comparable to the original email designs. Now, the work of professionals will be somewhat easier and they will have one less thing to worry about.

  • Goodbye to CSS inlining!

Until now, Gmail did not read any of the CSS declared in the , that is, in the usual section where the CSS styles that mark the design of an email are declared. Gmail ignored all that data, which required repeating it again inside the HTML tags (inline), which implied many limitations. So the tag in Gmail will soon be able to be used in the of emails.

CSS Selectors
Source: Google Apps Developer Blog

  • Gmail expands support for CSS properties and Media Queries

This will allow emails to be designed in the same pattern as the main ESPs.

Supported media queries

Supported types

all

screen

Supported queries

min-width

max-width

min-device-width

max-device-width

orientation

min-resolution

max-resolution

Supported keywords

and

only

Click here to the complete and official list of CSS and Media Queries supported by Gmail

In short, although with this news Gmail has taken a step forward, there are still many aspects that need to be standardised so that the task of designing and laying out an email for different ESPs is unified and simplified. For example, it is surprising that Gmail still does not support Google Web Fonts. This is one of the many examples that this ESP has yet to polish and improve.