What is Headless CMS?

Posted by Paweł Dąbrowski on April 6, 2020

GSD

Co-authored by Brigid Burt

You’ve probably heard the buzzword “headless CMS” somewhere and decided to research it one day. Another technology to learn whenever you got around to it. To put it briefly, a headless CMS is a content repository system that allows control of website content, has no presentation layer and displays data on any device.

First, to better understand why the headless CMS came about, let’s look at the overall history of the CMS.

ButterCMS 1.png

A Brief History of the CMS - From Traditional to Headless

What does ‘CMS’ mean?

CMS is short for content management system, a software application that enables website management easily by both technical and non-technical people. The main idea behind the CMS is separating the content layer from the presentation layer. The most popular solution of this type is Wordpress  (which can also be used as a decoupled CMS), which is mainly used for blogs, online stores, informational websites, and more complex projects.

Why was the CMS invented?

As internet technology evolved, it became possible to create more advanced websites. Non-technical people needed a content creation process that was easy, readily available, and not reliant on technical skills. Content management systems allow users to control the website’s content and appearance from a password-protected control panel that is easily accessible to anyone who needs it.

Why the standard CMS needed an alternative

As technology advanced, users shifted away from traditional desktop computing and began consuming more content via mobile devices. The traditional CMS started to suffer from technical debt as years of patches and updates fragmented codebases and large-scale refactoring was put off as long as possible. Providing an API as a quick fix for a standard CMS was a short-term fix, but it didn’t fully resolve the issues beginning to mount for developers trying to maintain these monolithic architectures.

Headless CMS: The modern approach

Content delivered from a headless CMS is pure, which means that it can be used to display data on any device since it isn’t permanently attached to a presentation layer. You can also manage all content for all platforms from one single place. The standard CMS is not able to provide such a flexible, universal format for distributed content and centralized management.

What is Headless CMS?

We already know the definition of a headless CMS, but what does “headless” really mean for non-technical and technical people? What is the main difference between systems with and without a “head”? 

headlessCMS

blog-cta-any-stack_800x100.png

What headless means for non-technical people

For website visitors, there is no perceived difference between a CMS-powered app built with a head versus one that is headless, except that they are more likely to view consistent content across multiple platforms. If you are currently using a standard CMS, you can transition to the headless version and your visitors won’t notice it. As for the content creators, such as marketers, copywriters, editors, etc., they will experience significant improvements in their work, which will be covered later on.

What headless means for technical people

For developers, product owners, consultants, and others with some technical knowledge about content systems, the term “headless” means that the application is built with an external API. The main difference between a standard external API provided by a service and the API coming from a headless CMS is the full control over the content that is coming in. Everything else works much the same way, so if you are a technical user with experience using other APIs, you will be able to easily adapt a headless CMS for your needs.

Traditional CMS vs Headless CMS

The main difference is the “head.” With a headless CMS, the “head” is usually under active maintenance and development, which means that bugs are quickly fixed and any requests are answered in a very short amount of time. In the case of the standard CMS, the development process is slower, especially when it comes to open source options. You have to wait for the next CMS version release in order to use the system without experiencing bugs while it updates. On the other hand, new features and enhancements for any headless CMS are frequently published, and you can begin enjoying these improvements as soon as they are released without any effort on your part.

The Traditional CMS Ecosystem

For people who don’t have coding skills, web development is made possible through a content management system. 

Writers, editors, and marketers can create, edit, manage, and publish content through a few clicks of a button without having to worry about writing HTML, CSS, or JavaScript. 

They have templates, built-in themes, and plug-ins at their disposal to control the design of the website. 

This all happens within a single application. It’s a one-stop-shop for website creation. 

A traditional CMS is made up of two parts. This is where the head and body metaphor comes in:

  • The back end (body): the place where you create, manage, and store content. All of your authoring tools exist on this platform.
  • The front end (the head): the “look and feel” of your website: the presentation that your audience sees on display — think layout, design, and navigation.

