Why the future of the web is Headless
Anyone who’s been involved in a high-end website rebuild in the last year or so would have no doubt come across the expression 'Headless.'
Hallam on why Headless is appealing to brands as an empowering content platform.
Industries go through trends, and we are very much past the exploration stage with Headless and moving into ‘The Next Decade of Web’. The technology has been created, alliances have been formed, and now the technology is in use, tested and stable, it’s time to start using in the wider market.
It’s useful to cover a bit of history to set the context.
The 2000s saw Web 2.0, where we moved away from the technical ‘Webmaster’ editing and managing a website, to use CMS (Content Management Systems) that were usable by anyone, technical or not.
The 2010s saw the move to responsive design, where the same website was optimised for both desktop and mobile experiences to support the rise in mobile devices. We also saw the rise of APIs (Application Programming Interface) during this decade too.
APIs are a way of two pieces of software integrating with each other through a set of standards. They make it easier for web developers to integrate two different websites together, such as displaying a list of tweets, on a site that isn’t Twitter itself. You’ll be using these every day without even realising you’re using them.
The 2020s will be the move to decoupled websites, where your front end and back end are completely separate but integrated.
What is a decoupled CMS?
A decoupled CMS is exactly what we’re talking about: where the front and the back end of the website are totally separate.
Websites are often powered by a CMS so that content authors can publish articles easily without needing a developer. They all have a method and set of standards for developers to create a visual look and feel of the website, usually called the theme or template.
These set of standards require deep knowledge of the CMS and have led to developers and agencies specialising in specific versions of CMS.
Headless takes this a step further, by completely separating the front end and the back end, removing that reliance on a deep specialism of the CMS. Your content authors will still work in your CMS, but the developers work on a total separate front end.
It’s similar to how many cars are manufactured. There are only a limited number of engines (synonymous with the CMS) but many different manufacturers who have produced cars that look very different (synonymous with the theme).
What is a Headless website?
A Headless website is a site that takes advantage of a decoupled CMS. There is nuance in the difference between a decoupled CMS and a Headless website, but for the purposes of this article, we can treat them to be the same.
What are the benefits of a Headless website?
It’s fair to say that we’re still in the early days and haven’t realised the full potential yet, but there are some clear benefits of having a headless website right now.
It avoids the CMS specialist expertise trap
As mentioned earlier, many agencies and developers have specialised in a particular CMS over the years simply because it makes sense to do one thing and become an expert.
Headless websites help us avoid this problem because you don’t need to be a CMS expert, you need to be a Headless expert.
As long as your CMS has an API, any agency or developer with Headless expertise can build a front end for it. This means you no longer have to move away from that developer or agency you’ve spent years building a good relationship with just because they don’t know WordPress or whatever your new CMS will be.
Load speed and customer experience
With the right technical stack, such as Jamstack, and the right approach towards developing the Headless app, Headless websites often load faster than native CMS websites. The way that content is taken from the CMS, cached and then displayed on the Headless app is faster by design.
It also means that we’re working outside of the constraints of the CMS’ theme engine and starting with a blank canvas using tried and tested technology.
Fast websites are important for a number of reasons, the two most important being that search engines look at load speed as a ranking signal, and secondly there is a huge amount of research that shows that fast websites convert better. How many times have you got bored waiting for a website to load and gone elsewhere? I’m sure we’ve all done at one time or another.
Managing risk when re-platforming to a different CMS
Replatforming, when you change from one CMS to another, is an essential part of the growth of many companies. For example, you may have been using Drupal for years, but find it hard and expensive to work with, and decide it’s time to make use of the skills of a new member of your marketing team that knows WordPress well.
It’s a very risky but critical project you have to do from time to time. The risk is there because we’re changing everything at once, your CMS, your front end, your URL structure. All of these things add to a large amount of change at one time and that leads to a learning curve with inevitable mistakes and learning on the job.
Using a Headless approach, it’s actually possible to rebuild the front end of the website and still connect to the old CMS in order to limit the number of changes at once. Once the front end is rebuilt using Headless tech, your rankings have stabilised and everything is where it should be, you can then reconnect the Headless app to your new CMS.
The thing that most excites me about Headless is being able to customise URL structures. Replatforming often leads to a change in the structure of URLs made on your website, and search bots don’t like big changes in these structures.
Used well, Headless apps can mirror the existing URL structure and avoid this problem completely. That’s one less thing that’s changing when you re-platform and will vastly reduce the amount of time that search engines take to recognise the new website.
Displaying CMS content in different places
This is actually a side effect of having a decoupled CMS, rather than having a Headless website. As you have a single CMS that provides content (the decoupled CMS), and it has an API that allows that content to be read by any other application, it makes it very easy for developers to display content on both your website and your mobile app, using one central source of content.
This is hugely beneficial for the efficiency of content writers only having to write something once, and know that it’ll be displayed through your various channels.
Displaying content from different sources
You don’t technically need a Headless website to display content from different sources on a single page: we’ve all seen sites that display a Twitter feed - hopefully, we’re seeing less and less of them these days!
Headless sites bake this approach in as standard, rather than it being an add on. This means that it’s much easier and quicker to get content from different places appearing on one page.
For companies who, for example, have a WordPress blog and a separate eCommerce store using Shopify, Headless allows them to pull content from both of them to platforms in a single website, making the experience better for your customers.
I’ve heard it’s bad for SEO?
Headless websites are generally powered by Javascript frameworks like React, or Vue. Google, and other search engines, generally don’t like websites that are rendered via Javascript as they aren’t as easily crawled.
It’s fair to say that in the early days, this was a problem. However, a number of pieces of technology, such as prerender.io, have been created to combat this problem by taking a copy of all of the pages of the website as flat HTML files. Search engine bots can then read these pages like any other, which means that we don’t have the concerns with Headless and SEO we had a little while back.
When don’t you need Headless?
Headless isn’t the right solution for everyone. If you have a simple website, with no need to connect your content into multiple places and no need to in the coming years, you’ll just be over-engineering a problem and likely paying more than you need to. Keep it simple and avoid Headless in these cases.
In summary
This really is an exciting decade for web. Technology is moving on quickly and all the time, some things stick and some things don’t… remember VHS and Betamax, or the Blackberry?
It’s very clear that Headless is here to stay and major brands are moving their web presence across to this structure to empower content authors, provide better experiences for their customers and support omnichannel messaging in an efficient way.
If you’d like to read more about the future of digital, please download The Future of Digital Marketing eBook [2021 edition].
Jon Martin, technical director at Hallam.
Content by The Drum Network member:
Hallam
We’re a multi-award winning full-service digital agency based in the UK, and a trusted partner to some of the world’s biggest national and international brands.
Putting...