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:

Ikea storage

Photo credit: Daniel Farmer (Ikea.com)

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.

Washington map

Photo credit: L’Enfant Plan reproduction from the Library of Congress website

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.

Scholl website
The shift from desktop to mobile viewings has also spurred an emphasis on responsive pages. The grid enables non-technical users to easily add in CSS classes to help with mobile responsiveness. In this example page below, we can see that the image alternates from left to right in desktop view. A CSS class has been added to alternating grids in the CMS so that the image always appears on top of the rich text in mobile view. Using dynamic fields allows the user to better engage with page content.
Scholl website

Had it not been for working in the content grid at The Cogworks in conjunction with reading The Life Changing Magic of Tidying Up, you would have been hard pressed to find me shopping for storage solutions after work. But here I am now - a living, breathing, disciple of the grid.

Counterintuitively, I believe that constraints can actually drive creativity. At work, there are endless opportunities to explore and push the functionalities of the grid. If the grid serves as a canon for design, then these day to day explorations pave the way to content enlightenment.