Implementing Material Design in Web Design
It's been a while since Google introduced its 'Material Design' concept, and it's now rolled out across the vast majority of Google's services, including most Android smartphones. There are a few frameworks available, which offer similar functionality to the likes of bootstrap. We've chosen to fully embrace one of these frameworks.
What is Material Design anyway?
Even Google find it difficult to define, and they made it! We'll have a go though...
The Phrase 'Material Design', in its simplest form, means a fluid design of rationalized space. This idea builds on to the concept of being able to build your website bit-by-bit from a hypothetical material, similar in design and interaction as working with paper. On most responsive websites, this hypothetical 'paper' material is then placed on to a grid system, allowing you to seamlessly optimize your websites for all devices and keep your websites looking great.
Having a grid system to place your 'material' elements keeps the spacing even and uniform, avoiding overlaps and stay separated, giving the user a more fluid experience. The common theme across most, if not all, Material Design websites is that the content on the page is big, bold and 'blocky' (in a good way). Google's tagline of choice for this is: Bold, graphic, intentional. A common hurdle that is often a challenge for web-designers during the beginning stages of producing a website is defining how to present the content consistently. Material Design takes strides into overcoming this hurdle.
Why do we use a grid system for Web Design?
Let's delve deeper in to the 'grid' and find out why it's our number one choice for designing websites.
Without a good framework as a foundation you are forced to create extensive 'Media Queries' to make your website responsive for mobiles and tablets, and took ensure it looks great on screen resolutions from 1200 pixels (some smaller laptop screens) to 1920 pixels (HD monitors). Media Queries and generally found at the bottom of the stylesheet and look something like this:
@media only screen and (max-width: 600px) {
.column {
width: 50%;
}
}
Media Queries allow us to override what is previously defined in the stylesheet when the specified resolution has been realised. In the example above, once the width of the user's screen reaches a maximum of 600 pixels the width of any items with a class of column will become 50% of the device's width. This is ideal for targeting mobile and tablet devices, however with the introduction of the a grid system we no-longer use these media queries as much, since the framework can do this for us.
Although mobile optimization is a large part of why we love Material Design, it's the aesthetically pleasing look and feel that the flat-design instills which won us over. Its implementation on our websites instantly makes the websites look modern, feel more responsive, and look extremely professional.
Top 3 Material Design Frameworks
Judging from Github activity, the top three Material Design frameworks go as follows:
1) Materialize CSS
Materialize uses a 12-part-grid system. That utilizes the categories: XL, L, M and S. Each corresponding to a different screen resolution. This makes working with Materialize a dream, as you can easily grasp how the grid system works and quickly implement it in to your project, making it work for all types of devices. The grid system is compatible on all browsers, so there won’t be too much hassle trying to get your website to look the same across all the major browsers, namely Internet Explorer. Not only that, Materialize comes with a range of custom features that can be handy to implement in to your website. Such as aesthetically-pleasing forms, a quirky feature called Toast and Floating Action Buttons.
Positives:
- Offers a comprehensive SASS version for fast customisation
- 256 Colours built-in, with 19 base colours and light/ dark/ accent shades
- Many commonly-used Javascript functions built-in
- Native Javascript, so doesn’t require jQuery
- Active Community on Github and many active contributors
- Pre-made website templates that are easy to adapt to fit your website
Negatives:
- Quite bulky (267kb for minified) and may be overkill for simple projects
- Currently in beta (30 April 2018), although a formal release looks to be coming soon
- Customisation / choices for Javascript animations is limited
2) Material Design Lite
Material Design Lite is Google's own take on what a Material Design framework should look like and work. MDL allows the user to seamlessly optimize their website for cross-design use with a light-weight framework that supports most browsers, even older ones. MDL offers the user a range of Components, Styles and Customisations. Customisations come with the introduction of SASS, like the other frameworks mentioned in this article, allowing for quick changes to your websites design.
Positives:
- Made by Google, so it is as close as possible to 'Orthodox' Material Design principles
- Optimised for cross-device support
- Aesthetically pleasing animations
- SASS Support
- Not dependant on Javascript
Negatives:
- Hasn't been updated since 2017
- There have been quite a few bugs reported since the last update
- You'll have to overwrite a sizable amount of CSS to customise elements
- Material Design community appears to have shifted away from this framework
3) MUICSS
MUI is an extremely light-weight framework built to comply with Google's Material Design princples, designed from the ground-up with loading-times in mind. This framework is very easy to get your head around and has a large community following. This framework does not come with many disadvantages, due to the size, however the community is nowhere near as large as the one behind Materialize or MDL. MUI is receiving consistent and valuable updates as well as constant support for those who need it on their Github, improving development speeds tenfold.
Positives:
- No external dependencies
- Very lightweight (12kb minified)
- Shares the same grid-system as bootstrap
- Easily customisable with SASS
- Amazing performance due to simplicity of pre-determined animations
- Actively being updated (As of writing this the most recent update is 03/04/18)
Negatives:
- Most 'vital' features require Javascript to use
Each framework has their own little quirks and reasons for use, but like any application they all have some downsides. Luckily you can't go too wrong with any of them - it all boils down to personal preference.
Here at SIGMA, we've decided to use MaterializeCSS. It was a tough choice to make, but we eventually came to this conclusion due to it offering the widest variety of elements and works very well with images. There are some great pre-bundled Javascript elements too, such as a carousel and image 'slider', along with drop-down menus and a swipe-friendly mobile menu that looks great right out of the box.
Having been recently re-written to not rely on jQuery, Materialize has become more light-weight but the learning curve for those not used to native Javascript syntax could be steep. Thankfully, the documentation clears up most of the questions that you may have to ask. Most common issues have already been reported and are actively being investigated, thanks to the active Github community.
Conclusion / TL;DR
To ensure the longevity of your website you should back a framework that is actively being contributed to. Github activity and contributions should help you decide what framework you're going to use for your future website. If you're working on a larger project, Materialize is the one for you. For smaller projects, you might want to consider MUI or MDL as a more light-weight alternative.
If you're got a small project or are a stickler for the rules then Material Design Lite is a fine choice. MUICSS should not be overlooked though. It's a brilliant framework and at only 12KB in size it's quite astonishing! MUI would be ideal for simple websites that just want the aesthetics of a Material Design website.
Each of the frameworks have their own advantages but have a lot in common, so everyone should be able to find something that gives them what they need. Perhaps unsurprisingly, it boils down to personal preference. We enjoy the little perks that Materialize offers, with features that you're sure to use somewhere down the line, and this gives it the edge over the others.
If you’re looking for a plug-and-play framework that's easy to get your head around, receives frequent updates and just over all looks better than the rest, then Materialize is for you!
30 April 2018