Tessa Roberts

Oct 3, 2019

The Complete Guide to Headless CMS

Interest in headless CMS has seen a spectacular rise recently, with an increasing number of businesses using a headless CMS to push content to their users.

This shows in Google search trends as well, with a significant uptick in people searching for “headless CMS”.

With so much noise surrounding headless CMS, it can be hard to wrap your head around it and really understand it - let alone figure out whether it could even help your business. 

This quick guide will help you on your way - whether you’ve had some exposure to headless CMS or you’ve never heard of it, this guide should immerse you a little deeper into the world of headless!

Browse through this complete guide here:

 What is Headless CMS?
 Headless CMS Architecture
 Headless vs. Decoupled CMS
 Headless CMS Advantages
 Use Cases for Headless CMS
 Getting Started with Headless CMS

 

What is Headless CMS?

Unlike a traditional or ‘coupled’  architecture (where the backend is deeply integrated with the frontend) in a headless CMS, frontend and backend are completely separate systems.

In a headless system however, the ‘head’ - i.e. the frontend - is chopped off. All that remains is the content database and a user interface to insert, edit and manage content. In order to get the content published, it is up to the developing team to add an API and a frontend development framework.

The headless approach may seem counter-intuitive. After all, most investment in content management has been focused on optimizing delivery.

The point of a CMS has always been to have a strong delivery component, so content creators didn’t have to mill around in code. Now, with the head ‘chopped off’, the delivery component has been removed, which means with many headless CMSes content creators lose a WYSIWYG interface, previewing and other common CMS features.

So as innovative as headless CMS is, it does create some new challenges. Luckily, there are many solutions as well!

Before we go into those, let’s take a look at the headless CMS architecture.

 

Headless CMS Architecture

Headless CMS is an API first design that allows developers much more flexibility, compared to a traditional CMS. It is a more complex (and potentially more costly) solution that a traditional CMS, but at the same time it’s much more versatile and powerful.

Definitions

As with many types of technology, there are many definitions of headless CMS and commentators don’t always agree on the details. Nonetheless, most commentators would agree on the basic features of a headless CMS.

Perhaps the most comprehensive definition has been provided by Deane Barker:

“A headless CMS is an informal term to mean a CMS which has editorial and management features, but no delivery features. It exposes content via a web service for consumption by other systems.”

So let’s break this down:

A headless CMS does have:

Editorial and management features: this means you can insert, view and edit content, just like in a traditional CMS environment. You can also manage content, create a hierarchy, tag content, etc… This part is very similar to a traditional CMS backend.


A headless CMS does not have:

Delivery features: this is the main difference between headless and traditional CMS. In order to publish content with a headless CMS, an additional service needs to be attached to it at the frontend using an API - developers will need to create a separate ‘head’ and attach it to the headless body so that content can be displayed in the channels where it’s needed.

Another definition puts it more concisely:

“A headless CMS has no presentation layer. It deals exclusively with the content that it serves, as APIs, to external clients.” (Source)

⚙️ Learn more about CMS architecture on our developer site 


What Does This Mean for Your Business?

In a headless CMS, like in any other CMS, the authoring happens at the backend. This is where content creators come in and input their articles, videos, audio, etc.. The CMS then stores and organizes the content.

There is no designated frontend through which the content is published.

Developers can choose whichever framework they prefer and have it receive the content from the CMS. 

 For developers:

This kind of API-first framework allows for much more flexibility for developers. They can code the API in whatever language is most convenient to them - and most appropriate to the channel the data is needed in.

 For content creators:

Because the frontend and backend are two separate parts, content creators and administrators lose crucial features for their work, such as CMS preview, drag & drop and in-context editing. Unless the API is specifically programmed to mitigate this, content creators might end up back in the stone age entering content using a form and getting developers involved at every point in the process.

To solve this, you can either opt for a headless experience layer, or customize the backend CMS and the frontend SPA - which often comes at extra cost.