traditional-cms-illustration.png

These two parts are tightly wound together (the official term is “coupled”) and work in tandem to push out content on the web to deliver a seamless user experience. 

Traditional CMS has been the de facto CMS for well over a decade since WordPress emerged on the scene. That’s why people often refer to traditional CMS as “legacy” CMS, or “monolithic,” because everything is put together in one place.

The Restaurant Analogy

Need a better visual? Code Analogies breaks it down beautifully by describing the inner workings of a restaurant:

  • The behind-the-scenes kitchen staff putting the meal together is the back end.
  • The dining area where customers sit, take in the décor, order from a menu, interact with the wait staff, and eat is the front end.

When customers sit down at the table, the wait staff at the front of the house and the kitchen staff at the back of the housework work in unison to deliver a seamless restaurant experience.

cms-back-end-restaurant-analogy.png cms-front-end-restaurant-analogy.png
Back End Front End

The Headless CMS Ecosystem (How Headless Works)

Now that you understand the front end and back end of a traditional CMS, it’s going to be easier to learn Headless CMS.

In Headless CMS, the presentation (the head) is completely separated (imagine we remove the head). Raw content exists on the back end (the body), but there is no front-end framework to present it on. 

headless-cms-illustration.png

So where does the content go, and how does it get displayed? Does it just walk around like a headless robot?

The simple answer: It can go anywhere you want it to go. 

Content can be delivered on multiple front-ends through an API  (Application Programming Interface).

The Power of the API

We won’t dive too deep into the world of APIs, but put simply, an API enables two different applications to talk to one another.

In the context of Headless CMS, it’s the engine that drives the content to the place where you want it to go.

Still not clicking? Let’s go back to the restaurant analogy:

Customers sit down at a table and order from a menu. A waiter at a restaurant takes the order and delivers it to the kitchen staff. The kitchen staff cooks and assembles the dishes, and then the server comes back out to deliver the prepared meals to the customers.

The waiter acts as the link between the customer at the front of the house and the back kitchen staff. An API, then, is essentially the waiter that allows the front end to get what it needs from the back end.

Here's a nice video from MuleSoft that succinctly explains this concept: 

In a Headless Content Management System, we’ll take the restaurant analogy one step further:

You don’t have to be physically sitting in the restaurant to enjoy the food. You can have the food delivered from the back kitchen to your own home or anywhere you please by way of a delivery driver.

Similarly, an API can deliver content anywhere it needs to go. In a Headless Content Management System, it’s not limited to one front-end presentation.

Translation: You don’t just have to present content on the web. Thanks to the API, you can deliver it wherever your audience is: on a smartphone, on their Apple Watch, even on Alexa.

omnichannel-experience-api-diagram.png

Your developers can easily access API via RESTful routes. Such architecture speeds up the development process and makes the software itself simpler. Each API endpoint usually has the same set of actions:

  • Get all records
  • Get only one record by the given ID
  • Update a given record
  • Delete a given record
  • Create a new record

Why Use a Headless CMS?

You can consider using a headless CMS as classic outsourcing where you pass some duties to external companies so you no longer have to take care of certain tasks. Fewer tasks mean more time for other important tasks in which you are an expert.

Choosing the right technology and then implementing it can be a headache, especially when there are so many technologies out there. Choosing a headless CMS over a standard CMS allows you to focus on the presentation, which is easier to implement even without hiring more developers. 

Without the headless CMS, being optimized for multiple display sizes and devices is difficult. You have to choose the right technology, hire good developers, design the system, and then wait for a long time before you are able to see the result.

With the headless CMS approach, you are usually able to optimize for multiple devices using the same technology. We are living in a time of JavaScript, and nowadays, more and more JavaScript technologies are suitable to use everywhere, from mobile and web applications to TV and smartwatches. This API-based CMS can be dropped into any tech stack within minutes!

An Advantageous Content Infrastructure

