Google unveils Material Design Lite

Ben Moss.
July 07, 2015
Google unveils Material Design Lite.
Yesterday Google announced the release of Material Design Lite. Not, as the name might imply, a streamlined version of Material Design; rather, a framework for easily implementing Material Design on websites. In the year since Google unveiled Material Design at I/O 2014, it has changed Google’s not-inconsiderable output beyond recognition. Everything from Google Drive to Android OS sports Material Design’s minimal(ish) style. Even Google’s flagship search page has adopted Material Design elements. One of the chief stumbling blocks for widespread adoption of Material Design principles beyond Google’s own products, has been competing styles imposed by frameworks. There have been several community-driven attempts to rationalize Material Design and, for example, Bootstrap; Material Design Lite is an attempt to provide a Google-sanctioned implementation.
Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available. —

How do I use Material Design Lite?

A code implementation of Material Design (MD), Material Design Lite (MDL) is a small (around 27Kb gzipped) library of components for use on web pages and web apps. It’s written in Sass using BEM, and can be downloaded from GitHub then modified for your own purposes. Or you can, as per Google’s stated preference, import the full framework from Google’s CDN. You can cherry-pick elements to integrate with your designs, or if you are looking for a really simple option, Google have provided a theme customizer which allows you to make (very) minor changes to the framework before you use it.

What’s included in Material Design Lite?

MDL’s component library features MD versions of common UI elements such as check boxes, text input fields, and buttons. There are also MD UI elements such as cards, sliders, spinners, and tabs. MDL also includes five templates: a blog, the skin, a dashboard, a text-heavy web page, and a standalone article page: template-1 template-2 template-3 template-4 template-5

Browser support for Material Design Lite

MDL will, according to Google, work in “modern evergreen browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari”. Subtle swipe at Apple aside, this means that we can expect it to work in the last two major versions of all notable browsers. MDL has been optimized to support content heavy sites. Its core aims are browser portability, device independence, and graceful degradation. The first two aims are in line with responsive design best practices, and although graceful degradation has been supplanted by progressive enhancement in the last few years, legacy support means graceful degradation is an important feature. MDL includes a “Cutting the mustard” test which has to be passed before MDL’s JavaScript enhancements are applied to the framework. Older browsers, like IE9, will fail the test and be served a CSS-only version. Antique browsers, like IE8, won’t even fully support the CSS-only version. There is for example, use of Flexbox that neither IE8 or IE9 can cope with; however MDL’s graceful degradation means that even IE8 should display some of the framework correctly.

Issues with Material Design Lite

Numerous UX issues crop up with MD, and naturally MDL inherits them all. For example one of the most distinctive elements of MD, the floating button, is frequently positioned inconsistently, and on mobile often requires an extra knuckle in your thumb to tap it. [pullquote]MDL feels like a framework with an agenda[/pullquote] Broadly speaking MDL is well built, however there are some questionable approaches; it is, for example, yet another framework that relies on JavaScript for layout. MDL even extends into typography, which is where things get really sticky. The default font is Roboto, and although you can change this, I’m not confident that the majority of users will do so. CSS frameworks like Bootstrap, and Foundation, have always included visual elements. They have not however, been as distinct as MDL. MDL takes a step further than most frameworks by delivering a complete visual style; MDL feels like a framework with an agenda.

Should you use Material Design Lite?

MDL is the way that Google thinks the majority of websites should be built. And whilst there is absolutely no suggestion that Google will enforce this way of building, they certainly could if they chose to; Google wants to ensure that search results it serves to customers are fast, clean, user-friendly pages, what better way than to add the use of a framework it controls, to its algorithm? The use of any framework inevitably introduces some borrowed visual elements. However, most successful frameworks are successful because they are flexible. Where MDL differs, is that it is not just a framework, but a framework that favors a specific design approach. MD, as a design guide, is a well-crafted and intelligent attempt to rationalise Google’s output into a coherent brand. Its failing is that it’s too brand-specific to be applied beyond Google’s product range. We can learn a lot from the design wisdom in MD, but implementing it wholesale — which is MDL’s great strength — makes little sense most of the time.

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

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…