August 20, 2015

Google brings Material Design to the Web, in the form of Material Design Lite


The introduction of Material Design was one of the highlights of Android Lollipop. A majority of designers considered it an overhaul of Android’s visual elements. By introducing Material Design, Google has managed to offer a single underlying system that presents a unified visual experience across platforms and devices of different sizes. Material Design looks at every object through three dimensions, which means every object has an x, y, and z co-ordinate. The z-axis is a perpendicular line extending towards the viewer. Material Design provides real structure allowing designers to use a layering hierarchy and determine exact sizes for shadows. Material Design supports a wide range of display sizes, ratios and pixel densities.

Material Design yet to catch up with major brands

Google was quick in adopting Material Design in all its core apps such as Mail, Maps, YouTube, Calendar, etc. However, major brands like Facebook, Amazon have not adopted Material Design language for their apps. The introduction of Material Design was aimed at presenting a consistent visual experience across the Android platform. But with major brands still not adopting Material Design language, the consistent user experience seems to be a long way off. It is also said that it will be tough for Google to dictate design to large app publishers. Experts believe the weakness in approach is also one of the factors that app publishers have not yet adopted Material Design language in their apps. For example, Windows app publishers find it hard to create an app that doesn’t follow Windows Design principles whereas Google allows developers with limitless creativity with or without Material Design.

Use of Material Design in apps will reduce fragmentation

One of the advantages of using Material Design is reducing the appearance of fragmentation on the Android platform. If all top apps use a common design language (Material Design), users will experience a level of consistency that does not exist as of now, but Material Design language has not been adopted as yet, in designing skins and launchers by phone manufacturers. For example Samsung can keep the Touchwiz UI (but adopt Material Design language) to provide a consistent experience across the platform. It is said Google had plans to introduce Android Silver program, where it would partner with top manufacturing partners like LG, Motorola, Samsung and HTC. In this partnering setup, Google would have more control on user interfaces and hardware guidelines for the popular lineup of devices. It is clear that Android Silver will not see the light of day but Material Design can bring in the same consistency across all Android devices without Google forcing the manufacturers to get as close to stock Android as possible.

Google extends Material Design to Web

If you are impressed by apps that have adopted Material Design, you will be pleased to know that the websites may also look like android apps in the near future. Google has unveiled Material Design guidelines to the Web using HTML, JavaScript and CSS and have introduced it as Material Design Lite also known as MDL.

Material Design Lite was developed in close collaboration with Chrome UX teams and has undergone several reviews of compliance The entire code of Material Design Lite is approx 27KB which is less in comparison to the functionality it brings to the websites. Material Design Lite stack does not contain several advanced “Polymer” functions of the original Material Design stack, as it is specifically designed for websites. Material Design Lite is optimized for websites with heavy content such as blogs, digital magazines, articles and marketing pages. Despite removal of advanced “polymer” functions, Material Design Lite retains all of the user adaptive guidelines that are part of the original Material Design. MDL guidelines also stresses on use of a standard set of typography, breakpoints, grid layouts and patterns that will render well across all screen sizes, devices and formats.

The breakpoints in Material Design will allow content to reformat automatically as per the screen size. For example, for a medium-screen device of 360 pixels, only one layer of design objects will be rendered on the screen while 2 to 3 layers of design objects will be rendered on screen with larger number of pixels.

To make things easy for Designers, Google has released a set of templates for articles, marketing pages and blogs. These free MDL templates are similar to the easy-to-use templates used to create websites on WordPress and Drupal platforms. Since Material Design Lite uses common Web frameworks and programming languages like HTML, JavaScript and CSS, it will work in all the latest iterations of popular browsers like Chrome, Safari, Firefox, Edge and Opera. For older browsers like Internet Explorer 9, MDL will degrade in CSS elements only. Material Design Lite supports IE 10 and IE 11. Google provides cross browser, cross –OS web developers tools to anyone who wants to create portable, productive and usable pages using Material Design language.