Tools & Tips

Headless CMS: an Explanation for Marketers

Kristie Yung November 7, 2019

Technology is rapidly evolving, and these days learning about all the updates, releases and launches can seem like a full-time job. So when it’s time to overhaul your website, getting up to speed on the tech, so that you can make the best decisions about your new website, can be overwhelming.

Consider this your introduction to the future of content management systems. We’ll explore what headless CMS is, the difference between coupled, decoupled, and headless, and what we recommend for nonprofits.

 

What You Need to Know Before We Jump In

What Is a CMS?

A content management system (CMS) is a software application that helps users create, manage and modify digital content for the web. CMSs often do not require the user to have any knowledge of code.

 

Screenshot 2019-11-07 at 12.03.34

 

What is the Difference Between Frontend and Backend?

Traditionally, a CMS houses a frontend and a backend. If these concepts are new to you, CodeAnalogies does a great job explaining the difference with a restaurant analogy. 

Simply put, the frontend is how the website looks, and the backend is how the website works. Users interact with the frontend like a website, application, or smart watch. Content managers, designers and developers create and store data and content in the backend.

 

The Difference Between Coupled, Decoupled and Headless CMS

In order to fully understand headless CMS, we have to first understand the different types of CMS architectures. 

Screenshot 2019-11-07 at 12.12.23


Traditional or Coupled CMS

In a coupled CMS architecture:

  • The frontend and backend are linked. That means all the elements of a website or application exist in one place.
  • The content you create, upload and store is meant to be presented as a Wordpress website,  typically be used for a different purpose like an application.
  • This controlled and linked environment means marketers can build pages using themes and modules and preview them instantly.
  • All cooks are in the kitchen with coupled CMS, meaning content developers, managers, designers, and programmers are creating, editing, and publishing in the same space.

Popular coupled CMSs include: Wordpress, Drupal, Joomla, Shopify and Squarespace. 

 

Decoupled CMS

In a decoupled CMS architecture:

  • The frontend and backend are separate from each other. The backend lives in one place and the frontend lives in another.
  • The two are joined by an API, which is used to transmit requests between them. Think about waitstaff in a restaurant as an API. The client requests a dish and the waitstaff orders it from the kitchen.
  • Unlike coupled CMS which is developed in a specific framework, decoupled CMS stores data in its raw form so that it can be sent to any kind of frontend using any framework.
  • In general, frameworks make it easier for developers to do their jobs faster. If they’re able to choose any framework to work with, the time and cost of a project could be much less.
  • Content managers still have the ability to create and preview content because they already know how it will be presented (ie. a website or app).. While you can use the raw data for many different frontends, a decoupled CMS knows which ones those are (ie. a website and an application), so is prepared for it.

Popular decoupled CMSs include: DotCMS and Contenta CMS. Traditional CMSs like Wordpress and Drupal now have decoupled versions of their CMSs.

 

What is a Headless CMS?

In a headless CMS architecture:

  • You get the same elements of a decoupled CMS, with more flexibility. Headless CMS is a subset of decoupled CMS.
  • The frontend and backend are also separate from each other but in headless, there’s no predetermined frontend (head).
  • The content is presented as raw data, so it can be applied to any framework and any frontend. It’s completely open.
  • This means that there are no themes or previews available for content managers using headless CMS because the CMS doesn’t know how the frontend plans to prepare the data. 

The main difference between decoupled and headless is that decoupled is developed proactively, meaning it is developed with the way that it is meant to be presented (like a website or app) in mind. Headless, without a head, is reactive, meaning how the data will be presented is only known as it’s needed.

Think of a restaurant menu. In a decoupled architecture, a client can order a pizza or a hamburger. In headless, a client can order anything that the ingredients of a pizza or hamburger is made of, like an open-faced pepperoni sandwich.

Popular headless CMSs include: Contentful, Prismic, Dato CMS, Strapi, Directus and more.

 

Screenshot 2019-11-07 at 11.30.33

Should Nonprofits Consider Headless CMS?

Developers and their clients like headless because it gives them more flexibility, efficiency and accessibility. 

As for which headless CMS we recommend for nonprofits, the answer really depends on what you are building and what you foresee building in the future. Here are a few scenarios that your organization might relate to:

 

Just Getting Started

A traditional CMS is great for organizations that are just starting out, have basic needs and who don’t have access to a development team. If a simple website is all that’s on the immediate horizon, there’s no need for bells and whistles. A coupled CMS will also allow your in-house team to create, preview and publish without a developer’s involvement. 

This doesn’t mean that customization and more advanced features aren’t possible. It just means that everything will be built within a specific framework and therefore not easily transferable to another frontend.

 

En Route to Bigger Things

A decoupled CMS makes more sense for organizations that intend to engage their audiences through multiple presentation channels. At this stage, content can still be managed, previewed and published with ease within the safety of themes and templates. If you know what you plan to develop in the future, decoupled gives you the option to efficiently and cost-effectively make that happen. Not to mention the fact that the freedom of using any framework means you can work with any developer you’d like.

An added cost-savings benefit of decoupled CMS is that it opens up the flexibility for scaling. If your website gets overloaded with hits, you’ll need to upgrade your frontend capacity. If your database gets to full, you’ll need to increase your storage. With decoupled, you can do one independent of the other, saving you the cost of upgrading both together.

 

Trailblazing 

If you’ve got big plans or are future-minded, headless CMS will make the most sense for your organization. With headless CMS you don’t need to decide what frontends you want to make available for your users. The possibilities are endless. All your content is raw, so you can do anything with it--build a progressive web application, a virtual reality experience, or another website. 

Even if you don’t have exact plans, investing in headless CMS gives you the option to develop anything, including new technologies we haven’t even heard of yet. Your organization can stay current, without the cost of starting from scratch with every new device you engage with.

With more flexibility comes less control. With headless CMS, content managers lose the ability to preview the frontend as they make updates to the backend. But with a solid development team or digital agency behind you, your organization can worry about the content, and the digital team can make it all a reality.

 

Screenshot 2019-11-07 at 12.05.52

 

Understanding the different CMS architectures and which one is right for your organization can be complicated. It’s typically the job of a development team to assess your organization’s needs and make a recommendation. But we know that not every organization has the capacity for an in-house developer, and the decision is left to non-programmers. We hope this guide has helped you better understand the basics, so you can be involved in the conversation. 

If you have questions or want to talk it out, give us a shout and we’ll be happy to help.

 

 

Contact Us