Headless CMSes in layperson's terms

Headless Statue

What is a headless CMS? Why would a company use one? To answer that, we can look at how websites are traditionally built to see the benefit of lopping off a content management system's head.

When you build a website, you choose a content management system (CMS) so that it’s easy for your people to update the website in the future: change text, add photos and add new pages. Most websites today are built with traditional CMSes, where the code for your CMS is tightly integrated into the actual website and web pages delivered to your website visitors, i.e. the presentation layer. This presentation layer of your website (where the actual design is determined) and the content layer (where the content is authored and created) are all baked into the same cupcake.

In some cases, that makes for a good solution. If you want to publish a website for a straightforward small business to list open hours, a shop address and contact information, you probably want a simple option, like SquareSpace, Wix, Shopify or WordPress.

But what happens if you use a headless CMS? Well, you’ve fully separated the presentation of your website from the content authoring part of your website. 

Consider this website cupcake.

A cupcake with labels to represent a website's architecture.

With a traditional CMS, your website's frosting (the presentation layer) is very much entwined with the CMS.

But once a website cupcake's frosting head is removed from its body, the website cupcake becomes headless and gains flexibility to have as many heads as it needs.

A cupcake with labels to represent different sources where CMS content might be consumed

This website cupcake can now use the data from their content layer (a single headless CMS) as the content for any tasty frosting they want: a mobile app, a smart TV app, a product marketing website and a company intranet.

That starts to look pretty attractive for a company that wants to future-proof the content they invest in creating. The best way to build a website always starts with an “it depends,” but there is absolutely a right choice and a wrong choice for companies with complexities and varied consumption points for the data produced by their CMS. I’d run, and not walk, to a headless CMS if that sounds like your organization.

Some common headless CMSes: Contentful, GraphCMS, Strapi, Sanity, and even Shopify and WordPress can be headless CMSes, too.

You may hear the term “headless” in other contexts around web and software development, too. For instance, headless commerce for ecommerce companies. Or if a developer wants to test software, they might use a headless version of the Chrome web browser, meaning they can test their product sans the visual browser interface.

The TL;DR definition of a headless CMS: a website content system fully detached from the visual presentation part of a website, making it simple to update content at a single point of origin for multiple customer-facing applications.


Copyright 2021 Ian Forrest Web Development.