You’ve heard that old chestnut about giving a man a fish. You don’t want to be given a fish, or a website, that serves your purposes right now, but quickly becomes a rotten carcass. You want to be taught how to fish.
Actually, you already know how to fish, or how to run your business. What you do need however, is a finely crafted fishing rod with which to fish. You need it to be lightweight, usable and versatile, so you can take it wherever the fishes are and adapt to changing environmental factors.
We’re talking about websites that don’t paint you into a corner; websites based on blocks, not templates.
Why should you care about modular design, or atomic design, if you prefer? You’re ready to get cracking, dreaming up some dazzling new pages for your dazzling new website. Great. The problem is that during the design and development stage, you shouldn’t direct too much focus on finished pages, or entire cohesive templates, composed towards satisfying some specific goal. Goals change, as do our approaches to achieving them. A website should be a living, breathing thing, pliable enough to invite constant evolution in response to feedback (including from analytics data).
So you need to get both a little more granular and a little more general at the same time. The design should put emphasis on a harmonious and robust ecosystem of standalone, interchangeable components. Components that allow for almost countless layouts, while retaining a functional and aesthetic coherence.
The #1 reason most marketers hate their CMS platform is because they simply can’t control the items they need to. Today’s digital marketers are required to make daily changes to their website based on analytics. They will rotate content offers, landing pages, and other mechanisms to drive conversions. Websites that are poorly configured make this job very difficult. Marketers simply can’t wait days or weeks for a new landing page or a new form. Time is money.
https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/
A vision that supports such editorial flexibility, a modular ecosystem of reusable components, also empowers the dev team to work in a more efficient way. This has positive implications for the project in terms of performance optimisation. There are fewer opportunities to gradually, unwittingly weave a tangled web of redundant code. A modular system is easier to parse and audit for redundancies and potential savings.
Closely related are the positive implications for ongoing maintainability. The more independence each component has, the less chance of the whole edifice crumbling when anything changes, whether as the result of a new feature or just a simple software update. Over time, enhancements can be continuously delivered through neatly defined tasks that don’t require quite such a deep understanding of, and consideration for, the full codebase.
The world’s favourite CMS has made great strides in supporting this kind of modular system with Gutenberg, its new block editor. All content elements, right down to a humble paragraph of text, are individual blocks which you can freely drag and drop to compose your page. This is great, but reaping the rewards available through Gutenberg is not automatic just because it’s now the default editor. It takes a little work to fully exploit its potential, and that doesn’t only mean extra work for the developers, learning a new approach and a deeper tech stack. It means that there’s a shift in perspective required from the outset of a project if you want to get the most out of today’s WordPress, and unless everyone involved understands and buys-in to a modular design approach, you won’t really allow the block editor to lead the dance. You’ll just drag it listlessly around a sticky old floor. That’s not going to win you any glitterballs.
Many development agencies will pay lip-service to Gutenberg, but still aren’t treating it as a first-class citizen. They might provide partial support to allow its use in a simple blog section of a website, but elsewhere it’s business as usual. This is a missed opportunity. Gutenberg should be the linchpin around which a modern WordPress project revolves.
Are you sold? Great! Let’s look at some of the things that the design, development, and marketing teams will need to pay extra attention to for best results.
If you select any two blocks at random, is there anything about their respective styling that creates visual dissonance when they are placed together? Suddenly what works well in other contexts might fall apart in this specific combination; one or both blocks look squished, or poorly aligned, or have clunky colour contrast, for example. Sometimes components will require simple optional style variations for complete versatility – this must be accounted for at the design stage.
Likewise, we must consider the context of the user’s device. Are there any potential gotchas about the way that a combination of different blocks rearrange themselves for a mobile layout which could cause a problem? The inherent flexibility of a modular system can demand that a little extra rigour goes into the responsive design.
Careful thought needs to go into creating a fluid visual rhythm between all these individual components. The designer’s challenge is to figure out how to keep them from interfering with each other, while maintaining a feeling of spatial integration rather than rigid separation, such that they speak a harmonious language. And harmony is more pleasing when it includes melodic accents, rather than a safe but monotonous drone.
With great power comes great responsibility! The old fixed template based approach led content editors down a well trodden path in the form of rigid, pre-prescribed fields. The developers can easily ensure that the website remains doggedly faithful to the original design files. That is not without any advantages – you’d be forgiven for questioning whether a Gutenberg powered site provides too much freedom for editors. Is there too much to think about now, will I have option paralysis, will I have opportunities to make poor or inconsistent decisions when composing content? Think I can’t mess this up? Hold my beer…
Happily, much of this has already been addressed by Gutenberg’s intuitive interface. The block editor emphasises visual consistency between back- and front-end appearance, as well as the principle of direct manipulation, with settings and controls found in context. The rest comes back to the design and development of the system being rigorous enough that the user can’t go wrong. As we’ve noted, any combination of blocks should work visually and functionally.
Where there are special cases, such as a type of page that should always have certain blocks included, and never others, there are methods available to the developer to accommodate this. Features like reusable blocks, block patterns, and block templates. Features that bring the more useful aspects of the old template approach into this contemporary ecosystem. You can decide where the right balance between editorial freedom and helpful hand-holding lies for you, so that the finished product fits your needs.
Going full-Gutenberg demands a new level of expertise which is not commonplace within the otherwise populous world of WordPress development. Your dev team will need to have already invested plenty of energy into exploring this new territory, rather than a mere tentative dip of the toe (sorry to bring developers’ toes into it).
The changes to the WordPress paradigm that the block editor has ushered in have been very significant, so it’s understandable that many agencies won’t have managed to use it in anger and truly learn it yet. We all want to remove risk from our clients by avoiding uncertainty and getting projects done through tried-and-true methods. However, there are some who, whether through forward-thinking dynamism, prudent foresight, or simple geeky FOMO, were all about the ‘Berg since day one. They’ve had a couple of years now to develop their expertise alongside the rapid development of the Gutenberg project itself. Growing pains now behind them, they are reaping the rewards of this investment, as they can deliver a much higher caliber product. They’re the ones you’re looking for.
If you want to learn more about the relative merits of Gutenberg, you can check out a recent blog post where we discuss the advantages it has over other content management solutions.
Purr uses cookies
We use cookies to provide you with the best experience and improve our site. You can find out more in our Privacy Policy