Gmail Now Supports Embedded Styles and Media Queries
AJ LaPorte#Responsive Design, #Events, #Design Advice
You're not dreaming; you read that correctly. We look at what this update to Gmail's functionality means for designers who utilize responsive design in email.
No, you're not dreaming, you read that correctly. Close to a month ago, Google announced support for embedded styles and media queries in their Gmail and Inbox by Gmail applications (both desktop and mobile). This made email designers/developers around the world rejoice, cry, and virtually group hug each other.
Better emails, tailored to all your devices https://t.co/yWCW3jVzdC pic.twitter.com/VDz76mglGH
— Gmail (@gmail) September 14, 2016
With Gmail being #2 and the Gmail Android App being #4 in market share for email clients, this update greatly improves the email design process for agencies everywhere. But what exactly does this mean?
How things used to be
In the past, Gmail didn't have support for classes or IDs with embedded styles (technically, you could have classes, IDs, and embedded styles in your email; however, Gmail would simply remove the <head> portion of your email along with the <style> portion, essentially rendering your class and ID styles useless). This means that a majority of the work for designers had to be done with inline styling.
Another issue many designers would run into involving the Gmail app was the width of tables and divs not fully extending across the viewport when setting the width to 100%. This created issues for emails that utilized responsive design.
To infinity and beyond
With Gmail's newest updates rolled out (you can see a listing of the Gmail clients that have been updated here), having the ability to target classes and IDs will now allow us to address these problematic items and make sure they display at 100% width. Furthermore, we can now target these elements to be a set width using the media query (such as 320px).
Along with this update, Gmail also went a step further in making our dreams come true and added all the supported styles to their Gmail & Inbox Sender Resources documentation. For a detailed look at the update and whats included, check out the article written by Stig Morten Myre over at Campaign Monitor.
This is a HUGE leap in helping email designers/developers create a lighter, less hacky version of emails for all the major email clients being used. Thank you, Gmail team; you have made this designer/dev a very happy person!
If you have any questions about what this change means for you or want to know about how to ensure that your emails are responsive, please contact us. If you have any tips of your own about how to utilize these new features, please feel free to share them in the comments below. We'd love to hear your thoughts!
Related Posts
User Onboarding Process: Guiding Visitors Through Your Website
We offer some tips on how to design a website in a way that helps users intuitively understand how to use it to accomplish their goals.
The Difference Between a CMS Migration and Website Redesign
Learn about the three areas website owners need to consider when planning a migration to Episerver: website design, CMS technology, and content.
Results Matter.
We design creative digital solutions that grow your business, strengthen your brand and engage your audience. Our team blends creativity with insights, analytics and technology to deliver beauty, function, accessibility and most of all, ROI. Do you have a project you want to discuss?
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.