Google rolling out Material Design web-wide

Ben Moss.
April 01, 2016
Google rolling out Material Design web-wide.

Since 2014, Google has been redesigning its apps and services according to its own Material Design principles. Yesterday it announced on its design blog that an upcoming release of its Chrome browser (version 49.2) will adopt Material Design as its default rendering.

Critically the new version of Chrome—dubbed Chrome MD—will override site-defined CSS in deference to the Material Design specification; colors, type, and even images will be rendered according to Google’s design language. A pillar of the tech giant’s design strategy for almost two years, the leap to Material Design has proved successful for Google across its apps, and according to Google, imposing the design system on content displayed in its browsers will ensure a consistent and high-quality user experience for its customers:
We developed Material Design to provide our customers with the optimum user experience, and we believe they deserve that quality every time they use a Google product — Anjeet Singh, Asst. Director of Marketing Production, Google Design

In addition to rebranding the web in its own image, the primary impact of this update will be a radically faster web.

Speed

Google’s primary concern is for a faster web, and by limiting the variables its browser is forced to render, it expects to increase the initial render of pages by an average of 17%. Chrome MD renders web pages faster than plain HTML with no CSS. This is because even when no styles are defined, browsers still need to poll for possible style definitions; Chrome MD simply skips this step rendering according to its internal style system. Chrome MD marks a major adoption of AMP (Accelerated Mobile Pages), significantly reducing the browser’s workload. However the majority of performance gains have been found by restricting style options.

Color

Material Design’s color palette is restricted to 256 colors, and Chrome MD will not render any color other than those 256 hex values. Where designers specify a hex value other than one of the 256 approved colors, Chrome MD will automatically translate it to its closest Material Design equivalent. For example, these two different reds will render as the same Material Design color:
p.material { color:#E53935; } /* renders correctly as #E53935 */
p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */
The same principle applies to RGB values, RGBA values will be translated to the closest Material Design color based on the color they overlay. Gradients will not render at all in Chrome MD. However, the closed-beta implementation (that gradients render as their average tonal value) is expected to be adapted to render the lightest tint found in the gradient.

Images

The same color restrictions also apply to images: every pixel in a bitmap image will be rendered as one of Material Design’s 256 defined colors—much like current .gif technology. SVG color values will also be automatically converted. Google has provided an exception to the image rule for cases it describes as “color-critical”, by piggy-backing the -webkit-appearance setting:
img.default { -webkit-appearance:material; } /* the default Material Design rendering */
img.trueColor { -webkit-appearance:none; } /* the true color as defined in the image file */
However this workaround will only function with bitmaps and embedded SVG files, inline SVG will always render using Material Design colors.

Typography

Replacing default system fonts, all text in Chrome MD will render using a single embedded font-family. Due to language support it will not be Roboto as might be expected, but Noto. Text will also render in 1 of 2 tones: black, or white; the tone will be automatically selected based on the background color. Gradations of tone will be determined automatically: on dark backgrounds H1–H6 will render at 100% opacity, all other text at 70% opacity; on light backgrounds H1–H6 will render at 87% opacity, all other text will render at 54% opacity. Chrome MD will also enforce a rigid typographic scale for weights, sizes, and line height:
h1 { font: light 45sp/48pt Noto; }
h2 { font: regular 34sp/40pt Noto; }
h3 { font: regular 24sp/32pt Noto; }
h4 { font: regular 16sp/28pt Noto; }
h5 { font: regular 15sp/24pt Noto; }
h6 { font: medium 13sp/24pt Noto; }
*, p { font: regular 14sp/20pt Noto; }
strong, em { font: medium 14sp/20pt Noto; }
These styles will not be over-ridable, and notably, there is no italic option.

Floating action buttons

Perhaps the most radical decision is the mandatory inclusion of a single, call to action. This is defined with the id primary and will be rendered as a floating action button:
<a href="someLink.html" id="primary">Click Me</a>
(Text within the link, in this example “Click Me”, is included for accessibility.) If a primary call to action is omitted, Chrome MD will render its own floating action button that links to Google search results for whatever term Googlebot determines is the primary keyword(s) for the page in question.

Breakpoints

Another key area for rendering performance is pre-defined breakpoints. Based on the sizing set in Google’s new Resizer app, the usable breakpoints are: 360px, 480px, 600px, 720px, 840px, 960px, 1024px, 1280px, 1440px, 1600px. Any designer-defined breakpoint that does not fit will be rounded to the next highest breakpoint. For example:
@media only screen and (min-device-width:840px) { /* applies at 840px wide and above */ }
@media only screen and (min-device-width:841px) { /* applies at 960px wide and above */ }

Wide-ranging impact

Google has a long and proud history of imposing its will on web designers, from unannounced updates to its algorithm, to the adoption of AMP. However, imposing Material Design on the web is likely to have the greatest impact. Of course, these changes only affect websites viewed in Chrome, however with more than 52% of global browser usage, it’s difficult to imagine a site that won’t be affected.
Our primary concern is for the quality of our customers’ experience. And so we recommend all web designers employ Material Design best-practices to ensure they deliver a consistent experience for their clients across all devices and platforms — Anjeet Singh, Asst. Director of Marketing Production, Google Design

Ostensibly Chrome’s MD update is about delivering a faster more consistent web experience, but in reality is likely to rebrand the entire web as a Google project. The current version of Chrome is 49.0.2623.110, suggesting at least one minor update can be expected before Chrome MD rolls out in full force. However does today, April 1st, mark the point at which we finally embraced the homogeneous web? Update: Yes, thankfully this article was an April Fools’ joke.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…