How to build a website using Google Material Design

If you use Material Design on your website, it will look great and work well with devices running Android Lollipop

Now you can use Material Design on your own site

Since introducing Material Design in 2014 with the release of Android 5.0, or Lollipop as it’s better known, Google has been slowly incorporating this new style into elements of the Chrome browser and various apps. Now you can do this yourself thanks to a new set of free tools from the search giant. Here's where you can find them and how to add Material design to your website.

Google Material Design Lite: What is Material Design?

Reading the design brief on Google’s blog can leave you more confused than before you started. Terms like ‘a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods’ sound more like something you’d expect to see on an Apple video with acres of pure white in the background and devices spinning slowly in mid air. Thankfully the principles of Material Design are actually easy to see. Pages and apps are laid out in a flattened manner, with clean lines, a muted but attractive colour palette, and a noticeable lack of clutter. It's a very modern, sparse look that works especially well on mobile devices. 

Google Material Design Lite: Where to find the Material Design Lite tools

Google describes Material Design Lite (or MDL) as ‘a library of components for web developers’ and has created a site - getmdl.io - where you can work through the various elements step by step, alongside downloading the packages and even a few templates to get you started. The components include Material Design staples such as cards (generally where information is displayed), sliders, and column layouts, plus there are also navigation tools such as buttons, text fields, and checkboxes, all of which obviously conform to the Material Design ethos.

One interesting factor is that Material Design Lite isn’t reliant on any Javascript frameworks, and is intended to be a completely cross-platform solution. The components are created using CSS, Javascript, and HTML, with Google insisting that ‘Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.’

Google Material Design Lite: Getting Started

To use the Material Design Lite tools you have to be happy and confident about finding your way around HTML code on your website. Remember that although Google has made it simple to use Material Design Lite, it’s still intended for web developers rather than novices. Another possible stumbling block is if you have a free Wordpress blog, as the ability to customise the CSS is only available to Premium members, which will cost you an additional $99 a year. If you do have access, and are happy to edit the code, then the first thing you need to do is download the kit from the Material Design Lite website listed above. Then you’ll need to include the Material Lite CSS and JavaScript files in each HTML page on your website so that it knows what you’re referencing.

There are a few different ways of achieving this, but the two main options are where you use the files that are stored on Google’s own server, or alternatively you can download them and host them on your own local server. The advantage of the first is that you will receive any improvements to the code automatically as Google updates them, while the second means you won’t get any surprises when something changes elsewhere.

To use the files stored with Google you’ll need to insert the following code;

Opting for the local version means you’ll need to use this code instead;

With these now on every page you’ll be able to use the various components across your site. Before that though, you’ll need to decide on the colour palette you want to use.

Google Material Design Lite: Showing your true colours

Material Design works with two main colours - the primary and accent - both of which you can change easily using the Customise and Preview tool on the site. Simply go to the top of the page, click on Customize (sic) and you’ll see a colour wheel with a couple of tags containing the numbers one and two. As you might have already surmised, one is the primary colour which will make up the borders of pages, menus, and such, while the two is for smaller elements like buttons. To change the selections just click on a relevant sector of the wheel and this will select a new primary, then click on another sector to choose an accent. You can do this as many times as you like, until you’re happy with the selection. At the bottom of the page is a line of code which contains the colour references. You’ll notice that it changes each time to alter the selections on the wheel. Once you’re happy with the colours you can simply copy the code into your CSS and now whenever you use a component from Material Design it will know the correct palette to use.

Google Material Design Lite: Building further with components

Now that the fundamentals have been added to the site you can start to build in the real feel of material design. To do this you’ll need to select the Components option on the top menu, which contains all of the various elements you can use to display data or navigate the site. Adding an element is a similar process to before, where you copy the code into the CSS on your site, although things are a little more complicated now as you’ll need to determine the uses for each component, and the resources it uses. Thankfully Google has provided detailed step-by-step instructions for each component. Working your way through the different elements will take a little time, but with so much of the code all ready for you to use, and with clear instructions, it won’t be long before your site looks like a fully fledged modern creation. Also, don’t forget that the Template section also gives you the chance to experiment on layouts that have been specifically purposed to get the most out of Google’s new design.