Gmail’s Big Update: CSS Stylesheets
Originally published on the SparkPost Blog...
Cascading Style Sheets, or CSS as it’s more commonly known, is every web developer’s best friend. Since becoming an RFC circa 1998, CSS has been an invaluable tool to ensuring the consistency of large websites and email templates alike. Mailbox providers and ISPs that provide webmail accounts have incorporated some or all of the features of CSS over the years. Gmail has, however, resisted supporting a key component of CSS: style sheets in the <head> of an email. This is about to change.
A little history and background
Designing emails can be as complicated a task as the design of web pages. At the heart of the problem is the idea that although HTML and CSS are succinctly defined through RFCs (standards published by the Internet Engineering Task Force – IETF), there is no requirement for a given ISP, mailbox provider, or desktop email client to support all, some or none of those standards. Each company is free to support whatever parts of the code standard for HTML/CSS and other defined technologies they deem fit for their business. Designers can’t totally rely on these standards to guide them because they have to be intimately aware of the nuances associated with each receiving domain.
Gmail and CSS up until now
Gmail does support CSS, a limited subset of the standard. Gmail’s support has heretofore been for in-line styles and not for style sheets, which are more efficient to maintain allowing designers to quickly make changes to an entire HTML document (email) with minimal recoding. In-line styles are just that: CSS styling that happens at the level of the element being styled vs. a master style at the top of a document that defines how every occurrence of that element should appear and behave. In-line styles have resulted in a lot more code because every table, bullet, header etc. needs to be styled individually every time it is used in an email bound for Gmail.
More robust mobile support
In addition to supporting style sheets (limited to class, element and ID selectors), Gmail will start to support @media queries. What are @media queries you ask? @media querieswere introduced in CSS3 and they allow designers to hide blocks of code until a condition is met. Media queries are most commonly used to optimize email and web pages for the multi-device viewing and rendering landscape that is our modern internet. In today’s world it’s not enough to have your email render beautifully in Gmail, or AOL. Emails must look good in Gmail on both an iPhone and Android, on an iPad and a Surface and on an iMac and a desktop. @Media queries have allowed designers to code a single responsive template to create a unified viewing and reading experience for recipients across a whole host of email clients and devices.
There are some other very specific supported elements that will be part of the new, expanded CSS support. I know that designers all over the world are popping champagne and celebrating Gmail’s new features.
However, the struggle for inbox consistency will continue. Desktop email clients such as Outlook still pose challenges for designers who must use tables vs. CSS positioning to do their layout. I know you’re probably thinking that Outlook what? It’s still one of the top 10 email clients according to litmus. If you’re a B2B marketer, you simply can’t ignore what is probably 50% or more of your recipients. Maintaining consistent experiences will continue to be a challenge, but one that just got a little bit easier given Gmail’s massive marketshare of over 1 Billion users.
As you can imagine, we’re not the only ones that caught this announcement. Our friends at Email on Acid put out a good write up as did our friends at Litmus. Check ‘em out for more unique perspectives.
Cheers!
-L
Len Shneyder | @LenShneyder
VP of Industry Relations
Very comprehensive Len, great read.