Using a modular approach when building websites saves time and money in the long term
More than 25 years have passed since the invention of The Web, when Tim Berners-Lee submitted a document to his boss called: “Information Management: A proposal“. During all these years, people have come up with different techniques to design and build websites, and interestingly enough, all based in the same standards.
One of the latest approaches is modular design, which powered by the way responsive design works, goes against the idea of building websites page by page and forces you to think in terms of modules, where each of them is independent from the other. Once you got your modules, you can reuse them, combine them together to form pages. Just like LEGO.
The process is simple. Design a bunch of pages, extract common, reusable components into a library and then reuse. When a new page is needed, design it as a whole, and then analyse it, look for components that could be replaced with the ones you have in the library. The ones that don’t have a replacement will be added as new components.
But designing independent components is not easy. Making sure each of them plays well with the others, keeping a balanced design as a whole sounds impossible! Designers say you would loose control over the big picture. Fortunately, Alla Kholmatova has been working on this and shared some tips at the last Smashing Conference:
- When creating a new page, don’t just go and grab some components, trying to put them together. Design the page as a whole first, and then identify possible replacements.
- Pack components into kits. Some introduce content (headers and hero elements) which could go in a “Intro Kit” and others used as an ending point (footer, separators, etc) would fit in a “Outer kit”. This way you won’t get lost in the component universe and it will be very straightforward to see the possibilities for a particular design.
- Always follow the same simple rule to name your components. Try to use function-related more than content-related naming, given the beauty of modules is to reuse them in different contexts.
- Every component must have a name, no matter how weird it may sound. Don’t refer to a component as “that one with the line and the icon in the centre” though, make it short and content-agnostic.
It may seem like designing components instead of pages could take more time, and it does, at the beginning. But when a new page needs to be designed, you’ll be able to reuse these components, which will save you time. This applies particularly to frontend development, where a chunk of HTML and CSS is much easier to reuse than to rebuild. It is also much easier to think about timescales in terms of components instead of pages, since when they are reusable, they essentially take no time to spread across pages.
For the same reason, clients do very much appreciate modular design. Presenting components as features with optional enhancements, a client can now choose to reuse components that are already on the site with a minimal impact on budget or go for that new fancy component without affecting the rest of the site.
I still find fascinating that none of these great techniques have been invented, but more like discovered. It’s exciting to think what other stuff is out there, right in front of our faces, that we haven’t discovered yet.