Headless CMSs are increasingly popular, and for good reason. But what is a headless CMS and why use one? Here's our guide to the headless CMS, with examples.
A content management system (CMS) allows creators to store and organize their content, such as blog posts, images, and videos in a digital repository.
Many ‘traditional’ CMSs have the ability to handle both the display of content to the site visitor on the frontend and the management of the content on the backend.
These are often referred to as monolithic CMSs because they combine the various functions of both the front and backend into a single application that the site manager - often a member of the marketing team - uses to both manage their content and display it to visitors.
Examples of ‘traditional’ or ‘coupled’ CMSs include:
Imagine instead of visiting your website, your potential customer walks into your office to come and speak with a real person. It’s all very edgy and pre-COVID.
When they approach you, they naturally talk to your face. They ask you questions and you respond with your mouth, smiling nicely as you explain the benefits of your product and generous pricing structure.
If this were a website, you’d the front end. The part that the customer sees, interacts with, and uses to engage with the underlying value your company provides. In the real world, we might call you a sales associate and you’re the messenger.
And as a sales associate, you’re replaceable. The company doesn’t have to replace or rebuild it’s pricing structure, its sales pitch, or its customer database if it fires you. Sorry. A week later, the same potential customer walks in the door and the new salesperson delivers the same content in a new way.
The face (or ‘head’) may change, but the underlying operations and content the company has on file - like your super-optimized pitch on why your office coffee delivery service is the best in town - stays the same. It’s only the presentation that changes.
The flexibility of the headless CMS is one reason why at Develocraft, we use a headless CMS. And Strapi in particular.
That’s headless CMS. It separates content management from the presentation of that content. This allows for greater flexibility and control of user experience by ‘decoupling’ the front end from the management of that content on the back end.
In a headless CMS like Strapi, content management is decoupled from front-end management
It is for this reason that a headless CMS is sometimes referred to as a ‘decoupled CMS.’ However, this can be a little misleading.
A decoupled CMS includes:
Note that in the case of a decoupled CMS the frontend is included, even if its on the other side of an API.
A headless CMS includes:
The key difference here is that the frontend is not included. It's up to those running the development project to either build one, select an out-of-the-box solution, or adapt and introduce an existing frontend.
To summarise, a headless CMS consists of an API and the back end technology necessary to store content before it is delivered to the front end.
Open source headless CMSs include:
However, non-open source solutions exist. SaaS options include:
Flexibility and speed. A headless CMS doesn’t commit you to a frontend in any form. Your business can quickly rebuild its frontend site without needing to recreate the entire backend, or spend an eternity reuploading old content into a new system just so it can reach your visitors through a new display layer. Instead, once your new frontend is ready, you’ll be able to ‘plug in’ all your old content smoothly and at speed.
Use your language of choice. There are plenty of front end development languages floating around out there and almost as many opinions about which is “best”. Whatever wacky language your team is using to craft their code, a headless CMS empowers you on the backend while granting you freedom on the front end.
Multiple ‘heads’. It’s true! If you’re serving multiple audiences and have multiple user-facing content experiences - perhaps you’re a single media organization managing multiple websites, for instance - you can connect your single backend to a variety of frontend ‘heads.’ This means you can keep your content management simple with a single admin interface for your team to handle, even as they pump out rich content across your properties. Hail hydra!
The headless CMS: one place to store and manage, multiple places to display.
More control over display across device types. While traditional CMSs offer WYSIWYG (what you see is what you get) content editing, they can also be susceptible to display issues - for example, when ‘squeezing’ content that looks great on a desktop to fit the narrower space available with mobile. The solution is often some design compromise whereby the content is arranged in WYSIWYG by eyeball so that it looks acceptable in both desktop and mobile, but may not be optimal in either.
By contrast, a headless CMS offers much more control and specificity around how content will be displayed on each type of device. This could mean less fiddling around to make the content look good when preparing a blog post. At Develocraft, we have this precise arrangement with our Strapi-based solution, and as a writer I do not miss spending my time tweaking content to make it look good when I could be preparing more content!
It may take more work initially, but a headless CMS can give you more control of how content is displayed on different device types.
We’ve been using Strapi to manage our own content. Here’s what we like about it:
