The above text is the intro to Disneys “Tron: Legacy” from 2010. Spoken by Jeff Bridges and set to the fantastic score produced by Daft Punk it, while a bit cheesy, creates the sense of discovering something new. Something spectacular.
Not unlike the feeling I had when seeing the uSky grid property editor for the very first time (and also when watching it a 2nd, 3rd and 4th time). It came completely out of left field, just popped up in a well produced youtube video in March 2014 by the Spanish web agency Lecoati. It showed a completely new way of working with content in Umbraco.
Storytelling, the digital frontier
At that time I was finishing up my internship at Umbraco and getting ready to do my final school project, a paper on the “Editor experience” in CMS’s. “Content is King” and “Storytelling” was all the rage. By that I mean it was what we were taught in school and it was all over the marketing blogs, so it was probably “all the rage” a couple of years earlier.
I was fascinated with how CMS’s handled the coupling between the content input (in the backend) and the storytelling output (the frontend). When these two things connect something magical happens where editors feel right at home and do not need much in the way of instructions. What Antoine (from Lecoati) had made showed a glimpse of something that, when content was entered, actually showed the the story that was told on the page. It was not just a set of vertically aligned input fields.
What did they look like?
When I started my internship there were plans for a grid-like editor but needless to say plans changed when the video from Lecoati hit.
To make a long story a little less long, the new property editor from Lecoati was added to the core and presented at Codegarden ‘14. It did change quite a lot from the initial video, which in many ways was a pagebuilder and required some frontend skills to create content.
In the following months leading up to the release of Umbraco 7.2 (which included Grid Layouts) we spent a lot of time refining the experience. Many of the changes were informed by feedback from the alpha release and later on by tests that were held at the HQ.The changes made were mostly focused on two things: Setting up the data type and the editing experience.
Some examples of this would be that you could customize the built in editor’s input and output and restrict rows/cells to only be selectable in places where it made sense from a design/layout/content point of view. For the editing experience the entire UI was changed into something more lightweight that would automagically display the various options available when needed otherwise focus completely on the content.
I kept dreaming of a world, I thought I would never see...
Now, a little over a year later, Grid Layouts has seen widespread adoption. Our vision of Grid Layouts as something that would replace the richtext editor as a layout tool (as showcased in the Fanoe starter kit) doesn’t seem to have gained quite the amount of traction as we had hoped.
What HAS worked to a greater extent is the Grid as a tool to handle multi column layouts, often as a way to insert widgets (be it macros or clever custom Grid Editors). I would like to stress that while don’t have insight of how most Grid Layouts are implemented there have been numerous ways for us to gather intel on the subject:
A number of packages adding features has seen the light of day such as Le Blender, Le Painter and Doc Type Grid editor. These wonderful community contributions along with involved forum discussions and talks with partners and developers implementing Grid Layouts has given us a great deal of feedback. Some has resulted in minor updates and bug fixes along the way and others have been duly noted for the next big overhaul.
And then… One day… Something delightful happened!
What better time to start work on Grid Layouts v2 then on its 1 year birthday (which would be December 4th but we can’t wait around for that). I spent the last month or so gathering and organising as much feedback as possible both through conversations with various community members and partners and by going through the issue tracker and reading old forum posts.
As luck would have it the Umbraco UK festival was held the week before we planned to start overhauling on Grid Layouts. This was a great opportunity to get into some discussions on the subject, hopefully fueled by the planned session “The Grid: Structure, Settings, Editors and Use Cases” by Marc Stöcker from Mindrevolution. I knew Herr Stöcker had opinions on Grid Layouts, he held a session at last years UK festival and has been actively discussing it on both the forum and on twitter.
What I think most people expected, I know I did to some degree, was a show and tell of how Mindrevolution had used the Grid Layouts based on some cases and then list of things he would like to see fixed in the future. Oh boy were we wrong.
What Marc had prepared was something quite unique. An hour-long, really well prepared, round of constructive criticism. No, that is actually doing it disservice, it was constructive feedback. Pinpointing problems based on real life cases, showing examples and last but not least actually coming up with suggestions for solutions. All the while underlining why he uses Grid Layouts (quote: “It’s and awesome thing … It’s something we needed for Umbraco and I’m glad it’s finally there") and sprinkling in pro tips, do’s and don’ts and best practise advice.
I for one have never receive feedback in this way before, and it was a truly wonderful way to give back to both the community and the core and I encourage everyone to watch the session.
I got in…
Suffice to say, work has started on the next iteration of Grid Layouts and we have plenty of things to tackle and wonderful ideas to implement. The way we are approaching it is to give the editing experience a complete overhaul, providing a better separation of content, touch enabled editing and better indication of what has been added where. We’re trying to get as much as possible ready for 7.4 but the more substantial changes (from a developer standpoint) will have to wait for future releases.
Just know that as everything in Umbraco (except for some legacy things), Grid Layouts is alive and well and evolving. We can’t wait to show what you what we’ve done and to get even more feedback. The passionate discussions, packages, meetups and so forth all help us grow as a community in general and Umbraco as a project specifically.
PS.: The grid reconfigured :)