Making Headless Accessible

The category of Headless CMS-backed websites has emerged in recent years as a modern approach to managing websites. A Headless CMS architecture is very different from a traditional CMS (monolithic CMS) like WordPress which has dominated since its emergence 20+ years ago. While traditional CMSs tend to be all-in-one website builders, Headless CMSs are decoupled. In short, the front end (how the content is displayed/rendered) is separate from the back end (where the content is stored and managed). 

So why would someone contemplate ditching the all-in-one world approach that has been popular for so long?

The Advantages of Headless

There are several reasons why Headless is attractive as an alternative. One major reason is that issues with WordPress (especially for mature sites) mean that marketing and development leaders want to migrate off WordPress. These reasons can include website bloat, other performance issues, perceived security vulnerabilities, and scalability issues. 

Headless CMS-backed websites tend to be bespoke website builds, and sit at the opposite end of the spectrum from “fast and cheap” template-based websites. So a traditional CMS will work well for a startup, a personal site, or a business site that is not designed to scale and grow. 

The advantages of a Headless CMS include:

• Enhanced security (more secure architecture)

• Bespoke web design (create a unique design that stands out)

• Blazingly quick page load times (all things considered)

• Developer flexibility (no vendor lock-in and select best-of-breed tools and frameworks)

• Perfectly suited for omnichannel content delivery

• Built for scalability (no need to bake in a major site migration down the road)

However, as I have argued elsewhere the CMS decision is very much a “horses for courses” selection. Both have their pros and cons. And depending on what you are trying to achieve you may be led in one direction or the other.

The Disadvantages of Headless

The main disadvantages of Headless include:

• Bespoke design comes at a cost - so it is a more expensive route

• The time to build can also be longer given the focus on quality

• Migrating off a legacy CMS can be a painful exercise

• A new Headless CMS site won’t necessarily replicate a mature WordPress site

• You’ll need access to a front-end developer to help with maintenance and new page development

I guess a key point to flag here is that for larger companies (who have tended to be the main ones moving to Headless most of these disadvantages are pretty minor). For the right use case and with adequate resources a Headless deployment represents a very attractive site upgrade option.

A Headless CMS lends itself to a Jamstack CMS based approach to building websites, typically that consists of:

• JavaScript (running in a browser or server-side), 

• API (dynamic content), and 

• Markup (prebuilt, generated by a static site generator, and delivered via a CDN)

Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. Jamstack removes the need for business logic to dictate the web experience. It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs.

— Source: Jamstack.org

In short, what this means is that you’ll need external support be that in the guise of a Jamstack freelancer or specialist Headless CMS agency for both the build and ongoing maintenance. 

This is a key point.

Headless CMS site builds can be very tricky and you want to ensure you are using a dedicated specialist. Of course, no agency wants to turn down business in these times of tough market conditions, so you need to ensure the partner you select is not just bolting a Headless CMS build-on as an extra service. This is particularly the case with agencies who have historically been WordPress houses. 

A B2B SaaS website migration is a significant task, especially for mature sites, so again that needs to be handled carefully to ensure there is no “collateral damage” with the migration e.g. lost organic rankings.

In short, if cost is a driver/concern then choosing a Headless CMS may not be the best route to go down.

The Challenges of Building Headless Sites

The challenges of building a Headless CMS-backed website are best viewed through the lens of an all-in-one website builder like WordPress. 

Because a template-based approach is more of a “mass production” approach agencies tend to have it down to a tee in terms of costings, timelines, retainer maintenance requirements, etc.

A significant WordPress ecosystem exists, there are lots of plugins that can extend the functionality of the core platform, plenty of themes to choose from, and market pressures keep the day rate for WordPress developers down.

All of which contribute to speedy delivery, and modest costs. 

With a Headless build, you are in a very different category however. As well as the hand crafted nature of a custom bespoke site, there are a lot more unknowns - all of which spook agencies leading to lots of buffering. All of this uncertainty pushes timelines and budgets out significantly.

Answers to questions like these can all add significant cost to the proposal:

1. How big is the site migration?

2. How many pages exist?

3. How many page types are required?

4. What WordPress plugins need to be replicated?

5. How much design is required?

6. Will there be much push back/ many iterations?