Luckily, there’s a different way to mitigate the issues inherent to headless, even when dealing with a complex architecture.

💡 Read this next: A CMS for SPA frameworks like Angular and React - that makes developers and marketers happy [blog]

 

 

Headless vs Decoupled CMS: What Is The Difference?

The architecture of headless and decoupled is quite similar - both feature a separation between the content repository at the backend and the publishing tools at the frontend. 

Decoupled CMS, however, comes with a built-in API that handles the front end, eliminating the need to build a custom-made API.

 

Decoupled CMS Architecture:

 

On the surface, it sounds great - combining a set of developer-friendly tools with a content creator-friendly environment.

But at a deeper level, decoupled has a few drawbacks.

Headless offers more options to develop each head separately. Every channel will need a different approach - this is especially true for newly developed channels and devices, such as smartwatches, VR headsets and IoT devices.

It does this by allowing your developers to develop a new frontend from scratch and gradually implement it, or simply use the existing frontend. This will help them tailoring the CMS to what your business needs today and in the future.

In a nutshell, headless is more flexible, powerful and versatile than decoupled - you’d have to look long and hard to find a roadblock you can’t overcome in headless.


Headless is great for developers, but could mean marketers and other content creators lose features such as preview and a WYSIWYG interface.

So what’s the solution?

You have two options. Either go for a Headless Experience Cloud that acts as the "head" for your headless CMS, equipping with it content editor features like preview and drag-and-drop. Or your second option is to develop a custom frontend.



Although headless doesn’t allow for advanced marketer functionality out of the box, features can be added as the frontend is developed.

Your developers may still need to be more involved in publishing content, but can make any adjustment on the fly, speeding up publication.

In addition to that, most industry experts see headless as the next step towards agile CMS, allowing for more powerful and more efficient content creation, collaboration and development.

🔑 Read this next: 3 Key CMS Features to Make Your 2019 Content Strategy Easier [blog]

 

Headless CMS Advantages

A good way to look at headless CMS is that it separates authoring from publishing. Authoring at the backend is completely separate from publishing at the front end. 

We’re entering an era of immersive interaction that takes us beyond screens. It’s important to start thinking beyond multiple screens - content will flow to the user in ways we don’t even know about yet.

At the same time, users will start playing a much bigger role, interacting with content in new ways and providing the content creators with more feedback.

That’s why traditional CMS won’t be enough for many companies in the near future. It’ll pay off prepare for this now by adopting advanced technology. To get you started, let’s take a look at some benefits of headless CMS.

 

1. Push Content Through All Possible Channels

Of course, traditional CMS can also publish to different channels (think of WordPress and its ability to publish to a browser on a computer, tablet and phone at the click of a button).

But, as devices and channels are multiplying and becoming more distinct, a headless solution offers the flexibility websites need. This fits in the general trend in content marketing and merchandising: content is created once and pushed through multiple channels using a COPE strategy (Create Once, Publish Everywhere).

A headless CMS is ready for this multichannel approach: it’s built into the design. It’ll help you publish content faster and will be easier to use for marketers. All they need to do is create the content and publish it everywhere it is needed at the click of a button.

 

 

2. Implementing Headless CMS Means Future-proofing Your Business

With Internet of Things in full swing, huge opportunities will be created for content delivery. Your fridge will give you advice on food spoilage, your phone will use AR technology to help you choose a pair of pants and your VR headset will give you tips on what in-game content to buy.

Even in more mundane channels, customer expectations are growing. Chatbots not only need to be as eloquent as humans, but also as helpful - drawing relevant information from a large content repository. 


3. Achieve Complete Coding Carte Blanche

Developing teams usually prefer a headless CMS over a traditional one, as it gives them a level of flexibility and freedom that just isn’t available to them in a traditional setup.