When using a headless CMS such as Butter your content revolves around individual structured content elements instead of entire pre-defined pages. By working with these smaller elements such as components in the case of ButterCMS you can more easily create a content model that fits your specific needs rather than trying to fit into some pre-made template. 

Furthermore, since the content is treated as data within headless CMS you can then feed this data to any page, platform, device, or domain where it's needed, allowing you to use the same piece of content across different digital containers without having to make multiple versions of it.

ButterCMS has several features built in to streamline your content modeling processes:

  • Components
  • Page Types
  • Collections
  • Blog Engine
  • Reference Field
  • Repeater Field

Advantages of a Headless CMS

  • You can push content across many platforms without having to repeatedly build things from scratch: You have a single repository of content on the back end for multiple and unlimited channels. The API does the heavy lifting and allows you to access your content from virtually any endpoint.
  • It’s future-focused: Need to display things in a chatbot or on an Apple watch? Or are you thinking about the future of virtual reality experiences? Headless CMS keeps pace with emerging technologies since content is stored as raw data and can be molded into whatever is in store for the future.
  • You’ll get a happier developer: They are free to work with whatever programming language they choose and are not tied to a specific CMS framework.
  • Goodbye templates, themes, and styles: You don’t have to be restricted to predetermined design and can let your imagination run wild.
  • Responsive layouts: You can optimize the same text and images differently for many platforms.
  • Speed: With no head, the CMS has smaller code and a lighter load to carry. This creates faster page load speeds, which are great for your SEO.
  • Enhanced Security: The publishing platform is not accessed from a database, so your chances of being a victim of cyber attacks go down.
  • Lower Costs: Headless CMS is cheaper as you don’t have to pay for the full setup like a large database, background job processing software, or search engine.
  • Compatibility:  From one place you control all the content that is displayed on all devices. 
  • Reduces time to market: You can release your websites faster as developers and content creators can work at the same time without blocking each other.
  • Easy deployment: The deployment process is fast since you don’t need to hire a DevOps expert as you usually only have to deploy a simple app.
  • Processes are simpler with a headless CMS: Using a headless version of CMS doesn’t just make things easier for developers, it simplifies the process. No longer do you have to worry about how the content should be created. Most headless CMS providers come with text editors that have many built-in features to make writing easier and faster.
  • Another thing that is very important is content authorization; not everyone should be able to create content. With a roles and permissions system, it’s easy to control this matter.

Core advantages for marketers

Marketers can create content just once without worrying about different channels, administration issues, or technical aspects. Usually, with the headless CMS, a handy text editor is available out of the box that allows you to format the text properly and focus on the user experience.

Core advantages for developers

No more back-end restrictions or obstacles caused by the lack of expertise in a given programming language. Developers can use the tools they love and focus on building beautiful interfaces without worrying about performance issues. Creating different content delivery channels has never been so easy.

Core advantages for users

Users experience faster and more responsive applications. They don’t have to worry that they will miss some information when using different channels for the same application.

blog-cta-any-stack_800x100.png

Common Applications & Use Cases of Headless CMS

There are several common applications and use cases that you can create using a headless CMS. Here are the most common ones.

Standard websites: You can build a standard website using whatever technology you want, like the one you have the most experience with. There are no limits because you’re working with an API, so as long as the technology you choose can send HTTP requests and parse the responses, you can use it successfully.

Web apps: You can build a modern web app using any of the JavaScript frameworks available nowadays.

Websites created with the static site generators: With tools like Jekyll or Gatsby, you can generate static websites that do not need access to the database. These can be easily hosted on any server almost without any costs. This kind of website is popular among developers, and the usage of the headless CMS API should be no problem at all in most of these cases.

Native mobile apps: Most native mobile apps connect with some back-end application, so there is no reason why you can’t use the headless CMS API instead of the back-end API you would need to create without using any CMS.

If you constantly need to reach your customer: Headless CMS can push messages out faster to any platform. This is vital for airline and financial industries who need to reach their customers at crucial moments.

