Using a Headless CMS for Your SaaS Website

Firstly, a common trend for many growing B2B and SaaS companies is to move off classic monolithic CMSs like WordPress as you grow. The issues with WordPress are well documented and include:

• Performance issues due to website bloat, and excessive use of plug-ins

• Security vulnerabilities, in-part due to plug-ins

• Usability issues for junior staff tasked with maintaining the site

• Reliance on freelance developers on a retainer to keep the site up

The list goes on.

That all said, many web agencies are fully in the ‘WordPress camp’ given the historic popularity of WordPress for all websites (not just growth-orientated B2B and SaaS ones). Margins are decent for retainer clients, and developers are numerous, driving the price down. Is it any wonder that despite its apparent flaws, many agencies still persist with promoting WordPress?

However, an increasing number of tech and marketing leaders are concluding that platforms like WordPress are simply no longer fit-for-purpose for growing B2B, SaaS and tech companies. Migrating off WordPress is thus becoming increasingly common for growing tech businesses.

The ‘site builders’ consist of well known brands like Squarespace, Wix or Webflow.

With the ‘site builder’ model, they host the infrastructure that makes your site, but they also help you manage how the pages are designed and built. So Webflow or Wix are very much visual site builders, utilising templates and ‘drag and drop’ components to build a website.

The upside of this approach is that it's a very low barrier to entry for people to come in and build a simple website. I have personally used Squarespace to build numerous entry level websites, and have enjoyed the flexibility.

The drawbacks with site builders kick in as you look to scale and grow. It can be difficult to add custom elements and you are constrained by chosen templates. It is also hard to embrace a structured content lead approach when choosing this route. And it's also quite hard to maintain a cohesive design and structure across the site because everything's visual, and therefore, it's hard to lock down the design of various types of content. Similarly anybody with edit access can go in and mess around with the layout of a page.

In short, site builders are very attractive for many users, however, are not ideal for growing companies looking to scale their businesses.

Recommended Resource: Webflow v Headless CMS

Content platforms also known as Headless CMSs [What is a Headless CMS?] represent an online CMS that lets you do all of your content management in the platform through your web browser, and then it exposes an API for you to use with your site e.g. Contento.

A note about terminology:

The phrase ‘content platform’, speaks to a wider general bucket of people, and the phrase ‘headless CMS’, is a technical terminology for developers that says this is a CMS platform that will not render the front of your site.

A Headless CMS refers to the separation of the front-end and the back-end so the two are decoupled and rely on API’s to manage a site build.

The reason that headless CMS as a category has been growing so strongly, is that there are a number of compelling benefits including:

1- Division of Labor [Specialism]

A Headless CMS allows you to focus on building the front of your site and not on hosting or maintaining an application. And that means that you can build the front end of your site and the back end of your site in a nice organised fashion and join the two together.

2- Flexibility

The second major advantage of dividing the two parts of the website, into the front and the back end of the website is the greater flexibility you get.

If you wanted to switch to a different Headless CMS provider, then that wouldn't mean you had to re-engineer the front end of your site - vendor lock-in is limited.

Whereas with the classic model, if you build something on WordPress, and you want to switch your CMS, you have to rebuild everything from scratch. In the Headless CMS world, you can leave the front of my site largely alone, unplug one API and plug in the other one. There's a lot less work required to switch things around.

The same goes with the front end of the site. You may be happy with your Headless CMS, but if you want to redesign the front of the site, you can do that in quite an isolated way. You just swap out the front-end and it's less of a headache than having everything all bundled up into one place.

3- Risk Reduction

A Headless CMS also de-risks things from a development perspective, and from a technical debt perspective - it is a new modern approach to development favoured by a growing number of front-end developers.

4- Usability

An additional appeal of a Headless CMS led approach is that it allows you to really focus on your content management experience.

With a Headless CMS you can build the back end of the site prioritising the content editing experience with a really high level of focus for the marketing team, and thus can structure things so they make sense for the people who are actually updating the content.

5- Performance

We all need really super fast websites and the new headless CMS approach lends itself to speed. The speed of Headless CMS sites is unrivalled.

If you're rendering web pages on a server and then sending the result to the user, that's invariably going to have some latency in it (Old dynamic-site approach). Whereas if you pre render web pages, and you have flat HTML files that you're delivering straight to the user, then it's a lot quicker (New Headless CMS / static site based approach).

The technology stack for managing this is called Jam Stack which means you have a JavaScript powered website that produces that HTML.

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

This allows you to deploy a site on to a highly performant Content Delivery Network (CDN) service that will provide websites to users really quickly and securely (a CDN lessens the risk of DDOS attacks). And you can have a really slick, interactive website, that's really fast because it's not relying on constantly trying to fetch data from the back end because it's all pre-rendered before it gets sent to users.

A distributed network optimized for serving assets to users. By being geographically distributed, a CDN can provide redundancy and also improve delivery performance as a result of servicing requests from the infrastructure closest to the user making the request.

—Source: Jamstack

So that modern way of building websites pairs inherently well with Headless CMS because they're built using technologies that work well together. And if you're building a Jam Stack site, and you need to have your content editable, you basically will always reach for a Headless CMS. And these days, people are building more and more Jamstack sites because the advantages of them are widely understood in the development community.

Additional Reading: What are the Key Benefits of a Headless CMS?

So what are the elements you need to build your site?

There are 4 core elements if you utilise the Headless CMS route.

1. The Content Platform/Headless CMS e.g. Contento

2. The Front End Stack - Static Site Generators e.g. Vue / NuxtJS or React

3. The Build Pipeline e.g. Netlify

4. The Development Process (Content Delivery Network) e.g. Netlify

While these all may seem a lot, they are all “best of breed” low cost frameworks/ components that are designed to work effectively together.

In terms of the resources, what else do you need to get your site up and running?

Front End Developer

Unlike the templated approach of website builders like Webflow or Wix you can’t just log into Contento, open it up and use it to run your website. It fits in between the two categories of building your own application and full service. So Contento sits in the sweet spot in the middle. You need a front end developer for the initial setup and build, but they don’t need to have much experience with the back end because they don't need to understand that.

This front end developer will build your site. They can then use JavaScript, to pull the data from Contento through our API into the site.

There are different frameworks and technologies for doing that.

You could use a vanilla JavaScript and HTML page. We're gearing our platform towards serving the sort of standard Jamstack set of technologies. So for example, that might be React and Next, or it might be Vue and NuxtJS.

Once you've got your site built and turned into a static site, or a sort of pre rendered site, you can then deploy that pretty much wherever you like. So you could deploy it onto your own server and host it there and it would be really quick or you could deploy it onto an optimised service like Netlify or even a sort of standard CDN like CloudFront.

Graphic Designer

While the front end developer is going to build your site, you'll still need a designer to actually design it. Usually, you'll have a designer and a front end developer working together. They might have some overlap, but your designer is going to do the visual graphic design of how you want your site to look. And then your front end developer is going to take that and turn it into HTML and CSS and JavaScript and then either bake that into a JavaScript framework like Vue and Nuxt.

Copywriter

Finally as I argue in my blog - Using B2B SaaS Copywriters to Improve Conversions, bringing a specialist B2B SaaS copywriter into the project will be money well spent.