Our strategy director Rog How looks at why you should consider Headless CMS for your next website.
At How & How we build all our websites using Headless CMS. Here's why...
Headless CMS has been gaining great traction in the last few years. While previously reserved for companies with bigger budgets and specialised developers (like Netflix, Google and Deliveroo), it is now becoming more commonly used across a broader spectrum of websites.
Let’s first look at the key differences between traditional and Headless CMS’s.
A CMS is a Content Management System — it stores all the text, images, videos, audio and any other media used on your website. It holds it in a database and organises that database in terms of how the data relates to each other. A webpage will usually have at least a Title, Text and an Image, but it may also have multiple sections of text and multiple images that are arranged in a particular order. So the CMS needs to hold the data, how it’s grouped as well as the order that it falls in.
In addition to that, a traditional CMS with also generate and display the actual webpages themselves, the bit the end user sees — called the Frontend. The data is inputted into one part of the admin system, then that system has a coding language that can be read by your internet browser for you to see a nicely styled site.
A Headless CMS separates these two bits of functionality into two completely separate and self contained systems or programs. One system holds only the CMS database, and the Frontend is generated by a stand-alone programming language. The two are then connected by a data bridge or pipeline that passes data from the CMS into the Frontend when it needs it.
While that sounds like you are adding an extra layer of complexity into the mix, it actually ends up being more efficient as each system does its own part of the job really efficiently and well. There are also a number of other advantages:
Because you have separated the content from the Frontend, you can now use your content wherever you like. If you develop a phone app, you can draw the same content. If you want to have a news feed going to a news aggregator, you can use the same content.
On your development or staging server, same content. When you want to develop a VR website, same content. You get the idea. All your content — no matter where and on whatever platform or technology — you can draw from one centralised content store.
The result of point one, is that you are ready to use your content on whatever new platform or technology comes along. When Google Glasses take over from the smartphone as an interface (this is just around the corner) are you going to be ready to display your content?
The traditional CMS is an evolutionary dead end in this respect and will struggle to evolve fast enough to keep up with the technology. Headless technology is agnostic, so inherently agile to adapt to new technology.
To explain this agility further, a Headless CMS Frontend can be built using any programming language. You just reference your CMS's API in the correct parts of your code and you have created an integration. So if a new technology springs up, just use that and reference the API.
Developers also love this because they can choose to code your website in their preferred language, rather than be constrained by whichever traditional CMS you might be using.
As well as putting developers first in the website creation process, a Headless approach also puts your authors and designers first too. Because the two systems are separate, your authors can be populating your website before it’s designed or built. If you know what content you want and in which order, they can just start composing pages even though the Frontend doesn’t exist yet.
Designers can also start from day one, liaising with developer and author to make the basic wireframe, then designing pages while authors are writing. Designs can be much freer as the frontend will be built from scratch, so designers as well as developers are less constrained and can be more creative.
A traditional approach is much more linear than this and each stage of the process has to wait for the previous to complete. Headless allows a much more collaborative and agile process, which involves the team working together from day one. A happier team working together, and creating better = more creative work as a result!
Security is a big issue affecting huge swathes of the web. Millions of automated attacks on websites are becoming more and more widespread and elaborate. Protecting traditional CMS’s and servers is a constant drain of time, keeping plugins updated and websites backed up.
A Headless CMS protects your content store with an impenetrable smokescreen. The API layer means that a user — or hacker — accessing the Frontend, has no way of knowing where the content originally came from. It’s secure by design, due to the simplicity of the approach. The frontend is also inherently secure, because the usual build workflow will involve making changes to the frontend in a local and/or staging environment, so you always have a backup in case the Frontend gets targeted.
Using a static website builder like Gatsby, it’s possible to set up your website build pipeline so that the actual web pages are just static flies. Gatsby grabs the content from the API, complies the website, and then spits out static pages that can live on a static web server service like Netlify.
This means that your audience are just accessing fixed files rather than being served pages in a dynamic process. This equals incredibly fast load times due to the simplicity of the approach. It’s like being given a piece of paper with information on it as opposed to someone telling you that information while recollecting it all from memory.
This also adds a second security smoke screen by adding another separated layer. Triple inherent security!
For Headless CMS this is a double-edged sword. At the moment it’s likely to cost you a little more to build a headless CMS website, than a traditional one — BUT — it's becoming more widespread and we are now seeing more developers who refuse to code any other way. Some say that it is easier for them, and therefore cheaper. The balance is tipping.
An entry level Headless is also free to run. A cloud based CMS like Prismic, coupled with static site server like Netlify are both free at entry level.
There are a few instances where it definitely doesn’t make sense to build a Headless site. If you have no budget and need a DIY option then it probably isn’t for you, but even for modest budget builds, Headless is becoming more viable every day.
All in all, Headless is a clear winner on so many levels that it is hard to make an argument against it, and those arguments are being reduced every day. So if you're after a new website design and build, don't hesitate to get in touch with us.
— Rog How, Strategy Director & Co-Founder