2021-06-19 · 7 min

Explain Like I'm Five: Headless CMS

Omar Benseddik@bnsddk
Explain Like I'm Five: Headless CMS

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 4 minutes what a headless CMS is and show you how it's used.

What is a CMS?

When the web was first introduced, only developers could create and manage websites.

As the Internet expanded and the web became more accessible, non-developers couldn't be kept on the side without the ability to make sites.

As a remedy, Content Management Systems (CMS) came into place, with the purpose to allow its users to create and edit content on a website without any knowledge of code whatsoever.

One could open a CMS, create a website with different pages, place images, write text, and voilà, go live without writing a single line of code.

The adoption of this tool increased and so did the number of CMS providers out there.

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

For example, the interface cannot be fully customized and styled considering how it is based on templates, meaning that a lot of these websites look alike and can't always have a distinguished brand.

There is also a limitation when it comes to functionality, considering that without code, it is very difficult to build certain features.

Also, if one is able to build and edit a website without code, it is because there is a lot of running code in the background allowing them to do so, and as a result, the website speed is 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".

What is a headless CMS?

A headless CMS is built solely to handle content, in constrast with the traditional CMS which offered capabilities beyond what it was meant to do (CMS stands for Content Management System, not Content Design Frontend Backend Hosting Management System).

It's called "headless" because the interface (head) and the content (e.g. text, images) are separated, in contrast with the traditional approach, which entangles both. When both interface and content are glued, it is harder to change the content without breaking the interface.

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

Headless CMS separates interface from content
Headless CMS separates interface from content

Also, by separating the content from the interface, 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.

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, and what to say, instead of how to present it.

Use case

illuminem is an energy news aggregator that launched its first version using a traditional CMS. After validating their idea, they wanted to make their platform more sophisticated with a specific design, faster speed, automated articles sourcing, and machine learning content categorization.

This was impossible with a traditional CMS.

To help them move to the next level, we've designed and built the interface for them with custom code, and connected it with a headless CMS for them to control, edit, remove, and organize content.

The illuminem team members picked up the headless CMS in a matter of minutes (no learning curve), and are now independently managing their platform without our involvement.

Modular structure

Building a website with a headless CMS requires structuring content in a modular way (build once, use multiple times).

Brands like National Geographic, Nike, Channel, Atlassian, Sonos, Bang & Olufsen, ALDO, Spotify, WeWork, Danone, Peloton, Intercom, Mailchimp, TUI Nordic, Oasics, Zalando, and others, welcomed the headless CMS to their set of tools.

Do I have to give up on traditional CMSes?

Not at all. In some instances, it is still possible to use a traditional CMS (e.g. WordPress) as if it was headless.

To do so, the interface is built independently from the CMS, which only acts as a source of content.

It's less convenient, since CMSes like WordPress were not built to be headless, but doable.

If your business is evaluating such a migration, don't hesitate to get in touch.

Headless CMS in action

Let's have a look at how we used Sanity (one of our favorite headless CMSes), for a music conference website we've built for a client:

Building pages

We made it possible to create as many pages as necessary, chose among predefined customized templates (e.g. standard page or artist page), give them a title and set a URL:

Creating pages with Sanity
Creating pages with Sanity
Select URL for each page
Select URL for each page

Structuring pages

Thanks to the modular structure of the website, the client not only controlled the content but also the structure of the page (e.g. banner at the top, schedule at the bottom):

Modular structure
Modular structure

Format text

Text can be edited like on Microsoft Word or Google Docs:

Rich Text editor
Rich Text editor

Preview changes

Changes can be previewed before publishing them. This made it possible to avoid publishing the wrong content by seeing how the website would look like with the updated content.

Preview Page
Preview Page

Serves as a backend (e.g. uploads)

The CMS has been used as a storage for some files that were to be downloaded directly from the site:

Storage for documents
Storage for documents

Works on mobile

It is possible to use the CMS from mobile to make changes on the go:

Sanity Mobile Version
Sanity Mobile Version

No vendor lock-in (export content)

While content in a traditional CMS is locked with the platform, it is possible with Sanity to export the content and move to another headless CMS should that be required, making vendor lock-in inexistent when it comes to content ownership.

Real-time collaboration

Different team members can collaborate to create pages and edit content in real-time.

Other articles

Explain Like I'm Five: Website speed