Modular design. It's a concept that we've been applying to our website design process for a couple of years now. Ultimately, it makes a lot of sense, from several different perspectives.
Traditional workflows have tended to approach design and development from the position of individual page templates. Many content management systems (CMS) actively reinforce this approach, relying on specific page templates to frame and display content on the front-end. From a purely technical perspective, there are some legitimate reasons for doing this, mostly related to establishing content-to-output relationships. These relationships are a driving factor behind the architectures of most popular CMS's, so we certainly don't advocate eliminating them.
The issue that we often encounter, however, is that this template-based architecture often bleeds over into our design methodologies. When there's a tendency to equate a unique page type with a specific template, our design thinking can be influenced in such a way that we treat each page as its own siloed entity. Sometimes, this can be the right approach, but more often than not, it can lead to a final product that is too rigid and inflexible.
Enter modular design.
The concept is simple: instead of building a verbose library of static page templates, we design and develop a flexible collection of modular blocks. Content editors can add, edit, remove and even re-order these modules on different pages. When properly executed, the result is an environment where content dictates layout and structure, as opposed to the inverse (as is often the case with purely template driven websites).
It means that the content regions of the about page, contact page and even specific landing pages can all be structured very differently, while still using the same basic template.
It's been a game changer for us. With that in mind, let's take a deeper dive into some of the specific benefits of this modular approach.
Patterns not Pages
One of the frustrating aspects of designing specific page templates can be an unpleasant sense of déjà vu. Different pages with differing purposes can still include comparable forms of content that require similar treatment and layout. Designing each of these pages as a unique template can lead to repeated and redundant work—or worse yet, an entirely different way to treat the same type of content (a great way to get into your developer's bad books).
With a modular approach, we're no longer concerned with templates. Instead, we can take the time to focus on patterns. Instead of thinking about the content of a specific page, we can start asking more holistic questions:
- What types of content do we need throughout the entire site?
- What common patterns do we see emerging?
- How can we create meaningful design choices based on these patterns?
When we start asking questions like these, we can usually distill our answers into a series of content blocks, each uniquely designed to meet the needs of a specific pattern. These blocks become the foundations of our modules.
Keeping it DRY
Repetition can be frustrating in design; in development, it's borderline criminal (we jest, more or less). That's why one of the oft-referenced concepts in development circles is the DRY principle. This snappy little acronym stands for Don't Repeat Yourself and it's sage advice.
Wherever possible, developers aim to reduce code, factoring it down into reusable blocks. It's an art that can often lead to some strange abstractions, but by now the fundamental principle should be familiar.
It's no wonder that a modular approach can be a joyfully liberating experience for developers. It allows us to build the module once, make it available to content editors via the CMS interface and move on to the next module.
Fast. Efficient. Elegant.
The modular approach also makes maintenance a dream. Because the module exists as a single entity, updates, fixes and enhancements can be applied once, with the changes cascading across the entire site. Even better, we can also deploy new modules to the overall library, making them available for immediate use without impacting the structure of any existing pages.
Flex It
Now, if you think that modules might be too restrictive, resulting in repetitive pages that all look the same—think again!
Let's talk about configurations.
We add modules to pages via the CMS admin. As such, they rely on user input. At first glance, maybe you envision this including content like titles, paragraph text, images and calls to action. These are all legitimate and viable forms of content, but modules can accept so much more! Dropdowns, checkboxes and other inputs can provide an array of configuration options. These options can then be used to control the layout, appearance and even functionality of the module as it appears on the front-end of the website.
Creative use of configurations can supercharge a module with a remarkable degree of flexibility. But be warned! In the words of Uncle Ben: "With great power, comes great responsibility." Too many configuration options can make content-entry a tedious process, and unless thoroughly tested, can sometimes lead to unpredictable results.
It Just Makes Sense
From our perspective, a modular approach to web design just makes sense. It frees our designers to take a more holistic approach to their work and allows our developers to write clean, maintainable code.
But most importantly, it provides our clients with the flexibility they need to build beautiful pages that showcase valuable, user-centric content, rather than trying to shoehorn that content into rigid and inflexible templates.
And that makes sense for everyone.