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 is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Popular Posts

Read Next

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…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…