But the real challenge comes with all of the wiring or plumbing. As a still nascent category, there are not yet lots of “rinse and repeat” components available (in stark contrast to WordPress) so with many Headless builds developers are often building from scratch. Not only does this take more time, but it also means more senior resource needs to be working on the project, and these bespoke builds can lead to nasty downstream surprises after the site is handed over. It is also why you will need a front-end developer on hand to help maintain the site afterwards and to add back in elements that are now found to be missing, as well as to design and build new pages in the future.

In short, while Headless CMS offers significant attractions, the build process is much more complex than a traditional CMS or site-builder based website build, and it is important to be aware of that upfront to help align expectations and avoid nasty surprises.

We’ve identified a pain point in Jamstack that no one else seems to have yet solved; the huge void that exists in developer tooling for building out the foundations of bespoke sites. As a developer, once you’ve fetched the raw content from a headless CMS, you’re on your own.”

— Source: Rory Pickering, Product Design Lead at Contento

So how does Contento fit into this world?

Contento is a new breed of Headless CMS that has a different approach to the incumbents. 

We make a simple assumption that you are looking to use Contento to manage a website. 

This assumption has profound implications for the developer using Contento, compared to other Headless CMS’ that promote the value of ‘blank boxes’ that facilitate ‘omnichannel content delivery’. 

Because of our opinionated stance, we can ensure the feature set is hyper-focused on delivering on this aim.

It also means we can target two of the biggest pains in the wider Headless space - the time taken and costs required to launch a Headless CMS-backed website.

Not having reusable component foundations makes working with a headless CMS or Jamstack build time-consuming, and drives the cost of a project up.

— Source: Josh Angell, CTO Contento

How Contento Helps Agencies Build Headless Sites?

Recognising the challenges many agencies were having with Headless builds we decided to focus on the three constituent elements of a Headless site.

1. The Design

2. The Plumbing

3. The CMS

Within these three elements, there is a wide range of options. All of which can spike costs and timelines. 

1- The Design

We are design agnostic, essentially encouraging the user to “bring their own” design. 

This could be a bespoke design as a Figma file or an off-the-shelf template that can be tweaked. 

We see this section as where the magic can be added and thus is where the bulk of the agency investment should go.

2- The Plumbing

At present a lot of the time and cost of Headless builds is taken up in the wiring, gluing or plumbing - however you want to describe it.

The complexity introduces two other elements (1) risk and (2) cost. 

Why? 

Well, it probably means you’ll need your most experienced (and thus most expensive) dev on the project and secondly they may often need to “reinvent the wheel” on a case-by-case basis.

This is an area we feel is ripe for change. 

What if we could reduce the risk (and the cost) by enabling more junior devs to “rinse and repeat” using actual code that flows through from the content models in the back-end to a matching front-end component?

As a result, we offer:

• Starter kits: working git repos, paired with a deployable site in Contento. Some will have little or no design and will serve as generic starting points, like a wire-framing kit. Others will have a thin layer of design. All will be previewable.

• Sign-posting to hand-picked select themes that can be used for the front-end design (or you can “bring your own”).

• Ready-to-go “content types” speeding up the build process (no need to reinvent the wheel).

• Vanilla components with minimal styling (speeding up the process but leaving the design to a specialist).

• A definitive quick-start guide that walks you through each step from signing up to having a site running on Vercel or Netlify.

3- The CMS

The whole ethos of Headless/Jamstack is the ability to pick best-of-breed components and to avoid vendor lock-in, swapping in different tools and frameworks as you see fit. Thus while we have designed our starter kits with the Contento platform in mind, they’ll work equally well with any other Headless CMS you may prefer.

That all said, because we are focused hard on Headless for websites, and have built our platform with non-technical users in mind we feel many more junior developers will enjoy working with Contento and can use our whole ecosystem to get started with Headless in general.

Despite the growth of Headless CMS-backed websites, the current ecosystem suffers from a lack of experienced Jamstack developers, an immature “rinse and repeat” toolkit, and a complex architecture that takes more junior developers out of the picture. Add to this the craft-like design focus for bespoke custom designs, and these various factors contribute to extended delivery times, and eye watering build quotes that means that up to now it is only the biggest of brands have been able to access this cutting edge approach to website management.

At Contento, we are working hard on reducing the friction, offering not only a headless CMS designed specifically for websites, but a range of components that enable more junior developers to get started quickly in a practical way.