Taking Inspiration from the Webflow CMS (yes this is about Plone)

Webflow just released their CMS and it's slick. There are lessons for Plone and other CMS communities here. In case you didn't know who Webflow's target audience is you might want to watch this video.

I love this promotional video. Especially when he says that Webflow creates "Clean compliant HTML and CSS that I will NEVER EVER look at". That's the point, Webflow aims to free designers from depending on coders.

In achieving this goal the Webflow.com team does one thing very well, user interface (UI) and user experience (UX) design (maybe that's two things). The screen below is an example of how they manage dynamic data.

I've labelled what I think are the key aspects that drive this interface, (1) A clear link to an introductory tutorial especially important for first timers, but out of the way enough that regular users can just skip over it, (2) at the top of the next panel is the instruction to "Create Collection" this is effectively the "save" button, if you want to just accept the defaults, click this and you're done. (3) Some ready made "Collection Templates"  with predefined fields, you can select one of these and then further customize it to your liking. (4) "CMS Preview", a preview of the form, as it will be experienced by an editor of the site.

Collections & Collection templates... where have I seen this before?

The interface isn't just about being clean or slick, there is very purposeful choice of language. While many other platforms have gone with the idea of content types, they've made the underpinning concept "Collections", the whole focus is on creating collections of data such as recipes, events or blog posts and then displaying the individual items "Collection templates" or "Dynamic Lists".

In this paradigm what you might call a content type in a CMS like Plone or Drupal is now referred to as a "Collection template", which makes much more sense in the context of the the Webflow universe.

The interface also flows logically based on the idea of defining a "Collection" then a corresponding "Collection Template". Add to this logical flow very obvious visual cues and you have the makings of a beautiful interface.

Upon further reflection I realized that I had seen this somewhere before. In database programs like Filemaker Pro and Access. What Webflow has done is place the design firmly in the forefront. So a "Collection" is analogous to a database table, the "Collection templates" are associated with underlying forms which allow a user to add new records, finally custom display of the data is controlled visually through the same "Collection Templates" to make it display things the way we want. To top it off, an otherwise ordinary static page can also be made dynamic by embedding a "Dynamic List" which is effectively a feed from the table (uhm) collection.

Designer Friendly

It's clear that they've put a lot of thought into making it designer friendly.

I think the use of the term "Collection Template" instead of "Content Type" is a stroke of genius. It fits nicely into the visual designer paradigm and emphasizes the visual display of the content. Of course you'll need to define the fields of your content but that action is towards a specific end, templates are things that a designer interacts with all the time, by qualifying the name as a "Collection Template" there is no confusion with the other kinds of templates used in Webflow.

If you want to see where this really shines take a look at this video that explores Webflow Dynamic Lists:

After interacting with the Webflow system and then going back to Plone's dexterity content type editor I think there's room for UX improvement. The truth is Plone's Dexterity approach is far more capable and extensible but isn't as friendly for the visually oriented. The Webflow CMS wins in one important category, the ability to link a custom design process with real world dynamic content in a visual and easy way.

So now we have a really nice bicycle

The Webflow CMS is now a very slick bicycle, lightweight and fun to use. By contrast, your average CMS is more like an ugly car or helicopter, very capable but far less fun to use. Complexity is often a result of additional features and what we're witnessing with Webflow vs other CMSes is a slicker less complex ( though less feature rich) system when compared to older more capable but less slick CMSes. From the perspective of the Plone CMS I'd say we have a helicopter, not as slick as the Webflow bicycle but more powerful. Calling Plone an ugly helicopter is not meant to discourage the Plone team, but the fact is, while a lot of improvement has happened, there's a lot of UX work that will need to happen to bring the Plone experience on par with the Webflow experience, but we certainly have the tools make it happen. One thing I'm keeping my eyes on is the the newly emerging Mosaic drag and drop layout editor. Here's a video of Mosaic in action:

So why don't I just use Webflow by itself? For really small projects I may, but there are some limitations to committing to a bicycle, even a slick one. I consider Plone to be far more powerful and it has a mature ecosystem of add-ons, I can implement custom authentication for example to integrate it as an intranet solution or use it for file management, just to name a few things.

I suspect that this won't matter much for Webflow's core audience (the visual designers who want to ditch the coders), they will definitely adopt the new Webflow CMS.

As for me, my workflow is a mixture of Webflow for developing the design and interactions to generate clean compliant HTML and CSS. I then make my static Webflow site dynamic with Plone. This has worked beautifully for me over the past 2 and half years. Next on my agenda is to refining our tools and processes to make it even simpler for the visual designers that work with us to prepare layouts that work seamlessly with Plone.