Build A Website

Headless CMS - Guide and Market Overview

Author
Julia P. Manzau
Last update
13. Sep 2021

If you're a content creator, you likely spend a significant amount of time contemplating how best to publish what you've made on landing pages and web stores, as well as in apps or catalogs. This is because each channel has varying requirements. Complicating matters, traditional content management systems (CMSs) are designed for displaying content on one channel, such as a website. Should you want to offer your content in an app as well as on a website, you'll quickly come up against the limitations of classic CMS.

Headless CMS offers a solution by focussing on the most important factor: the content. This is created centrally and then delivered to other channels through standardized APIs, saving time and resources. In this article, we take a closer look at what separates headless CMS from other CMSs, what it's particularly good for, and which providers dominate the market.

What Is Headless CMS?

Traditional CMSs typically offer users the ability to create content, ensure that it's designed to their preferences, publish the result online, and save progress in the platform's dedicated database. All of these areas are linked through the code which they share. For this reason, a CMS can also be referred to as a coupled CMS.

This approach can be traced back to a time when multimedia communication was still fairly unknown, and only a single source existed for sending digital content, websites. Today, more and newer communication channels have come into existence, all of which need to be filled with identical or very similar content. Combined with this, user requirements in terms of flexibility and ease of use rise on a nearly daily basis.

Another disadvantage of traditional CMSs is in the dependency they create between the front and back ends. Updates, additions, and even maintenance all consume considerable effort. Beyond that, owing to their shared code, a single error can cause the entire system to fail and the website to go offline.

Separate, Yet Together

Compared to a classic CMS, a decoupled CMS offers something of a hybrid, separating the front and back ends from one another. These offer users the proven functionality of a monolithic CMS as well as the flexibility which application programming interfaces (APIs) provide, allowing content to be displayed on nearly any channel. Thanks to their decoupled nature, content can be displayed more flexibly and quickly. With that said, all components remain within a single system.

Focussing On What's important: The Content

Headless CMS represents the next step in decoupled CMSs, jettisoning the frontend and instead concentrating entirely on its primary purpose: the content. Headless CMS users can create, read, update, or delete content, however, these changes won't be immediately visible to the end-user. 

What seems confusing at first glance actually symbolizes considerable technological progress. Through the use of APIs, it has become possible to display content on veritably any front end. This can be a website, a mobile application, a smartwatch, or even a VR headset. As such, a headless CMS can actually be seen as a source where the content is centrally prepared, with access possible for any type of media. Thanks to APIs, this content can then be interpreted and displayed as needed by the channel to which they are linked. 

So far as naming is concerned, the 'body', that is to say, the content, remains, whereas the head (the front end, on which the content is published) is figuratively severed. As such, headless here doesn't imply something negative, but rather, the separation of the content from the channels on which it is published.

Advantages of Headless CMS

  • Flexibility
    With headless CMS, it becomes possible to display content on any channel it is needed.

  • Efficiency
    Content only needs to be created once, after which it is prepared for and delivered to different channels via APIs.

  • Speed
    There's no need to duplicate or prepare content for each individual or new channel.

  • Streamlined
    By focussing on content creation and delivery, loading times decrease, improving user experience.

  • Highly Communicative
    Content is delivered via API, however, data can also be transmitted back to the CMS.

Disadvantages of Headless CMS

Despite the positives, there are some drawbacks to using headless CMSs.

  • You don't see what you get
    You'll either need a vivid imagination or lots of experience to visualize what your content will look like since headless CMS does not offer WYSIWYG functionality. As such, you basically work blind, which can be frustrating for authors and content creators accustomed to being able to view their progress.

  • No front end or layout
    Each medium requires different software for displaying content. As such, creating layouts manually necessitates either considerable programming knowledge or extensions.

  • Not a bargain
    Combining headless CMS with self-hosting is more complex and time-consuming than using a classic CMS. For that reason, if looking to manage a single blog or website, you're better off with a regular CMS. As with most things, seriously consider your requirements before starting out.

SaaS or Open Source - Which Headless CMS To Use?

Despite the novelty of the approach, several providers offer headless CMSs. These mainly differ in whether they are free (open-source) or paid services.

Most headless CMSs are offered as software as a service or SaaS. This means that users log in to a web application for creating content, which is then displayed on APIs hosted in the cloud's back end.

Open-source solutions are also available for anyone possessing their own server or interested in using non-proprietary software and having greater control over their end result. These are highly versatile and offer developers significant amounts of both flexibility and freedom. At the same time, self-hosting headless CMSs require considerable technical expertise.

As a sort of hybrid, some classic CMSs, such as WordPress and Drupal, offer headless modes. Using RESTful (Drupal) and REST API (WordPress), either platform can be modified into a decoupled CMS, with separate front and back ends. Content is accessible via API and can be published on numerous systems or devices.

Example - How To Use Headless CMS?

There's always a difference between how things work in theory and what happens in practice. For that reason, we wanted to show you how headless CMS actually works by creating a blog with Contentful .

Content Modelling

Contentful is a SaaS headless CMS. After logging in through the service's website, you'll need to create and name your "space". In our case, this is a blog.

To do this, click on "Content model" at the top of the dashboard (it should be next to "Space Home"). For our purposes, we selected the "Blog Post" and "Author" models.

Next, click on "Blog Post", which should open the layout for the entry. Here, you can include up to 50 fields to further solidify your content. For blogs, all of the most common types of content are available, such as title, header, and lead photo.

