The CMS UI Database

Images, descriptions, and commentary of CMS interfaces.

There are 23 UIs on this site.

Interwoven Teamsite Branches

Interwoven Teamsite had an extremely complex method of managing content publication heirarchy. The content repository could be segmented into branches and sub-branches. A branch would have one Staging area, one or more Editions and one or more Workareas.

Drupal's Query Builder, Circa 2008

In the previous post, a quick tour of Drupal’s earliest click-and-drag SQL query building tool turned into a history of the CMS’s early years. Drupal’s 4.7 and 5.0 releases (shipping in 2006 and 2007, respectively) were average launches in terms of core functionality and editorial UX, but the Views and CCK plugins were fueling a period of rapid evolution in the user and developer communities.

Drupal's Query Builder, Circa 2011

The past two posts have looked at the evolution of a particular administration screen in Drupal — the Views query-builder. From its birth as a third-party plugin during the early years of Drupal’s evolution, to its current role as a foundation Drupal site architecture, it’s gone through quite a few iterations.

Drupal's Query Builder, Circa 2006

In late 2005, Mambo (and its fork, Joomla!) dominated open-source content management; Wordpress had yet to dethrone Movable Type, and the “social” web was still ruled by community news portals and discussion boards. Drupal was an up-and-comer with promising ideas about flexible content organization, but few killer features to make it stand out in head to head evaluations.

Direct Manipulation with Medium.com

The magic of Medium is that it provides a one-size-fits-all approach to blogging, and polishes that experience to a sheen. Users have no control over the visual styling of their content beyond simple text formatting and image alignment; there is one and only one type of content; customization of presentation is impossible. It’s closer to a simple WYSIWYG word processor than a traditional web publishing tool.

Sitecore XPath Builder

One of the defining characteristics of a Content Management System (in my humble opinion) is the ability to actually manage large amounts of content. In the case of Sitecore, there are some underlying architectural niceties which make this task far easier. The biggest one is the fact that there is a hierarchical tree structure, which is exposed via an API which easily allows for relationship-based querying. One of the ways this hierarchy is exposed is via XPATH. Because XPATH is an extremely powerful language for querying, it’s also very complex to ensure you have built your queries correctly, so Sitecore provided a tool to help with this task.

Contentful Content Model editing

Content modeling is a foundational task of any item-based CMS (as opposed to a “page based” CMS). The establishing of “atomic” units of content, their rules, and how they are related to each other is a starting block for any implementation.

Umbraco Health Check

When you are managing a complex CMS instance, this is a really clever way to provide an super user / administrator a quick overview of which issues they potentially are facing, along with suggestions on how they can be fixed.

Umbraco Grid Editor

A popular advanced data type in many CMSs is a flexible grid/area, where other components can easily be placed. Some systems will have just have an advanced HTML editor where all content can go in - but more and more will want to keep content structured as much as possible.

Movable Type v2 Editing Interface

Movable Type is a venerable blogging platform dating from 2001. It’s one of the oldest CMSs under continuous development. This image is the earliest UI that most people associate with the product. The v2 released coincided with the early heydey of blogging. Before WordPress showed up and took the blogging platform crown, this UI is what most early bloggers worked with.

Netlify CMS Post Editing Form

Static site generators — especially ones that operate on a relatively simple file-backed content store full of Markdown or YAML documents — exploded in popularity as the complexity of enterprise class CMSs rose.

Sitecore Content Tree

One of the main concepts in Sitecore (and many other CMS systems) is the concept of the hierarchical content tree. The concept of hierarchy is an important form of metadata, allowing for a clear method of categorizing content.

Squarespace Page Editing

Squarespace has an on-page editing system with a little flyout menu for non-visual properties. You can adjust values in it, and the page changes in realtime in the background.

Craft CMS Entry Copying

CraftCMS has a “site” metaphor for localization – you create a new site for different languages (or for any variation, really, but commonly for languages). When you create content, you have several options of how it gets propogated among sites.

Episerver Project Workspace

Episerver has “Projects,” which are a way to roll-up multiple content changes and collaborate on them. You can drag content into the project (or just be “in” the project as you edit; they get added automatically). Then you can discuss the changes – either individually, or as a whole – and mass publish (or schedule) the entire thing when everything is ready to publish.

Sitecore Source Property

The Sitecore source property is used in an endless number of contexts within Sitecore. In this example, it’s a property on the Multilist field “UpComingNews”. It’s one of my favourite “clever” bits of Sitecore in that it can take an amazing number of formats. You can choose a node in the Content Tree, or use a complex XPath or search query, or in this case, it actually references a custom class.

Sitecore Broken Links warning dialog

Even in the era of Content Management (emphasis on the “management”) broken links or references continue to plague content authors. Sitecore is kind enough to provide a “links database” which is a specialized search index that handles all sorts of management tasks, but also will have a record of incoming references to a content item. If that item is about to be deleted, the user is prompted and given a number of options of how to alter or ignore all the incoming links to that item before being allowed to delete it.

WordPress Posts dashboard

In WordPress, one of the most common approaches for creating content is to make a Post. This is a great example of a CMS system that has a “bias” in that the interface is very much built around the task of creating content for publishing blog entries. In this case, the interface and the paradigms chosen by the product team are driven around meeting that publishing use case above all.

Interwoven Teamsite Workflow Modeler

Interwoven Teamsite had an extremely powerful (and complex) workflow engine, which has (to my knowledge, short of using an external BPM tool) not been matched in terms of functionality in any other CMS. In fact, since TeamSite, workflow capability in CMS systems has tended to veer more towards a simple gated publishing model by default (with the ability to customize).

Sitecore Access Viewer

Some CMS systems have an extremely granular view of content. Sitecore provides a number of controls to manage and understand security permissions. The Access Viewer is used to select a role or account (not shown) and determine what permissions they have to items. This interface is separate from that which allows the ability to set permissions.

CityDesk Editing Screen

This was the main editing screen for CityDesk, a desktop-based CMS from the late 1990s to early 2000s. It was installed on Windows via an MSI file. It was single-user only.

Contentful File Selector

When creating media entries in Contentful, you can not only upload images from your machine, but connect to a bunch of other systems to find images embedding in them. From this interface, the “My Device” option is the only one that leads to a traditional file upload UI.

WordPress block-based editing

Like many systems, WordPress moved to a block-based editor with version 5.0. They called it “Gutenberg.” In this image, you can see the block menu on the left. Stretches of narrative text are just micro-blocks of structured content, rendered on top of each other, and designed to look like an unbroken stretch of content.

New posts appear on our Twitter account.

RSS Feed