Building with blocks

Building with blocks

Apr 01 2016 | by TIM PURSLOW

Building with blocks

Modules, Components, Patterns, call them what you like, are becoming the go to model for designing, building and maintaining robust, flexible, on-brand web projects. It has been coming for a while now in one form or another (from a design perspective, things like Style Tiles have been kicked around for a bit), but now many bigger organisations have begun publishing style and pattern guides publicly and some excellent tools and methodologies have emerged, so it is time for it to go mainstream.

Content editors

For a content editor working in a content management system, having a good set of content and layout modules is like having a box of lego bricks. There are few key items that can be used everywhere, but there are also loads of smaller interesting bits that can solve almost any layout problem. All of these items are designed as part of the same system, so you can be sure that if they are used wisely, they will fit together to make a seamless whole.


For a front end developer, the pattern based approach means building code in logical chunks helps them to build easily maintainable, portable and extensible code. Choosing a good methodology and sticking to it means that each unit is free from dependencies. If a block needs to change it can change based on modifiers attached to it, rather than the context it is in. There should, therefore, be fewer surprises when a block is used in a context that it hasn’t been seen in before.

Removing dependencies on layout elements has the added benefit that if layout requirements change or new possibilities become available as browsers implement new standards*, the components will continue to be useful. This is important as they will often have the greatest implementation overhead in a CMS. They are tightly integrated into the system with editorial controls, options, modifiers and rules and are expensive to rebuild en masse.

Site owners

For a site owner it means lower costs when a new product or message requires a fresh layout to present it. Or if a new site or microsite is built, blocks of html can be lifted from the original site and the associated css can be extracted without serious mining and consequent rewriting to make it work outside the context it was originally designed for.

Everyone’s a winner.

New ways of working

The shift towards pattern based building and designing, alongside the requirement for site layouts to be responsive in order to survive in the modern multi-device landscape, means that we have to review the way in which we ‘do’ a web project.

Building modularly lends itself to a more agile and iterative way of working where solutions are arrived at through working with the designs in a live environment. This makes static mockups less important as a project deliverable as very soon they will be replaced by prototypes that can be viewed, reviewed and worked on in the environment where they will live.

Once the design has been moved into code it is available to see and test in various different devices. Static mockups can give direction for how content may work best on these devices but designing and developing responsively is about choreographing the content in the spaces in between the screen sizes and aspect ratios that are represented on paper. There are only so many fixed layouts that can be designed - it is better to allocate budget to creating solutions collaboratively in the browser.

Presenting and cataloguing components to help with testing as well as helping content editors understand what is available to them can be an interesting problem. Fortunately individuals and organisations are working hard to keep pace with the new requirements. Pattern Lab by Brad Frost is great for building, testing and demonstrating production code, while Sketch, Invision and Adobe are all fighting to become the industry standard for graphical UI design. Keeping up with what is available and sorting the genuinely useful from the short-lived fads is a full time job.

Welcome to the new way of working with the web.

*Front end web development is going through another phase of fairly radical change. New layout standards are being introduced, offering new possibilities, providing solutions to layout problems that have bugged developers for years (without the need to resort to scripting) and offering coding and performance savings that have been the domain of third party add ons and preprocessors. Bring on flexbox, css grids, shapes and everything else. Coming to a browser near you very soon.