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.
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!