Let’s have a look at the main benefits for developers:

 Frontend agnostic:  Dev teams can use the programming languages and SPA frameworks they are most familiar with, increasing efficient coding and minimizing bugs.

 Easy code editing: Developers can make changes to the frontend without impacting the backend (and vice-versa). 

 Compatibility: Developers are not limited to the tools offered by the CMS, but can use whatever framework they want, including Angular and React to create advanced SPAs.

 Permissions: even though you’re dealing with multiple systems, you can still have an advanced permissions mechanism in place, with levels allowing user and administrator levels to view, create, edit and publish.

 Cloud scalability: With the frontend and backend completely in the cloud, it’s easy to scale as your business grows. Developers won’t lose time with editing, debugging and testing reams of code.

 

4. Create the Best Possible Experience for Your Customers

Ultimately, your customers are the ones who count, and they ben

Ultimately, your customers are the ones who count, and they benefit hugely from a headless CMS.

A headless CMS delivers the content you need where you need it, through an API. As customer touchpoints evolve, you can simply set up your system to deliver existing content to those new touchpoints, without the need to reprogram or rewrite content at the backend. 

This means you can publish content faster, making sure it’s always relevant to your customers. This will help you to unify and streamline your messaging so you can serve your customers better by optimizing their experience.

💡 Read this next: Customer Experience (CX): Definition, Importance and Ways to Improve It [blog]

 

Which Types of Businesses Benefit From a Headless CMS?

We posed this question to Todd Zeiger, Senior Manager of Business Development and Marketing at digital agency Authentic, who shared his take:

"Headless CMS solutions are perfectly suited for any organization aiming to create a truly differentiated customer experience. While we feel that every business – regardless of size or industry – would benefit from the adoption of a headless CMS, we believe that these solutions are particularly advantageous for Financial Services organizations, as well as for businesses that have a commerce element to their digital offering.

"The financial services space is currently undergoing a significant transformation. As the agents and 3rd parties that used to represent these businesses are disappearing, financial services organizations are engaging more directly with their customers across the digital channel.

"Aiming to establish a differentiated customer experience, these organizations need to craft an engaging, fun, and intuitive digital presence that personifies their brand. Using a headless CMS-based solution in conjunction with an Angular or React.js application, these organizations can more readily establish best-in-class digital experiences that can be managed by smaller teams and with less overhead."

⚡️ Watch this next: How Bosch Power Tools Adopted a Headless Experience Platform [webinar]

 

 

Use Cases for Headless CMS

There are a huge number of use cases for headless CMS - that’s the beauty of it, every business can tailor headless to meet its unique, specific needs.

Still, some use cases seem to pop up more frequently than others.

Here’s an overview of the most important use cases where headless CMS will work better than a traditional CMS:

 Multichannel content: Content creators can push their content through all imaginable channels. They can also re-use content across channels. Whenever a new channel is added to the marketing mix, it’ll be easy for developers to add a few lines of code to the API. This is a classic win-win situation for both marketers and developers.

📌 Read this next: What is Omnichannel Commerce? Definition, Benefits and Trends [blog]

 Ability to use JavaScript frameworks: Developers can set up SPAs using frameworks such as VueJs, React and Angular. This will integrate advanced functionality for content creators - combining a headless CMS at the backend with Single Page Applications at the frontend.

 Improved product information on eCommerce sites: This is especially the case for CMSs that are targeted at the kind of information an eCommerce merchandiser generally has to deal with - high volumes of highly structured information.

💥 Read this next: The Ultimate Guide to Headless Commerce [blog]

 Mobile apps: When it comes to non-web content like mobile apps, a headless CMS is crucial. You will need an API to push content to the app, so a traditional CMS simply won’t do the trick. Apps are just the start - non-web content is likely to explode over the next few years.

 

Getting Started with Headless CMS

We spoke to Authentic, an award-winning digital agency, on how to introduce a headless approach to your organization, including getting buy-in, migrating old content, and the mistakes they've come across that you can avoid. Todd Zeiger, Senior Manager of Business Development and Marketing, takes us through it:

 

Q: How do you convince management to switch to a headless CMS? How do you get buy-in?

