Nip and Tuck: How to build a CMS editors will love

Blankwaves image in green
October 16, 2014


One of the great things about building a content management platform is that we get to talk to a big variety of creative people and companies. Busy with launching everything from huge entertainment portals to personal recipe apps, our customers bring to our attention a lot of interesting ways of structuring, producing, and presenting content online. And the more we listen to you, the more we understand how frustrating it is at times to translate your creative vision into a neatly defined content model.

Yes, you can choose among ten field types, add unlimited number of fields and interlink your entries in advanced ways, but even then coming up with the right setup can take a while. For example, you might want to format your editorial descriptions, but keep the title plain or store an event date without worrying about exact hours or display product categories in the way editors are used to seeing them - as checkboxes. Relying on the ten basic field types to cover all these scenarios can feel stifling, even if storing your content in a structured way promises many more benefits down the road.

So in order to enable you, dear users, to continue creating your content in a familiar way without wrecking havoc on the underlying content structure, we're introducing customizable editing interfaces. As the title implies, the new feature will give you more control in determining how your editing interface looks and behaves. That includes setting widgets for your field types, adding inline tips, and grouping fields. Let me show you how that will work in practice.

Tap widgets to accomplish specific tasks

Widgets are enhancements that determine the look and functionality of your fields. Take a movie rating: it might be just a number on a predefined scale, but asking your editors to type in a number is far from perfect. After all, people are used to visualizing ratings as stars and prefer to rate items by clicking on the right amount of stars. Thus, replacing the usual text field with an interactive rating scale would work much better in this scenario.

This is exactly what widgets do - they give you the freedom to decide how editors should interact with a specific field. Display description in plain text or work in a markdown editor? Ask for a precise time or just general dates? Visualize entered URLs as text strings or parse them to extract additional information? From now on you decide what makes most sense in the context of a given field and set an appropriate widget.

Introduce content types with layout elements

As any seasoned developer and content strategists know, mixing a big number of content types with even a moderate amount of inexperienced, but determined, users often leads to operational hiccups and unnecessary frustration. This is where the layout elements come into play: headers, info texts and section breaks are as low-tech as it gets, but they go a long way in demystifying even most obscure entry forms. Use them to introduce individual content types to editors and help them understand better the purpose of specific sections they need to work with.

Guide and educate with inline tips

Content management systems are not known for being very eloquent. And that is a pity! A recent article by Eileen Webb does a splendid job in explaining how contextual tips and cues can increase the usability of your CMS and, accordingly, the happiness of your customers. Conveniently enough, customized editing interfaces allow you to add inline help text and instructions to all your fields.

Here are some things to keep in mind when adding instructions to editors:

  • What is the purpose of the field? Who is the target audience? What things must be included/omitted here?

  • Where is the field displayed? If it’s a photo, how will it behave when resized? If it’s an article teaser, is it OK to repeat the information already included inside?

  • What style should one follow? How does one create a perfect headline? What grammar considerations to keep in mind? What tone should one adopt?

  • What are the technical considerations? Restrictions on the type/size of files one uploads? Specific tags to be used or avoided? Steps to follow for embedding external content?

Getting started

You can access all the wonderful features listed above by clicking on a “Customize View” button in your content model view. We made sure to automatically list all the available widgets next to each field and, should you be unhappy with the results of early experiments, you can always roll back the changes to a default state.

Please be aware that currently available widgets mostly cover mainstream scenarios, but we will be adding new things on a regular basis. If you miss something specific, just give us a shout!

About the author

Don't miss the latest

Get updates in your inbox
Discover how to build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle