19th June 2021 5 min read

Explain Like I'm Five: Headless CMS

Omar Benseddik

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand.

In this post, we explain in a few minutes what Headless CMS is and show you how it's used. So, what is a headless CMS, what are the use cases and benefits of a headless CMS, and what can it be used to create?

When the web was first introduced, only developers could create and manage websites, but as the Internet expanded and the web became more accessible, non-developers could no longer be kept on the sidelines.

So, as a remedy, Content Management Systems (CMS) came into place. The purpose of a content management system was to allow users to create and edit content on a website without needing to have any knowledge of code.

One could open a CMS, create a website with different pages, add images, write text -  and voilà, a site would be ready to go live without a single line of code needing to be written. Naturally, as the adoption of this tool increased, so did the number of CMS providers out there.

Of course, it's not all sunshine and roses; building a site with a CMS and not controlling the code comes with its limitations:

  • The interface cannot be fully customized and styled because it is based on templates, meaning that a lot of these websites look alike and can't always have a distinguished brand.
  • Without code, it can be very difficult to build certain features and improve user experience.
  • To allow users to build and edit without code means there has to be a lot of running code in the background. As a result, the website speed is often slower and does not match users’ expectations.

This begs the question: are we back to square one? Do non-developers have to give up their CMS superpowers for a website to be fast, unique, and customized?

Thankfully, they don't. A new breed of CMS called "Headless CMS" came into place to combine the advantages of writing code with some capabilities of the initially described CMS, which we'll refer to as "traditional CMS".

So, firstly, what is a headless CMS? A Headless CMS is built solely to handle content, in contrast with the traditional CMS which allows you to manage both content and the wider frontend.

CMS stands for Content Management System, not Content Design Frontend Backend Hosting Management System, although this is what a traditional CMS has the capability to do.

Headless CMS is called "Headless" because the frontend of the website (head) and the content (e.g. text, images, videos) are separated, in contrast with the traditional approach which entangles both.

When both frontend and content are glued, it is harder to change the content without breaking the frontend.

Also, because it is glued, there is no choice in terms of which technology to use for the frontend, meaning the content is "locked" in the traditional CMS interface.

Headless CMS allows to separate frontend from content

Headless CMS allows to separate frontend from content

By separating the content from the frontend, it is possible to distribute the content to different interfaces (e.g. smart watch application, mobile application, or an information kiosk). This becomes more relevant as businesses spread their messaging in different platforms and devices.

Centralizing content in one single place avoids inconsistent messaging and outdated content, whilst making content management more efficient and streamlined.

Centralized content makes distribution easier

Centralized content makes distribution easier

When building a website with a Headless CMS, developers focus on writing quality code, and content creators, editors, marketers, and non-developer business people focus on delivering fresh content to users, focusing on what to say instead of how to present it.

If you want to see the CMS in action, we encourage you to go through this guide.