If you need to support an omnichannel experience: Headless CMS can push to newer formats like experiential promotions, retail pop-ups and kiosks, and third-party partnerships on any platform.

If you’re rebranding: Migrating content will be easy for your developer as they’re not locked into one look or style. They can work with any marketing stack.

If you’re adding a blog to your website: You can add it without losing your layout presentation. The content can easily plug into your design.

If you need to keep your data secure: Developers steer clear of WordPress because it’s vulnerable to hackers and requires security updates. Thanks to the API, Headless CMS is generally more secure if you want to protect sensitive data.

If you want to expand SEO beyond blog post ranking: Headless CMS allows you to configure a custom set of SEO fields for different content types. It can handle locations, media content, app store listings, and more.

Headless CMS Examples: Actual Use in the Wild

There are multiple ways you can use a headless CMS. Here are some real-world examples:

eola.jpg

Eola.co has been able to quickly launch beautiful, high-quality blog posts with great SEO that work well across multiple platforms.

keyme.png

Key.me uses ButterCMS to build a stellar back-end (thus eliminating tedious work inside their app) to define content regions and help scale their SEO landing pages.

happyfresh.png

HappyFresh.com’s implementation of ButterCMS powers their mobile app for ordering groceries, covering multiple countries and languages with ease.

The headless CMS is a great choice not only for blogs but also for e-commerce sites and SaaS platforms because it provides good performance, is a clear API, and is easy to use.

A Heads-up on Headless - Things to Keep in Mind

Headless CMS ultimately allows marketers to grow their business fast and with greater flexibility. More customers can be reached on multiple platforms, and it’s also prepared for any future device it faces.

However, for some, like a pair of new shoes, it may take some time to break into if you’re accustomed to traditional CMS. Some things you lose with Headless (besides the head) include:

  • A live preview of your content: Some Headless CMS systems don't let you immediately see how your content will look when you update it. If this is important to you, be sure to select a Headless CMS that has live previewing as a feature. ButterCMS has a great preview feature that allows you to preview changes in the same window where you're editing content.
  • You need a developer for the initial setup: They create the front-end layer and plug the back-end in via the API. Once your system is configured, you’re free to go about your day-to-day updates and tasks that would otherwise require a developer. Over time, Headless CMS typically requires less involvement from your development team.
  • No more cookie-cutter templates: All of your templates for all of your channels are custom-built by your development team.

Getting Started on Headless with ButterCMS

ButterCMS works with any marketing tech stack so you can work with virtually any developer who’s familiar with Headless CMS.

We’re also marketer-friendly, providing a powerful WYSIWYG editor and friendly user interface that allow you to create fully-functional SEO landing pages and flexible page layouts.

ButterCMS-New-Edit-Page-UI.png

Our powerful global Content Delivery Network (CDN) works to keep your images, video, and audio loading fast with zero maintenance on your end.

See our dynamic solutions to see how we fit your business and check out our wide variety of integrations here

Conclusion: The Headless CMS is the Future of Content

These days we want to consume high-quality content—everywhere and as soon as possible. That’s why it’s important to provide the best tools for both content and software creators. In a modern world, every product owner has to be proactive and use every opportunity to serve content on a new device as soon as it is available for a larger audience.

For the first time, content quality is as important as its availability. It’s good to have experts who will take care of the business logic for your application, but it’s better to have them and pay less. Outsourcing is the key to outstanding performance and lower costs, and the headless CMS is the best solution for this. Having a well-maintained back-end for an application is not that expensive if you decide to use the headless CMS instead of doing everything on your own, and the peace of mind you’ll get from it will be priceless!

Get the most up to date Content Management articles straight to your inbox.
    
Paweł Dąbrowski

Paweł is a self-made writer of the digital era, IT samurai and problem solver who loves Ruby. He writes for human beings and computers at pdabrowski.com and focuses on soft skills in the software creation process.

ButterCMS is the #1 rated Headless CMS

Related articles

Don’t miss a single post

Get our latest articles, stay updated!