"When explaining the benefits of a headless CMS to management and other business stakeholders, it’s important to highlight the technical advantages of the solution model, as well as their future-proof and extensible nature."

 The Headless Model

"While traditional implementation models require the CMS and UI to be developed in unison, headless solutions allow the CMS to evolve at a different rate than the UI. In establishing a true separation of roles, businesses can infuse speed into the digital maturation process, more readily align development with prioritized initiatives, and overcome the challenges often associated with more methodical and lengthy implementation patterns."

 Extensibility

"Headless solutions are also uniquely positioned to evolve alongside the ever-changing expectations of the modern consumer. Using a headless CMS solution, additional channels and emerging touchpoints - such as kiosks, apps, and even voice assistants – can be incorporated into the solution over time, with all content centrally maintained in a single platform.

"Delivering a highly future-proof architecture, headless solution models provide agility, simplify cross-channel engagement, and position businesses to more readily adapt to the newest customer experience trends."

 Emerging Frameworks

"Additionally, using a headless CMS solution allows brands to leverage innovative frameworks, like React and Angular, to craft truly best-in-class experiences.

"When we take inventory of the brands that are setting the pace for customer experience across the digital channel, like Tesla or Netflix, we are see that they have developed applications that are built on Angular or React.js (and often based on a headless content management solution).

"In an age where each of our customer experience expectations are often set by our personal interactions with these brands and sites, businesses should welcome the opportunity to use these frameworks and craft equally compelling experiences for their customers."

 

Q: How do you start migrating content to a new CMS?

"Often times, businesses migrating to a headless CMS model will try to leverage a highly developer-oriented design, in which content is treated as nothing more than data that is being queried by an external application. While this pattern works well for certain structured content - like menus - it fails to account for the truly experiential nature of the bulk of content residing in the CMS. 

"When beginning the process of migrating content to a new headless CMS platform, it is imperative that businesses take time to consider what the end-experience is going to look like and complete appropriate mapping exercises to guide the migration effort."

 

Q; What are the most common mistakes you’ve seen, when it comes to companiesadopting a headless CMS? 

"The most common mistake that we’ve seen companies make when adopting a headless CMS is designing a developer-oriented solution. When adopting a headless model, it is all too easy to design a developer-first publish model, in which content is misperceived as nothing more than data. In this model – in which the application simply queries data from the CMS - businesses often sacrifice the authoring and preview controls for which the CMS was selected.

"When introducing a headless CMS, it is imperative that the solution establishes intuitive content management controls and advantageous patterns for both authoring and preview. It is also important to select the correct technology on which to base your solution.

"If you’re not using a platform like brXM, you increase the likelihood of winding up with a form-based solution that inhibits advancement and success within a digital transformation initiative."

 

Going Headless

Ultimately, the decision whether or not to use a headless CMS depends a lot on what you aim to achieve with your content and merchandising strategy.

As content is being consumed through an increasing number of channels and content strategies become more complex, more and more companies would benefit from a headless solution.

The people who matter most here are your (potential) customers and the experience you can give them. Harvard Business Review wrote about this as far back as 2013 - good customer experience is likely to generate huge rewards.

Since then, the case for better experience has only become stronger.

 

Putting Customer Experience First

Customers (including you and me) are being spoiled like never before - they have access to incredible amounts of information that is being constantly updated and fed to them through dozens of channels. 

Companies should make it as easy as possible for customers to consume their content, absorb information and - most importantly - buy their products.

This is essentially what headless does - it starts by looking at what the consumer needs (i.e. a convenient and interesting experience) and then considers how developers, marketers, merchandisers and the rest of the business fit in.

Headless CMS will help you connect with your customers at a much deeper level, more quickly - you’ll be ready for a future where content flows freely through channels and customers interact with you in an ever-growing number of ways. 

If this is what next-gen content management looks like - will you be a part of it?

API-led Commerce Drives Next-Gen Digital Experiences

Bring your Content and Commerce together using APIs

Read the whitepaper