Insights, Web Development
What is a Headless CMS?
Everything you need to know about the Headless approach explained
Traditional CMS has been around since the early days of web development in the face of popular CMS platforms such as WordPress, Webflow, Hubspot CMS, Shopify, Craft CMS, Drupal, and other big names. These platforms were designed to store, manage, and present content elements on websites. But what about having a single CMS that can distribute your content to multiple platforms in one click? In this blog article, we’ll take a look at the headless approach and explain what is a headless CMS, its benefits, and when a business should consider going headless.
The Pocket Guide to Headless CMS: Overview
What is a Content Management System?
A CMS is a software tool that helps you build websites without the need for technical knowledge. The system allows you to create, store, collaborate on, manage, modify and publish your content on a website, all in a pre-made interface. Since it handles the infrastructure for you, you don’t need to write a static HTML file and upload it to your server. CMS platforms are typically used for enterprise content management and web content management.
Although different CMS platforms offer various tools, the core features usually include the following:
- Indexing: CMSes feature indexing data through searching by attributes such as publication dates, keywords, or authors.
- Revisioning: Updating and editing content after initial publication. Revision control also tracks changes to files by individual editors.
- Publishing: CMSes enable editors to use an approved set of templates for content creation and modification.
- Personalization: Various personalization tools and one-to-one marketing tools for tailoring content to meet users’ specific characteristics, related to the data users provide for the application.
- Other common in-built tools: SEO and SEO-friendly URLs; discussion boards; permission-based system for teams; templates and ability to customize templates; admin panel for managing content; minimal server requirements; file managers; etc.
With this being said, all these features sound familiar to users who’s been working with traditional CMS platforms such as WordPress. This leads us to the next question.
What is a Traditional CMS?
A traditional CMS platform such as WordPress integrates the front end and the back end systems so even the non-tech-savvy content creators can manage a website through an admin panel. The front end consists of HTML templates, CSS, and JavaScript, while the back end refers to the web architecture, code, and database.
In this sense, traditional CMS platforms are monolithic, which means it creates bonds between the frontend templates and the backend administration, rendering, controllers, and databases.
Here’s what defines a traditional CMS:
Monolithic structure
The front end and back end are bonded in a single technical area with the purpose to feed content to your website. This type of structure grants users a full out-of-the-box solution for creating and managing content without requiring technical knowledge. However, this happens at the expense of flexibility. Further customizations and additional functionality will require the work of a developer.
Content management
Usually, content isn’t stored in modules, so it’s difficult to reformat or reuse content assets. However, traditional CMS offers an abundance of content management features for text formatting, managing assets, tracking versions, setting permission-based roles, etc. Most traditional CMS platforms include WYSIWYG editors that allow content creators to see exactly what their content will look like once it goes live on the website.
Templates
Traditional CMS platforms were created to deliver content to a website alone for users from any technical background, this is why they usually rely on pre-made customizable templates for displaying that content. Users can customize the templates to some degree. However, full customization as well as changing functionality requires to do some coding.
Plugins
To add new features or functionality to your website outside the built-in tools you get from the CMS platform, you need to install plugins. Most traditional CMS platforms offer app stores with a handful of plugins that you can easily install, however relying on plugins has a potential downside. Depending on who codes or updates them, or how compatible they are with the theme, they can result in a messy code and even bring your site down.
Simplicity
Traditional CMS offers a simple web-based experience for content creators who wish to quickly set up a website and start publishing content. These platforms offer a huge set of content management tools, SEO tools, and analytics. If your business doesn’t have development resources or multiple platforms and channels for digital content, traditional CMS is the ideal choice.
What is a Headless CMS?
A headless CMS is similar to a traditional CMS, however, with one key difference: the headless CMS doesn’t have a front end. This means it doesn’t handle the display component of your website for you.
Here’s how it works:
The headless CMS disconnects the back end “body” from the front end “head”. You create, manage and store your content in the “body” while you format, design, and distribute it from the “head”. These two parts are connected only by an API which enables communication between them. Basically, the API lets your application communicate with other applications without having to know how they’re implemented. Your application sends a remote request structured in a particular way, while the other application responds accordingly
This structure makes headless CMS really flexible and beneficial to:
- Developers: They can choose their preferable frameworks and code languages in order to build a custom front end, while the platform handles the back end and APIs.
- Businesses: More control over their e-commerce sites. Business owners can personalize the shopping experiences of their customers and make their websites more enticing and engaging than ever before with the most modern e-commerce features.
- Content creators and marketers: The ability to create, manage and store content in reusable modules.
Headless CMS solutions usually offer the following core features:
APIs
API is the core of the headless CMS technology. It stands for Application Programming Interface and it serves as a tool to deliver content by sending a network request to an endpoint. Some APIs deliver content to omnichannel digital experiences. Others serve to create communication channels between applications. The latter often contain customer data and serve to create personalized customer experiences.
Consolidated content repository
Headless CMS solutions give you a single hub where you can build custom content models that fit your project needs, store and organize that content, and distribute it to any platform. Consolidating all of your content within one API is efficient and minimizes spending resources. You don’t need to copy and paste content for different platforms. Everything is in one place.
Integration Ability
Since the headless structure is connected via API, this makes it easy to integrate third-party apps. You can integrate CRM platforms, PIM software, ERP tools, analytics, and all the tools you need for your business.
Content Management Tools
Similar to traditional CMSes, headless CMs solutions also have rich text-editing capabilities, reusable content models and modules, creation and approval workflows, rules and permission settings, publishing automation, etc. Contentful, for example, has content modeling where you can create and customize each content model depending on what you need by using up to fifty data types. You can also reuse and recreate different components from the already existing patterns of content management.
Developer Resources
Headless solutions feature resources for developers such as webhooks, frameworks, SDKs, DevOps services, well-documented APIs, and CLI migration tools; as well as tools for avoiding manual migration, minimizing custom development, and eliminating content change backlogs.
Omnichannel freedom
With traditional CMS platforms, you are limited to delivering your content to the channels the CMS supports. Headless commerce, on the other hand, allows you to create your own front end and offers an easier way of scaling on new sales channels. You can seamlessly publish and manage content across various channels from a central hub. This way you won’t have to manage content for each platform and device.
Team flexibility
Content teams can publish the same content across platforms in one single hub, as well as build an organized content infrastructure for anyone to come in and use. In addition, headless CMS allows developers to work with any modern language stack they like. Contentful, for example, supports SDKs for JavaScript, Ruby, PHP, and the most popular languages.
Future Proof Content
Since the front end and back end are separate, any modifications to your content, redesign, product changes, and migrations have minimal impact.
Headless CMS, Decoupled CMS, and CaaS: What’s the Difference?
When you research headless CMS, you will often come across techy buzzwords such as decoupled CMS and Content as a Service (CaaS). These terms might be similar, but certainly not interchangeable, so let’s compare these systems.
Headless CMS
In short, headless is any CMS that does not have a front-end system or presentation environment as it separates formatting from content. It’s API-first and allows you to publish content to multiple channels (mobile, VR/AR, Web, Voice, Wearables, etc.) The CMS becomes a centralized place where you store your content. Unlike decoupled CMS, headless architecture is a content-only source of data. This means it doesn’t have the functionality within the CMS to present content to an end user on its own.
True headless CMS is any CMs solution built from the ground up as an API-first CMS.
Decoupled CMS
It separates the back end and the front end management of a web application into two different systems: for creation and storage, and for presenting content. The difference is that the decoupled CMS comes with a “head” and using it is completely optional.
The front-end CMS architecture is predetermined with a specified delivery environment. Unlike headless CMS, the decoupled architecture prepares the content on the back end, and then it can deliver the formatted content to multiple channels.
In short, a decoupled CMS can do what a headless CMS can, however, it also takes the presentation layer into consideration. A perfect example of decoupled CMSes is traditional CMS platforms that are delivering decoupled versions of their CMS, such as headless WordPress which provides users with plugins that decouple them from their front ends; or headless Shopify.
Content as a Service (CaaS)
Content as a service (CaaS) is a method for businesses to access content stored in a CMS and then deliver it in appropriate formats for various channels through APIs. It focuses on separating formatting from programming; providing content via API, and measuring content consumption.
The concept of Content as a Service draws a clear line between the content creators, and the people delivering the content. Headless CMS and Decoupled CMS are both Content as a Service use cases.
What is API-First Content Management?
API-First CMS is a Headless CMS. This means you can pull data in and out of the headless CMS platform using API calls. For a headless CMS, an API is a connector that interprets the logic from the backend and communicates with the frontend layer. no matter the channel, serving content to every platform and device is just an API call away and will be delivered as JSON.
In terms of practical benefits for businesses, an API-First CMS allows brands to reach out to consumers on any device, including IoT and smart products. Furthermore, businesses can also dictate their MarTech stack and define their own digital experiences.
Use cases for Headless CMS
It’s important to start with the fact that headless CMS isn’t limited to websites. You can deliver your content through API on an Android or iOS application, as well as any digital platform. So let’s see when it’s appropriate to use headless CMS.
Headless CMS is beneficial to big digital agencies and digital-savvy enterprises that want to build apps for advanced high-value digital experiences. For a smaller business, using a traditional CMS is way faster, more effective, and cheap.
The same goes for non-web content publishing. If your content powers mobile apps only, you might want to skip the entire web CMS experience, as you won’t need most of the functionality.
So, when is it best to use a headless CMS?
Complex customer experience
Enterprise-level digital businesses often operate dozens of applications for various phases of the user journey. Let’s take banks, for example, which have custom apps for personal banking that users can access through desktop and mobile. Headless CMS helps these organizations display accounts, cross-selling and up-sell offers content to users within the personal banking experience.
Multichannel content delivery
For big companies with multi-channel customer experience. The headless approach makes it very easy to deliver content to radically different channels without the need to manage the experience by using separate tools and processes for each channel.
For full customization
When you need to use pre-built ERP or CRM; go for custom builds using API and SDKs. Open architecture grants you full freedom in personalization. You can integrate all your existing systems using any programming language you like. Not a fan of Shopify’s Liquid? No problem.
For additional flexibility
When you need to integrate content from one platform to another. For example, if your mobile app needs to be developed with the same content as your web app.
The need for speed
Traditional eCommerce platforms were not built with site speed as a priority. When you separate your content from the tech stack of your web application, you can create fast-loading pages across desktop and mobile devices.
Advanced eCommerce
You can up your eCommerce stack (Shopify, BigCommerce, etc.) with a proper CMS for your marketing team. Headless Shopify stores, for example, are an amazing option for merchants who want to make their stores more customizable, attract clients with better visuals, and embed many useful tools, such as chatbots, voice commerce, social commerce, etc.
Headless CMS Options: Contentful, Prismic, Sanity
When we talk about great traditional CMS options, it’s easy to point out popular, powerful, and proven platforms such as WordPress, Shopify, BigCommerce, Webflow, CraftCMS, Hubspot CMS, and Squarespace. You can check out a comprehensive review for each of these CMS platforms by clicking its respective name. However, which are the headless CMS options you might like to have a look at to find your best fit?
All three headless CMS solutions offer a free plan, so you can check them out and see which one is right for your needs.
Contentful
Contentful is an API-first CMS platform that uses its own API to create the editor administrative tool it offers. This means the developers get multiple APIs, an infrastructure to host content, and an editor tool to manage that content. The front end and the delivery channel are all up to the developer to create.
Being a headless solution that allows you to separate the back end and the front end, it extends what you can do with your content and makes it very easy to deliver content to radically different channels without the need to manage the experience by using separate tools and processes for each channel. There aren’t any pre-made content models, since Contentful let you define your own without unnecessary content elements.
Highlights:
- A Single Content Hub: you can build custom content models that fit your project needs, store and organize that content, and distribute it to any platform.
- Content Modeling: You can create and customize each content model depending on what you need by using up to fifty data types.
- Omnichannel Content Distribution: You can seamlessly publish and manage content across various channels from a central hub via the Contentful API.
- Multichannel Distribution: Content teams can publish the same content across platforms, as well as build an organized content infrastructure for anyone to come in and use.
- Reusability: You can reuse and recreate different components from the already existing patterns of content management.
- CDN: The platform provides a content distribution infrastructure so users can benefit from high-speed delivery and service.
- UI Extensions: For developers to extend the functionality of their web applications by adding custom fields in the content type. You can use the custom fields to render third-party data.
- Backup: All your data is backed up on two separate servers. Additionally, if any data gets deleted, there’s a 25-day window for recovery.
To learn more about the platform, you can check out this quick Contentful review, where we explain the pros and cons of the platform, how it works and what makes it different than other headless solutions.
Prismic
Prismic is a SaaS-based, headless CMS, built for both startups and enterprises. This means the platform offers the standard Saas features such as hosting, updates, security, customer support, etc; as well as some powerful headless CMS features.
Highlights:
- Custom type builder: You can use content components and predefined blocks for composing rich pages without the help of a developer. Choose between a repeatable type and a single type and configure each block easily with a drag-and-0drop editor.
- Integration fields: The ability to connect to your existing catalog and bring products to your websites and apps.
- Project management: The platform uses three categories for your content: “Work” for current projects; “Planned” for future content; and “Archived”. This is very useful for editors to understand the progress of their content at first glance.
- Scheduling and previews: You can review your content before it goes live, and set the publishing date according to your schedule.
- Versions: Similar to traditional CMs such as WordPress, you can roll back revisions and check the activity log for changes.
- Multi-language: – The ability to localize content to reach foreign markets.
Prismic is a highly approachable and easy-to-use headless CMS platform with a built-in project management system.
Sanity
The Sanity Composable Content Cloud is a platform for structured content with Sanity Studio, an open-source headless real-time CMS, that you can use to customize with JavaScript and React. A very popular solution for its approachable editor interface where you can start publishing right out of the box. You can customize the editor using the built-in structure builder and custom components.
Highlights:
- Sanity Studio: Customizable open-source headless real-time CMS with plugin architecture and custom input components.
- Developer tools: The ability to bring your own front-end and programming language.
- Content lake: The ability to use structured content to integrate across organizations, assembling your infrastructure from the best components.
- Real-time collaboration: Actual real-time collaboration, live multi-user editing, track changes.
- Schema: The main mechanics for describing your content and how to interact with it in the studio.
- Advanced Image API: The ability to define areas of interest, generate LQPI images, and let the front end decide on the image sizes, and cropping.
Considering going headless? Schedule a meeting with our tech-savvy managers to discuss if the headless approach is right for your business.
To Sum Up
There isn’t a one-size-fits-all solution, however, traditional CMS is always the better option for smaller businesses that don’t necessarily have the resources to use headless effectively. If you have neither a development team nor an external partner, or if you have a simple website or app that utilizes the in-built functionalities of your traditional CMS, switching to headless is an overkill.
However, consider headless CMS when additional flexibility is needed such as integrating content from one platform to another. For example, if your mobile app needs to be developed with the same content as your web app.
In the meantime, you may also be interested in some of these related articles: