Using Headless & Contentful to Deliver a Better Experience

In last week’s blog we looked at how JavaScript is making us more efficient as a team. It’s the perfect programming language to tie together many of the things we do as software engineers and product builders. We also touched upon ‘headless’. And that’s what we’d like to explore today.

We’ll be explaining how a headless CMS differs from a monolithic CMS such as WordPress, the benefits that headless can bring to content managers (ie: our clients), and we’ll very lightly touch upon ‘headless WordPress’, which is proving popular with marketing teams already familiar with the WP interface.

What is a headless CMS?

We’re not going to get too technical here, and we’ll let our diagram do the heavy lifting. Instead, we’ll speak in the way that we’d sell this to our clients, as the methods and processes are what really make it an attractive option to the teams that we work with.

A headless content management system is one that has been decoupled from the platform’s architecture. Typically, a CMS works in a front-end and back-end capacity – the front-end is the presentation layer (how it looks) and the back-end is the content layer (how it reads). Headless does away with the presentation layer (which is instead served by an entirely separate solution) and the CMS now acts purely as a content editing service.

 

 

How did we get here?

Actually, this is two questions. How did the industry get here, and how did we get here? Let’s start with the first.

WordPress installations, for the most part, use themes. Of the 455 million WP-powered websites in the world, a vast chunk of that will be running an installed ‘theme builder’ (like Zion, Divi or Elementor). These builders allow owners to choose from pre-designed templates or components to build their website. Think of it like a hamburger – the theme builder has provided the bun and the fillings, but you can cook and season them how you like, and stack them in any order you want. Sure, this is limiting, but it’s a popular route to building a professional online presence with a rocksolid CMS to power it.

Because of the way these templates are built, there is a mix of HTML and PHP which is rendered server-side. This can harm performance compared to other methods such as static site generation. Every time a website visitor hits a page, the browser must pull all of the content from the web server. Over and over again.

Alongside this, the content manager is responsible for the design and the content of the website, and because this is a pre-built template, the design often dictates how you structure the content, despite these themes being relatively customisable.

So let’s quickly recap: When the front-end and back-end are coupled together, not only is site performance affected, but content managers are also tied up in worrying about design and layout when they’d rather not be.

This ultimately means that marketing teams are holding back when it comes to creating good content, or they are relying on agency or in-house teams to spin up a new page or blog layout. This adds unnecessary cost and time and takes people away from focusing on producing great work.

As an agency, it also means that you may find yourself servicing a great deal of ‘content woe’ tickets from your clients, who need help aligning images or adding in graphs and charts.

 

 

The benefit of headless

Hopefully you can see where we are going here. By taking the design and development onus away from the marketing team, there are fewer ‘computer says no’ moments, and content managers can focus on inputting content rather than formatting and designing content. It’s important to know that we’re not just talking about blogs here. Content could be news stories, whitepapers, product descriptions or reviews. 

With headless, content editors no longer need to be CMS specialists for whichever platform they’re thrown into. Instead, they can use tools, fields and methods that format their content specifically for where it will ultimately be delivered. This also means that content can be displayed in multiple places at once. For example, a news website may want to feature a story on their homepage, in a sub-page and also push a partial edit of the content to users’ smartwatches. 

From a technical standpoint, and providing that a suitable tech stack has been developed, headless websites will load measurably faster than typical CMS websites. A fast website shouldn’t be underestimated. Search engines look at load speed as a ranking metric, so a slow and bloated CMS may actually be harming your website’s SEO. Fast websites also convert better, and this is backed up by research. Remember, internet users are fickle and have no time to wait around for images to load.

The AndAnotherDay approach

We certainly haven’t introduced headless overnight, and it isn’t a blanket approach either. To begin with, our average WordPress client won’t be encountering some of the frustrations that we’ve covered in this email because we offer several tools and add-ons that make adding and editing content very easy.

The clients that we do feel are suitable to transition to a headless, or any new clients that we believe would benefit from headless, will only be specified if we are absolutely certain that it’s a good fit for the project and the team. If you’ve read our content before, you’ll know that we like to use the best and most suitable tools for the specific job at hand.

 

 

Meet Contentful

There are a number of headless frameworks available, each varying in their offerings and abilities. We’ve settled with Contentful, which ticked all of our boxes for speed, integration and intuity. Contentful have been a frontrunner in the headless CMS world since the early beginnings, and they now provide websites for over 10,000 customers and 400,000 users. They also offer integrations with over 300 technology partners, and this really stood out to us.

Integration is key to the work we do. No two projects are the same, and our clients’ needs vary greatly. Applications and services such as Netlify, Gatsby Cloud, Shopify and Jira are very simple to set up with Contentful, and allow us to add advanced features to our clients’ websites, such as ecommerce or ticketing.

As a client, a solution like Contentful will break down content silos. Teams will no longer need to worry about hard-coded content existing in multiple places, or worry about bothering a developer every time you want to change an image.

There’s also a degree of future proofing, too. Many of our clients are greentech startups, and aren’t quite ready for all the bells and whistles just yet. But as their organisation gains traction and their reputation grows, so will their digital needs too. Contentful makes it easy to scale to enterprise-level, and offers enterprise level security too.

A smarter approach for a smarter world

Headless fits perfectly into what we want to do as an agency. It makes us more nimble and efficient. It strengthens our relationships with our clients, giving them the tools and space they need to produce their best work. And it opens us up to a broader range of integrations, which is fundamentally important in an industry where change can happen over night.

We won’t be going entirely headless overnight. We continue to use other CMSs where we see fit, and we also have some hugely exciting Contentful projects coming up – and we can’t wait to tell you all about them.