Headless Websites: According to the Non-Developer

Ever sat in a meeting where someone drops a technical term and you're too embarrassed to ask what it means? You're not alone. Here at VividFront, our diverse team of marketers, designers, developers, and engineers speaks multiple languages.

While some digital marketing terms are universal (we all know our way around Google Analytics), others can leave team members scratching their heads in confusion. And there's one term that consistently tops our list of "wait, what does that mean?" moments: Headless CMS websites.

Finding a Common Language

Our team is constantly learning about each other's specialties and deepening our understanding of the others' world. One way we do that is by writing / recording helpful and useful content for other's consumption (i.e. blog posts/podcasts).

As a non-developer writing this blog (hi, I am a marketer🖐), here's the foundation of what helped me understand the term headless and what *inserting marketer friendly terms here* pain points it solves. Looking at it from this perspective helped me understand why the development team lives and dies by Storyblok (our headless CMS partner).

Before you can understand headless, you have to begin with a base-level understanding of websites in general. Everyone knows what a website is.. but does everyone understand what the infrastructure of websites look like? Most of the time, the average internet user isn't thinking about that. That's why we exist. First, we'll cover what a content management system is and it's function (also called CMS in shorthand).

Frontend vs. Backend

The "frontend" is everything your visitors interact with directly – it's the face of your website. This includes everything from the visible design elements, written content, to interactive features that make your website engaging and user-friendly.

The frontend is responsible for how your content is presented, how your website adapts to different screen sizes, and how quickly pages load for your visitors. This is where user experience (UX) and user interface (UI) design principles come into play.

The backend, meanwhile, is the powerhouse of your website. It's where all the complex processing happens – managing databases, handling user authentication, processing forms, and storing / retrieving content. Think of it as the engine room of a cruise ship – visitors never see it, but without it, nothing would work. The backend is responsible for ensuring your content is stored securely, managing user data, and processing all the behind-the-scenes operations that keep your website running smoothly.

In traditional CMS environments, the frontend and backend are one combined entity and cannot be separated from one another; which makes intuitive sense. This is why "going headless" is oftentimes an abstract concept for people other than developers to grasp because we only know what we know (the frontend). We are not concerned with the backend, nor are we concerned how it's attached to what we see. Ignorance is bliss?

However, as digital experiences become more complex and diverse, the limitations of traditional CMS architectures becomes more apparent. Headless CMS solutions offer benefits like improved performance, scalability, and consistent multi-channel content delivery. These advantages are driving the shift towards headless architectures, even if the concept remains abstract to non-developers.

The Pros & Cons of Headless 

Seems simple, but what’s the point of going headless? 

Pros of Headless 

• You make your own rules: In a traditional CMS, like WordPress, there is a decent amount of flexibility. However, you will have to work within the constraints of how that CMS is intended to be used. This is why so many CMS’ have popped up over the years – WordPress isn’t great for eCommerce, and Shopify isn’t great for robust content. In a headless environment, you can quite literally create whatever you want, however you want. If you have a vision for how you want your website to look or function, it’s possible.

• You can integrate with any API or traditional CMS: When going headless, you don’t have to give up the functional elements of other strong CMS’ and apps. If you’re launching a headless eCommerce store, you can use Shopify to power the backend eCommerce capabilities – the product catalog, cart, checkout, customer profiles, etc. You can pair that with a headless CMS, like Storyblok, to create a better frontend content experience or a robust blog for the website. In this example, both Shopify and Storyblok are backend systems that are feeding data into the user-facing frontend. In theory, you could integrate dozens of platforms via an API connection and leverage the best features they offer without being stuck inside one platform.

• It’s extremely scalable: This is the biggest benefit you’ll find referenced in headless literature. Because the frontend and backend of a headless website are decoupled, you can “plug in” the backend to any frontend. This means if you decide you want to redesign your frontend in 3 years (most digital-focused brands), you can keep all of the data and code as and just worry about rebuilding the front end. In a traditional CMS, you would scrap everything.

• Publish once, update everywhere: Let's break this down with a practical example: Consider a modern retail business. Your headless setup, combining Shopify's e-commerce capabilities with Storyblok's content management, creates a centralized command center for all your website management needs. When you update a product description, adjust pricing, or modify inventory levels, these changes cascade across all your digital touch points. Your mobile app, digital kiosks, and even social commerce platforms all stay synchronized without additional effort.

Cons of Headless 

• More expensive: Typically, a headless site is more expensive to build and maintain. Like anything else, you get what you pay for. If you’re prioritizing flexibility, scalability, security and unlimited creative capabilities, it may justify the investment. If you’re looking for a quick, simple website, explore a traditional CMS. 

• Requires a developer: With some monolithic CMS’ like Squarespace or Wix, you can create and manage websites without a developer. This is ideal for small businesses with limited budgets and resources who just want to get a website up and running. These platforms are very limited with only a handful of pre-built templates to leverage, but are extremely easy and affordable. For a headless site, you’ll need an experienced team of web designers and developers to create the infrastructure. You can find this talent through an agency, like VividFront, or hire full-time or part-time employees. If developed correctly, a non-developer will be able to edit, create and manage content on the frontend autonomously, once the site is built. 

The TL;DR

A headless approach to web development decouples the frontend from the backend to create a scalable, flexible, secure website with unlimited capabilities. 

If you’re a tech-forward, established business looking for a custom experience, the ability to manage content for multiple sites in one place, or are considering a mobile app or other digital experiences to align with your website, headless might be for you. 

At the end of the day, there are hundreds of options when it comes to choosing a CMS for your new website. Typically, the pros of one CMS mirror the cons of another. So it’s important to work with an experienced team that can guide you through the selection process.