Gmail css stylesheets

Cascading Style Sheets (CSS) are 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 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 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 at the level of the specific element vs. a master style at the top of a document defining how every occurrence of that element appears and behaves. In-line styles create a lot more code because every table, bullet, header etc. must 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 queries were introduced in CSS3 and they allow designers to hide blocks of code until a condition is met. Media queries can 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 iPhones and Androids, on iPads and Surfaces and on desktops. @Media queries allow designers to code a single responsive template, creating 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.

The Struggle for Consistency

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 be a little 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 have a good write up, as do our friends at Litmus. Check ‘em out for more unique perspectives.