The start of new a year brings reflection and prediction. Looking back over the past few years, we’ve seen a shift in the way we approach designing and developing websites; we’re no longer designing collections of pages but systems of components. Looking forward, as more of the Web Components specification gets implemented by browser vendors, we expect 2018 to see the continued rise of design systems.
The web is a constantly-evolving medium. As the scale and complexity of our digital products increases, so to does the need to change our approach towards designing and building them.
“Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.”
– Anna Debenham, @anna_debenham
Design systems are not a brand new concept. The idea of breaking down a design into a collection of reusable components has steadily evolved over recent years. During this time several methodologies have been coined including Atomic Design and Style Guide Driven Development, and the output of this process has been given many names: Pattern Library, Style Guide and Design Language to name a few. These approaches and outcomes all have their variances, but they all share one key concept: modular design and development.
Thinking modular keeps design consistent. A component can appear anywhere across multiple pages of a website and even across multiple websites and other digital properties. Wherever it appears, its design and behaviour is the same.
Keeping things consistent increases familiarity; making the interface more predictable makes it easier to understand and quicker to use. All resulting in a better user experience.
As you build up your design system, ongoing development of new pages and user flows gets quicker and quicker.
Building with components means you can test them individually to ensure all your accessibility, usability and coding best practices are implemented at the component level.
Into the browser
Enter Web Components
Web Components is the collective term given to four new specifications to extend the web platform. Together, they will allow us to create new, reusable, encapsulated components to use on web pages and applications.
Here’s a brief overview of the four new specs:
For those who are familiar with a bit of HTML, you’ll know some of the existing tags such as <p> for paragraph, <h1> for Heading 1 and <button> for… you get it. The Custom Elements specification defines a method to extend the language and create our own new tags.
This has been used by browser vendors for years. If you consider the <video> element, the code we write to display a video is fairly short and concise:
<video controls="controls" width="320" height="240"> <source src="movie.mp4" type="video/mp4" /> </video>
What actually gets rendered on the page:
We see the video, but we also get a bunch of other elements like a play button and progress indicator.
Where do these elements live? Hidden away in the Shadow DOM.
HTML Templates are like the blueprint for our components. They allow us to declare a fragment of reusable HTML that gets ignored by the browser until we clone it and ‘stamp’ it out on the page.
HTML Imports allow us to import HTML files into other HTML files. This means we can bundle up our components into individual files and only import them as and when we need them.
Bringing it all together
These 4 new specifications are intended to be used in conjunction to give us a complete solution to developing our components. Declare a new Custom Element, define its markup and styles in a HTML Template, clone that template into the Shadow DOM when an instance of that element is created and bundle the whole lot up into a single file which can be included on the page with a HTML import.
A match made in heaven
As more of the Web Components specification gets implemented by browser vendors, we expect to see an increased shift towards modular design and development. 2018 could see the rise of design systems; many in-house and product teams are already discovering the benefits of this approach and we would welcome the introduction of this agency side.