Guides

A Marketing Director’s Guide To The Headless/Composable Web

Who is this guide for?

You! Our favorite client. The Director of Marketing (or similar role) at a business grossing $5m to $75m a year who has to grapple with ‘DIGITAL’ on a daily basis.

You too are headless!

Here’s the gist of what a composable or headless web architecture means: It’s basically you. It attacks the problem of ‘website’ the way you, as a marketing leader, tackle the problems of ‘marketing’ in the digital era. You coordinate or orchestrate the work of numerous specialists to create a cohesive ‘whole’ marketing mix. This includes content, design, development, MA platforms, SEO/SEM, etc., etc.

When one of your marketing service providers doesn’t perform, you fire them and replace them with someone/something better. When you find that an entire discipline is missing, you hire it in as needed, at the scale you need it.

The composable web works this way too. Are images slowing down your web page loads? Offload the problem to Imgix to optimize image loading. Is search embarrassingly slow? Offload the problem to Meilisearch to make search incredibly fast. Is there friction with getting leads into your CRM? Make an API connection and streamline the process.

Wait! That’s not headless!

See, this is part of the problem. The terms “composable” and “headless” are getting conflated by the big venture-funded headless CMS providers out there. Headless actually means that one CMS can easily serve content to many ‘heads’ meaning many presentation layers. These visual layers might be in a conventional browser, a mobile app, IoT devices, airport kiosks, digital t-shirts, or whatever! Composable means you have adopted an ‘approach’ to your web stack that allows you to swap components and services in and out at will until you have an optimal system. (Note that ‘optimal’ is always a moving target.)

So why combine them in one guide?

These two terms are appearing so interchangeably these days that we thought it best to make sure you’re fully prepared to understand how these approaches fit into your marketing work. If your web developer starts talking to you about either of these terms, ask them if it means an entire rewrite of the web stack. If they say yes, run away.

The whole point of this new approach is to create the conditions for you as the website owner to try stuff. Keep what works and throw out what doesn’t. This approach allows you to work gradually, completing a 20-mile march every day so that you invest when and only when you can justify an investment with verifiable data.

Try experiments. Fail small to create the conditions for winning big, gradually.

Okay, let’s define a few terms

Reliability

I put this term first. It’s the holy grail of digital as far as I’m concerned. See my book for the full argument. Reliability refers to building and fostering digital assets that create reliable flows of revenue. When we go on retainer with a client, we have a single-minded focus: how can we make their website a reliable source of revenue and grow that value over time?

Friction

Friction is the mortal enemy of reliable revenue generation. Friction prevents a customer from easily understanding how your product or service helps them. Friction makes it hard for them to buy from you. Friction makes it hard for you to publish effectively to inform and educate your customers. Friction makes it hard to change and enhance websites and digital assets over time to respond to market demands.

Monolithic Website

A monolithic website has all the functions and capabilities built into a single system. If it’s not part of the CMS or a plugin for the CMS then it doesn’t exist. It runs on one set of servers in one data center somewhere. Moving it or changing it is like dealing with an aircraft carrier. Building websites in a monolithic way is why they have to be “rebuilt” every few years.

Headless

A headless website is one that is not directly responsible for the presentation layer (the part of a website that end users see). The most common headless implementation has a highly efficient and effective publishing back-end with a front-end made up of statically generated HTML and dynamic pages. The content on these pages is pulled from a fast API provided by the content engine.

It’s the opposite, in a way, of the monolithic approach. Services talk to and collaborate with the front end to deliver content and data so users can see it in the context of a chosen design. Changing your CMS used to mean the dreaded migration of content. With headless, that content lives somewhere else just waiting to be used. Switching any service is now much easier and less risky.

API

You probably know this one, but let’s get it down anyway. An Application Programming Interface (API) is a bit of software that enables two different systems to communicate with each other to get work done. In some ways, it’s like a translator making sure each side understands the other correctly. Some are simple, some are complex, but all do basically the same thing. They enable the separate platforms of the web to work together to accomplish a given task.

Composable

Composable intersects with ‘headless’ but is a bit more broad. Check out this case study about an app I built for Solspace that streamlines our revenue flow. It was built entirely using technologies supportive of composable architectures. I ‘composed’ our Time Saver bookkeeping tool by using Vercel for serverless app hosting, Next.js for page serving and caching, React for UI components, and server-side Javascript as the core language to handle the logic of our business rules. Tech jargon aside, the app is built using a mix of tools that are separate but work together. It’s not a website or even a single piece of software. It’s a composition of exactly what’s needed to get the job done.

This composition draws data from Atlassian Jira, Stripe, and Quickbooks Online. Each of these is consumable through APIs. One system can be swapped out with another without having to completely rebuild the app. It’s composed of components. It’s hot-swappable. It’s composable.

Web Service

Back to how this stuff is like your work as a marketing professional. You employ services from vendors to get work done. Web services are like vendors in software form. Cloudflare is a web service. Imgix is a web service. Meilisearch and Algolia are web services. Quickbooks Online is a web service. Jira is a web service. All of these tools perform a very tightly defined function. They are cloud native. They play well together. You can fit them together to perform larger tasks and meet bigger business needs, all without building or hosting their capabilities yourself.

Serverless

Serverless barely exists. Serverless is ephemeral. Modern composable websites and web apps can be made up of a set of serverless functions. These are little snippets of software functionality that come into existence only when they are needed. They vanish once they complete their task. Amazon, Google, and Microsoft all offer some version of this concept on their cloud platforms. You use and pay for only the seconds of processing time that your app needs. The big advantage of serverless is scale. A serverless function can spin up to millions of concurrent instances without even sweating. This is powerful stuff.

