Gmail Now Supports Responsive Design

Posted by Norm Schurdell on Apr 21, 2017 1:45:00 PM

web development

No More inline CSS

Designing for email has always been a bit of a pain for designers and developers. It requires a departure from the way they develop websites or apps. But there is some good news for those who have to consider email in our designs:

Embedding your CSS in the <head> of the email document within the style element is now possible and more preferred. No more inline CSS.


This means designers and developers can stick to what they do best, which is building things with one master style guide and editing it as needed per email/campaign or per A/B test for optimal results. They don't have to touch every element within the email and give it it's own unique style for best viewing results via email.

Gmail now supports media queries*

*Does not apply to POP/IMAP accounts accessed through Gmail

With these Gmail updates, more than 75% of email clients now support responsive design.

This means designers, developers and marketers can deliver the right message, in the right format, per email/campaign and have it also remain optimized when viewed as a web page.

Common media queries are screen size break points for different phones, tablets, laptops and desktop devices.

Display: none

Using display: none is helpful if you want the ability to hide certain text or preview content via desktop or mobile, to attain a better user experience.

This means Ninjas need not apply because they're already there! They lurk, behind the scenes, to hide the content designers, developers and marketers don't feel the need to reveal just yet within the current email or campaign.

“This is just one part of an overall effort to expand CSS support in Gmail and to give email designers more control over how their messages are rendered.”

– Pierce Vollucci, Product Manager at Google


Web Marketing Assessment

Norm Schurdell

Written by Norm Schurdell

Norm Schurdell is the development manager at Tribute Media. Norm loves developing websites, apps, people and processes.

Please Leave a Comment: