The Zen of the Grid
My life changed after reading Marie Kondo’s bestseller, The Life-Changing Magic of Tidying: A simple, effective way to banish clutter forever. On a scale of Japanese zen to TV show hoarder, I aspire to lean towards the minimalist end. Just as the book changed the way that I look at our physical space and our relationship with the objects around us, the Content Grid in the Umbraco CMS has altered the way that I approach digital content and the way we communicate online as part of The Cogworks Content Team.
From a design perspective, using columns and rows to organise content is an intuitive idea as we regularly see people organising (or attempting to organise) their physical spaces like this:
If we reach a little bit further back in history, we can see pervasive examples of how the grid fundamentally framed how we interact with people and places. Here is the layout of my beloved hometown of Washington D.C. designed by Pierre L’Enfant in 1792.
Transferring our love of the grid from the physical environment to a virtual space seems like a natural progression. The Umbraco CMS has undergone several iterations of the grid concept.
When I first started working at The Cogworks, I worked with Umbraco Version 6.1.6 where we added a range of fields and tabs in the CMS in order to define different content within a page. This was a long and tedious process; not only was it difficult for new content editors to navigate, it also left a lot of room for errors during content population.
Luckily, the Content Grid data type was added to Umbraco Version 7.2 in 2014 and showcased at our annual meetings of the minds, The Umbraco UK Festival. Umbraco HQ champions Per Ploug and Rune Hem Strand gave this convincing talk on why we should use a grid layout.
As a Content Project Manager here at The Cogworks, overseeing multi-language rollouts, I can attest to the grid’s selling points. The grid enables my team to rapidly duplicate the design vision by setting up the foundational structure of how the content is organised on each page, but gives enough flexibility for us to customize the specific content to each country’s copy and imagery. At the end of the day, the grid is a visual tool that is intuitive for non-technical users.
Below, you can see examples of how we used the Content Grid to build a campaign for on of our clients - Scholl. While the actual content differs between the German and the French campaign pages, the layout and the brand narrative easily carries across markets - ensuring brand consistency.
Within the CMS, the content convention set up by creating the first grid page (what we call the Master) enables our editors to conveniently customise each subsequent campaign even as non-speakers of these languages.