Material Has Upgraded
New Year New You
Material just got an upgrade. For the website ostensibly focused on design this website and the related libraries around it have been something of a mess. I haven’t mentioned it yet, but working with the Material style library is something of a chore. This is in-part because of rather poor documentation, incomplete features, and bad supplementary libraries — the Material icon library that the documentation points to is riddled with missing icons, and yet they still show up as if you’re the one that messed up when they’re not there.
You can’t rag too hard on a free MIT-licensed library, but it’s easy to when your competition is Bootstrap. And Bootstrap is also free.
Well, out with the old, in with the new: I decided to do some website work, and I wanted to add some new components to add some more life to my project. Lo, Google has updated the project’s site, and quite nicely; they’ve added the implementation documentation next to the rest of their content where they talk about the abstract.
If you’ve shopped around for style libraries, like you do, you’ll probably know that this is pretty common. Most software that wants to be used includes snippets of how to use it. Until quite recently Material.io decided to eschew this convention to instead make you pick which implementation you’re working on farther up the navigation tree, then try to percolate back down to where your desired documentation may lie.
To say the least, this design change is welcome. Previously besides having the think-pieces and the implementation in two totally disjoint places, you’d also have to play roulette with whether Google had decided to build the part of the Material Design spec for your platform. If you’re on Android, this wasn’t a big deal. If you were on other platforms (like web), you might climb up and down the web navigation to find that you’re out of luck.
Joyous New Year: it’s Finally Here
If you’ve been following Material Web Components (like me), you probably bemoaned the fact that
- half of the components were missing for web and
- the GitHub for the project had those components!
What gives? The short of it was that the folks at Google didn’t publish it. Chalk it up to caution, corporate policy, or forgetfulness (which believe me was most likely not the case: there’s a few spicy GitHub posts about that), it really meant that your options for getting the latest and greatest were either to grab the hottest changes off the repo (which is not always a great idea), or wait. Maybe not so compelling if you wanted to decide if your app should use the framework.
But now, we don’t have to wait any longer!
Some highlights
Version 9 basically adds a bunch of bug fixes, updates to a few components, and that’s about it. The biggest thing for me was the update to the website that lets you filter components by platform. This saves a lot of trouble when you’re browsing for components to fit your vision — now you can’t be disappointed from your dream of including the perfect UI element that isn’t supported on your platform! No more dream-buyer’s remorse (maybe), just don’t go window shopping for stuff you can’t use.
The components that did get some love was the banner, which seems to have gotten the most new stuff, checkboxes, progress indicators, sliders, and tooltips. From my reading, we’re not getting any new components, at least in the web version and that’s the version that I care the most about.
Still Plenty of Room for Improvement
If you look on the Material.io “what’s new” page here, you probably don’t see a hint of this happening. I’m not sure why this seems to be the case, but there’s a huge disconnect. Even checking the GitHub doesn’t give you a hint. It’s surreal seeing one of the big 4 failing to keep these things in sync. Functionality-wise, not much changed.
How would you know what changed, by the way? Well, you’d need to know what version you are on, and if you really wanted to know what’s happened you need to read the “CHANGELOG.” This isn’t what I’d call “user-friendly,” but it’s a lot better than nothing! None of this info is available on their website — you need to find their GitHub and dig up the release, and read the changelog.
I’d propose a few fixes:
Update the Website
The Material Design Website is pretty bad at telling you information about the library it’s focused on. For instance, the site doesn’t tell you any information about differences between versions of the library; the “What’s New” section of the website leaves off pretty much any mention of the tagged releases in Material. The site seems pretty static, even though this project is getting regular attention and code changes, it’s hard to see if that’s actually happening. The most recent blog post is from November 2020, but this release happened at the very end of December 2020.
The website doesn’t even match the changes in the repository that would correlate to it in the Material Design collection. The data on the site and the data in the repo are not linked at all, unless they’re doing some major feature flagging. I also don’t see any roadmaps, or plans; where is this project even going? Nowhere?
Material Design isn’t a communication library it’s a Design Paradigm, but the website isn’t designed to have a community of users — it’s designed for a community of designers. This is fine, but it’s strange to me that this platform isn’t being designed to explain the project side of Material, only the philosophy and specifications side of it.
Maybe this isn’t fair: there are platform / library-specific implementations for Material Design, like React and Angular. Their documentation websites tend to have the features I’m asking for here. But as far as I can tell this is the hub for the plain Web library, so I don’t think that’s really an excuse.
Indicate Versions
I like Python; it’s a really useful language that’s available almost everywhere. Python is a very readable language, and one of the things that I like most about writing it is the documentation. One reason why is that it’s well-organized, has many levels of detail (for the most part), and it’s got clear versioning. If you’re looking at the python page on the regular expression package, you can be sure that the documentation you’re looking at matches your version of Python, because at the top of the website is a drop-down with all the versions of Python available.
This kind of info isn’t available on Material: it’s not clear what version of Material the documentation is based on. Is it the most recent version? Is it the most recent version tagged for release? IS there a LTS version? Is it the one on the package listing — which package listing?
It’s a bit silly. Material even uses semantic versioning to indicate breaking changes to its interfaces which might be important to someone who is using the library. It’s obviously not important to the documentation however.
Implement Some Stuff
The web interface is sad. Point-in-case: Dividers. Seriously, Google can’t provide web users lines between stuff. Don’t look at the archive, if you want to feel real bad. The current list of partially implemented components got cut down. This is the real thing that makes Material such a chore to use. It’s not even a real style library.
Maybe it’s a sign of the times: Google’s recent decision to ruin their icons may be an indication that they’ve fired all of the design staff that were there. It certainly feels that way.
New Leaves?
I’ve written criticisms of the Material library in the past, and I don’t see this update being a revitalizing change; it’s an incremental step in the right direction. This doesn’t mark the pivotal point that makes this library the next Bootstrap, or Bulma. It simply makes it a more viable alternative.
The Strength of Material Design is it’s adoption (sometimes) by Google: so if you want to give off Google vibes, you have a path. I think the more helpful and powerful aspects are the project are the parts implemented by communities outside of the Material Design group, like the React, Vue, and Angular implementations.
If Material Design speaks to you or inspires you, you might find something you really enjoy here. If you need the most convenient, and ubiquitous styles and paradigms… you still might want to look elsewhere.