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

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 1^st, mark the point at which we finally embraced the homogeneous web? Update: Yes, thankfully this article was an April Fools’ joke.