A Guide to Explaining Headless CMS

Featured article by Jonathan Liebenberg  

Building for the web today requires navigating a seemingly endless forest of acronyms. API, CDN, AWS, CMS…the list goes on and on! It’s easy to get bogged down by the dizzying array of web development and marketing jargon.

In this article, we break down one of the more ubiquitous acronyms on this list: CMS. Specifically, we dive into the headless CMS and explain what it is, why companies need it, and how it can benefit any online business.

What Is a CMS?

A CMS (or Content Management System) is software that allows non-technical users to create, modify, and manage content on a website. It lets you build a website from scratch without writing code.

Some examples of CMSs that most people are familiar with are WordPress, Drupal, and Sitepoint. Wix and Squarespace are newer competitors in this space.

A CMS allows a user to create and store all the content needed for a website, including the text, images, links, and videos. It also allows the user to organize this content, often through a drag-and-drop GUI that lets the user create pages, add headers, footers, navigation, etc.

Traditional vs. Headless CMS

Anyone who has done a little research into CMSs, has probably come across the terms “headless” and “traditional” CMS. You may also have seen the term “decoupled” CMS. Let’s take a brief look at the differences between these three systems.

Traditional CMS

A traditional CMS like WordPress is a monolithic architecture that stores all the web content in a single place or bucket. Once a user creates a web page, all the content for that page is encoded directly into the HTML and stored on the coupled backend database. A “coupled” database is a backend managed by the same system as the frontend.

A traditional CMS usually uses templates to organize frontend content and has a limited number of options when it comes to where and how that content can be delivered and displayed. This means that developers, designers, and marketers are limited in what they do with their content. They must operate within the limitations of the CMS.

Put simply, a traditional CMS handles all aspects of web design and delivery. It provides the front end, stores all of the content, and delivers the content.

Headless CMS

A headless CMS is a form of microservice architecture. A headless CMS decouples the content backend from the front end. Put simply, in a headless CMS, the logic that stores the content is separated from the logic that presents the content.

In a headless CMS, it’s possible to store the content on a cloud-hosted database like AWS S3, or use a “content as a service” platform like Contentful to host the content. One can then code any frontend, using any framework, and utilize APIs to load the content into the frontend.

Headless CMSs allow greater flexibility in where and how the content is delivered and displayed than traditional CMSs.

Decoupled CMS

A decoupled CMS is similar to a headless CMS in that it decouples the presentation of the content from the storing and creation of the content.

The key difference between a decoupled and headless CMS is that a headless CMS does not care about where or how the content is delivered and presented, while a decoupled CMS does a little proactive work to prepare the content for delivery and display.

A decoupled CMS comes with a “head” (the frontend, or part of the system that displays content) but using it is optional. One can use a decoupled CMS like a traditional CMS or like a headless CMS.

For example, the business owner could use the backend of a decoupled CMS with a separate front end, or use the front end of a decoupled CMS with a different backend. It’s also possible to use the entire decoupled CMS system together.

What Is an API?

An API, or Application Programming Interface, is the method by which the “head” or presentation layer of the website talks to the CMS, where the content is stored. The API does not need to have knowledge of what your content is, what frontend is being used, or how your content is stored. It simply connects the “head” of the site to the data.

What Is Structured Content?

Structured content is a crucial component of the headless CMS approach. When you structure the content, you organize it into building blocks, similar to the way code is organized inside a website. These blocks of content are named and given a purpose (for example, “header text.”)

One can load these blocks into any frontend, where the frontend code knows how to render each block. This decoupled approach gives you enormous flexibility when it comes to where you render the content.

With content blocks, any frontend can be told how to present the content. The same piece of text or image can be easily repurposed for desktop, mobile, live chat, streaming, or multiple other uses.

What Is a Content Platform?

A content platform, like Contentful or Mura, is a platform that allows the user to create and manage structured content. It lets people take a content-first approach to web design.

With a content platform, you use the platform’s UI to create a content model that defines the shape and structure of the content. The user then hooks up the platform’s API to the website’s front end and loads the content into the code. Depending on what device the code is running on, the code knows how to render each content block.

Conclusion

Choosing a CMS can be a daunting task. There are many options to consider, and making the right choice is critical to the speed and efficiency of your development process. The business owner should take some time to explore the various content platforms and headless CMSs that are available.

The business owner should involve developers and designers in the initial planning stages of the website or app development. When one consults all stakeholders early in the process, one avoids potential pitfalls and roadblocks down the line.