Does this junk solve any of my marketing problems?

Here’s our question: Does ‘composable’ or ‘headless’ solve any real-world marketing problems? Do you have to pay Adobe six figures to get those solutions?

Let us give some solid, real-world examples from our own client base to show how this headless and composable approach can solve real marketing problems.

Slow search? Bolt on Meilisearch.

We have several clients who rely on search for a great user experience. It’s core to their value offering. But their search got slower as their data and audience grew. Did we have to re-platform their site on a whole new much more expensive CMS? No. We went composable. We swapped out what was there with a new service that could be cleanly integrated with the site.

Meilisearch is a web service that handles the problem of search. Your developer uses a plugin for your CMS that sends data over to your separate Meilisearch service. It builds up one or more search indexes. You then modify your website’s search pages so that they make calls to the Meilisearch service to grab results for keywords.

In other words, you go composable and you offload a component of the site to another provider who can solve the issue better. No website was rebuilt. No new enterprise plan was bought. You just incrementally solved a problem by moving some components around. Less expense, less time, less risk.

We did this for Here Comes The Guide last year.

Slow images? Switch to Imgix.

Yeah, you probably should have optimized those images yourself. You shouldn’t have just willy-nilly uploaded them to your CMS without any optimization. But hey, you’re a busy marketing lead on an understaffed team. You don’t have time. Now your web pages clock in with really slow load times and tons of people are complaining, the site indexes with poorer authority and your ad buys might even be more expensive. Sheesh! Answer: go composable! Swap in a useful web service like Imgix.

Imgix is an image-handling solution that is so simple and elegant it makes us want to cry. You do a couple of minutes of DNS magic, point your Imgix account at your image folders (on your server, on AWS, etc.) then they take over the problem of optimizing images for you and serving them from a CDN.

We did this for one of our biggest clients last summer. It only took a few minutes.

Want to streamline sales with a configurator but you’re stuck on WordPress? Go Vue!

Our friends at Burl Audio wanted to streamline their sales process by adding a configurator to their website. Burl sells complex configurable audio equipment for the recording industry. They wanted the website to answer all of the repetitive sales questions so the sales team could focus on the human stuff. They liked their WordPress website but wanted to fold in this new tool. Throw out WordPress? No. Composable to the rescue!

We just created a subdomain, configurator.burlaudio.com, and loaded our Vue.js configurator there. It matches the site branding, look and feel. But, it’s a separate component, part of the overall composition of the digital marketing mix. Vue.js owns the presentation layer in the browser, but the data lives elsewhere. It’s not only composable but headless as well.

Lots of friction in your accounting process? Compose something quickly and easily.

You’re a digital marketer, but people come to you complaining about website stuff all the time. By necessity, you understand web stuff better than others in your company. So when your accounting department starts complaining about how tedious it is to get data into Quickbooks Online or Zoho Books, you can tell them that you read something interesting by a web developer.

This group, the MACH Alliance, which has taken the full plunge into the composable/headless future of the web (Microservices, APIs, Cloud-native, Headless), inspired me to solve a back office problem at Solspace using MACH principles.

As a team, we manage projects and track time in Jira. We do our accounting in Quickbooks Online. Jira and Quickbooks Online; both are cloud services.

Our poor bookkeeper had to cut and paste billing information for a team of 15 people from one system into the other. It took her a week per month just to get invoices out. This felt like a great opportunity to try out a bunch of the other emerging composable tools on the market. The result was a system of components. If we decide we no longer like React and want some future better thing, just swap it out. If we don’t like Vercel for serving the app, swap it out. If we hate Quickbooks and decide we love Zoho Books, swap it out.

Remember hot swappable? That’s the new internet. You don’t like your search? Swap it out with a best-of-class alternative? Don’t like your lead gen forms? Swap them out for a better provider.

Gently moving into e-commerce

We have a number of clients who sell what we call complex configurables. One example is robots.com. They sell industrial manufacturing robots. Every single sale is configured for a specific purpose in a specific manufacturing facility somewhere. Each sale is complex. Each sale is high stakes, if the buyer somehow makes a mistake and gets the wrong plasma torch robot arm, yeah, um, scary problems in that factory.

Our clients like these are moving carefully into selling online. They have a sales team that benefits from a website that is highly supportive of the complex product offering. A good B2B e-commerce website allows the customer to come prepared to the sales conversation. The more you can configure your product on the website before talking to a sales rep, the better that sales cycle can go. (See Burl Audio above.)

But are we selling super expensive industrial manufacturing goods out of a website’s shopping cart? Not quite. The web is inching in that direction, but most sellers and buyers are not there yet. $100,000 is too much to put on a credit card, right? Maybe…for now.

So what does composable have to do with any of this?

Gradual. Careful. Deliberate. Data driven. Data validated. Steady progress. These are the keywords we’re using with our clients to help them move into B2B e-commerce. There are enterprise companies that have taken the leap already. But for the vast majority of B2Bs out there, it’s too much too soon.

A composable website allows you to move gradually in the direction of selling digitally. Right now adding reliable and effective sales components onto an existing website makes the most sense for budget-conscious B2Bs. As they gather data seeing customers turning more and more to digital buying experiences, they can invest more and more.

A composable web, in our very opinionated opinion, means clients don’t have to pay 6 figures for some enterprise-configured commerce platform. They can roll out their own gradually, steadily, carefully, and only as it makes progressive financial sense.

Get in touch and we can talk about this more.