Since August, email marketers around the world have been looking forward to Gmail’s new support for media queries and responsive design. The changes are finally here! Gmail now supports <style> tags, classes, IDs, and media queries. Before the changes, email designers had to rely on inline CSS to style their emails. Now, Gmail supports embedded CSS with classes and IDs, which eliminates the need for inline CSS in Gmail. This gives designers more flexibility and less obstacles to overcome to make their emails responsive.
Gmail has supported CSS for a long time, but only a very limited amount. Gmail’s support has mainly been for inline styles and not for style sheets, which allow email designers to swiftly make changes to an entire HTML email with minimal re-coding.
Gmail’s support of style classes and IDs means that designers can stop using inline styles for every single element. You can now use a class instead, and a single update to that class in the <head> will affect every occurrence of that style.
Media query in a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries allow designers to code a single responsive template that displays well no matter what device readers use, creating a cohesive viewing and reading experience. Many emails rely on media queries to modify content and design to create a user-friendly experience across a range of screens sizes and devices. It’s very important that your emails are responsive since more than 50% of all email opens happen on mobile devices.
Gmail is also introducing additional support for CSS background properties such as background-clip, background-position, and background-size. With background-size support, emails can have scalable and responsive background images. These changes will definitely help designers add some flexibility to email designs.
However, it’s important to note that although designing for Gmail has gotten easier, you still need to use tables for Outlook. Unfortunately, Outlook only supports the table background attribute and not background CSS. There isn’t a universal email design standard yet.
 Without responsive design |
 With responsive design |
(Source)
Also, if you have a large Outlook audience, then inline styles and tables are still necessary for email design. Hybrid/spongy development can still be used in emails as a baseline structure for tricky clients like Outlook. Outlook doesn’t respect embedded CSS. These rules need to be replicated inline. Outlook will strip CSS out when stripping the <head>and <body> tags.
The new Gmail support changes currently only affect Gmail webmail, Inbox webmail, and Android’s Gmail and Inbox apps. Changes for the Gmail and Inbox apps on iOS is expected to come out soon.
Gmail has made it easier to design emails that look great across their clients and a lot more accessible. These changes will help email marketers and designers create more user-friendly email campaigns without the need for inline CSS. Email accessibility is critical to email marketing success. An email is a waste if the recipient can’t read or interact with it. To view a full list Gmail supported changes, please visit Gmail’s official documentation and the developer documentation.
How do you feel about Gmail’s changes? Let us know in a comment below.
CSS & Media Query Tutorials:
Ideas Behind Responsive Emails