By clicking on any of the fields, a dialog box will open, in which it's possible to enter content, change its appearance, or make other edits.

In addition to creating content, it's also possible to source it as well, for example to a specific "Author". This is particularly nifty for anyone interested in working globally. After making changes to "Author", it isn't necessary to update these in each individual post, but only the reference field.

Adding Content

Once you've created the desired models, you'll have to start filling them with content. Contentful intuitively guides users in how to do this, by helping out with the first few steps.

Request and Display Data Through the API

In the final step, it's necessary to request data, either through the REST or GraphQL API. This way, websites, apps, smartwatches, or other playback devices can request the content through APIs. The system simply waits for external requests, which it responds to with the structured content.

To answer the above question we examined 1 million of the most-visited websites to see which used headless CMS. First place was secured by Contentful, with Craft, and Ghost close behind in second and third, respectively.

CMSPrevalence Among the Top 1 Million Most-Visited SitesType

Contentful

2,824

SaaS

Craft CMS

2,294

PHP

Ghost CMS

1,469

Node.js

Prismic

773

SaaS

Magnolia CMS

383

Java, Open Source

Sanity

324

SaaS

Strapi

291

Node.js, Open Source

Dato CMS

216

SaaS

dotCMS

207

Java, Open Source

Mura

203

Java, Open Source

Contentstack

191

SaaS

ButterCMS

93

SaaS

Kentico Kontent

86

SaaS

Scrivito

31

SaaS

GraphCMS

30

SaaS

We took a closer look at the Top 5, summarizing our findings for you below:

Contentful

Contentful  is the product of a Berlin-based start-up founded in 2013. Their system impresses owing to its ease of use and the brief period needed to get a feel for the software. Thanks to a sleek and clear interface, editors and authors can efficiently create and manage their content.

Users can also look forward to powerful APIs and compatibility with all smart devices and services, both of which make working with content particularly flexible. Of course, all of this comes at a financial price.

Craft CMS

In second place comes Craft CMS , a hybrid that offers live previews, as well as drag-and-drop functionality for content. Craft is particularly known for its user-friendliness and short learning curve.

This headless CMS offers an interesting alternative to skilled developers looking for a well-equipped CMS which provides a range of opportunities. In terms of pricing, Craft CMS also makes a very respectable showing.

Ghost CMS

Ghosts's  open-source solution stakes out third place. In essence, the headless CMS is split into three components: a REstful JSON-API (integration), a decoupled admin area, and the frontend. Ghost can be self-hosted and provides authors with a simple editor conducive to unleashing as much creative energy as they can muster. The design is minimalistic and clean, with few distractions.

This system is developed by the Ghost Foundation, which also markets different themes for sale in its shop. For anyone not interested in self-hosting, Ghost also offers a (paid) web application.

Prismic

One might think that Prismic , the favorite of digital titans like Google and eBay, would enjoy greater popularity, however, in our ranking, it only comes in fourth place. The French SaaS solution is well-suited for less-extensive projects owing to its easy integration into front-end media, and the short amount of time needed to get a feel for its ins and outs.

The system's user interface is clear and largely self-explanatory and features a WYSIWYG-Editor, which makes it possible to create block-based layouts. Even though headless CMSs never render the final layout, the blog layout offers users a draft from which they can draw all sorts of conclusions.

Magnolia CMS

Magnolia  from Switzerland, is a CMS classic. The open-source hybrid headless CMS supplies users with a variety of helpful tools, making it possible to communicate with all sorts of systems. The interface is well-structured and modern, with website editing fairly self-explanatory.

The system's working platform is touch-capable, making it suitable for working on the go. Authors create entries using the inline-editing mode, which then provides an HTML preview of the site. Any type of content can be edited directly in the preview and adjusted if desired. Accordingly, the end result can be better conceptualized than if working in the form view.

Conclusion

Headless CMSs offer a useful solution for any number of scenarios, however, not all of them. For those who want to prepare content as a service for digital front ends, and/or anyone who works with lots of different channels, headless CMS can be a game-changer.

However, purely headless systems are less well-suited to editors looking to create exciting content worlds, since they're unable to exert much influence over how the content will ultimately be received by the end-user. Inputting content into a form does damper creative freedom.

For the best of both worlds, we suggest hybrid headless CMSs. These offer the advantages of headless systems, but also provide better text creation and preview tools. As such, authors maintain the control necessary for managing content across multiple channels.

FAQs

What is a headless CMS?

Headless Content Management Systems (CMSs) are those which possess only a back end for creating and editing content. Content that is created once can then be displayed through APIs on any device or touchpoint.

What advantages do headless CMSs offer?

Headless CMSs make it possible to display content anywhere that it is needed. This content only needs to be created once, as it can then be displayed on any channel. Generally speaking, headless CMSs focus on content creation and delivery, in the process, decreasing loading times and fostering a better user experience. By separating the back and front ends, they also ensure greater security.

What is the most popular headless CMS?

After analyzing 1 million of the most-visited websites, we found Contentful in use on 2,824 of them, more than any other headless CMS.

Julia P. Manzau has more than 30 years of professional experience in leading editorial and marketing positions in the premium automotive, mechanical engineering, and healthcare industries. She studied Political Science and History in Bonn, Marketing at the St. Galler Business School and earned a BA in Media Engineering (CCI). Since 2015, she has worked as a freelance writer. For EXPERTE.com, she focuses on software, the Internet, and marketing.
Continue Reading