Gmail to support responsive email design

Do you hear it? The joyous cries of email developers all over the world? Get ready to join in on it, because the moment we’ve all been waiting for is finally here. Yesterday, Google announced that Gmail and Inbox by Gmail will finally support responsive email design using media queries, as well as embedded styles, later this month.

Responsive emailing using CSS media queries

As the world’s 3rd biggest email client only after Apple’s iPhone and iPad clients, it was about damn time. With responsive email design, developers no longer need to write hybrid or spongy code, something that could get very tedious when dealing with complex email designs. Instead, it’s now possible to use standard CSS media queries, in which one can set styles according to the screen width, orientation and resolution. For example:

@media screen and (max-width: 600px) {
.colored {
color:blue;
    }
}

The piece of code above uses a media query to check whether or not the screen width of a device exceeds 600px. If that is not the case, everything in the class “colored” will be blue. This update makes designing email much more universal, as Apple’s, Android’s, Yahoo’s and even Blackberry’s native clients already support it. According to Litmus's marketing share check, over 80% of the emails sent are sent to clients that support responsive design once Google rolls it out for Gmail.

Embedded styles

Another very satisfying update is that embedded styles will soon be supported by Gmail and Inbox by Gmail. This means that, instead of being limited to messy inline CSS, you can now specify your styles in the head of your document. On top of that, classes and IDs are also supported, which makes clean and consistent CSS infinitely more easy.

Google hasn’t been very expressive yet about this new update. Apart from this blog post and this short documentation page not much has been shared. Questions about details arise, but for now, we’re a bunch of happy campers.