Save My Seat Webinar Dec 11th: Commerce 101: Every touchpoint, every channel, every customer
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”.

headless cms trends

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 a Traditional Content Management System (CMS)?

The traditional CMS (sometimes referred to as a “coupled CMS”) is perhaps the simplest in terms of layout and general functionality. In a traditional CMS stack, your backend and frontend are tightly coupled together; there is no API in between to handle the communication. 

If you’re looking to make a relatively simple marketing site, a coupled CMS is a good choice for its simplicity.

For those looking to host multiple sites, apps or kiosks or single page applications (SPAs) more complex systems such as a decoupled, headless, or hybrid CMS, would better suit these needs.
 

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!

 

What is Decoupled CMS?

The decoupled CMS is in some respects more complex than the traditional (or coupled) CMS. However, it offers advantages that the tightly-knit design of the traditional does not.

A coupled CMS architecture provides templating, design and channels in one go.

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.

 

Headless vs Decoupled CMS: What Is The Difference?

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 cms vs decoupled cms

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.

 Headless CMS let you push content through all possible hannels

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.
 

headless cms multichannel

 

  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. 


 You can achieve complete coding carte blanche with headless CMS

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.

 

 Headless CMS let you 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.

headless cms solutions

"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."

 

Wrap Up: 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.

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?

Let's get in touch

Interested in a Headless CMS?

Let's Chat
Interested in a Headless CMS?