Demystifying headless CMSes with Virtual Identity

When customers hear “headless CMS” for the first time, it can make them feel apprehensive. The concept might not just be unfamiliar but drastically different than what they are used to. These differences have led to a number of misconceptions about headless CMS that make customers hesitant to adopt them.

Contentful’s solutions engineer, Harry Jeyarajah, and Virtual Identity’s director of development, Frank Rittinger, break down the most common myths about headless CMSes in the recent webinar Demystifying Headless CMS.

Myth 1: Headless CMS = Decoupled CMS = CMS + API

One of the most common misconceptions about content management systems is that they are all the same. “A headless CMS is the same as a decoupled CMS, which you can create by adding an API on top of your existing CMS.” But this isn’t the case.

Traditional CMSes are designed with one purpose in mind: to send content to web pages. They enable developers to design a platform that tightly couples content with its presentation by accounting for both front end (the proverbial “head”) and backend. This front end and backend coupling means that content becomes tangled up in code and requires developer assistance to do anything more complicated than a blog post.

But these monolithic CMSes aren’t designed for today’s digital world. The single front end means that it isn’t equipped to be delivered properly to the various digital channels and devices customers are using, such as voice-controlled devices or mobile devices. 

Adding an API to these legacy CMSes has been one fix to this problem. However, this solution comes at a cost. According to Harry, “Bolting on an API to a legacy system and delivering polluted content full of content blobs, JavaScript and Layout Hacks, unfortunately, does not solve business challenges and leads to exploding technical debt.”

Enter the headless CMS. The headless CMS is a backend-only system. By only having the backend, it allows you to use multiple “heads” — front-end delivery systems that serve the end user — depending on channel or device. This allows you to publish content anywhere, because the backend acts as a content repository and the presentation is done separately.

Contentful takes the headless CMS one step further. Contentful is an API-first content platform, which means that it has a single content hub for structured content that can be distributed across any channel. The content platform is built for extensibility, so integrating front-end systems and tools that help with the editing process is a snap. 

“The result is that developers have full flexibility and autonomy when they choose their front-end frameworks that present content on any device,” Harry says. “For editors, the troublesome layout hacks and manual steps get eliminated, because they can focus on the content creation and editing parts of the process.” 

This flexibility means it’s easy to make changes that you can instantly feed across all pages, channels and devices where your content appears. 

Myth 2: Headless CMSes are developer tools and not mature enough for enterprises

Many enterprises still consider the headless CMS to be a novelty. Switching from a legacy CMS to a headless CMS can be a time-consuming process that changes technology and team structures. Companies often hesitate to take on such a migration project. This is especially true due to the misconception that headless CMSes don’t offer editorial tools such as drag-and-drop interfaces, WYSIWYG editors or content preview.

Headless architecture does require the technical expertise of a front-end developer to make content available to devices via an API using whichever language, framework and tools needed. Compared to a traditional CMS, a pure-play headless CMS is a massive shift, because it tends to exclude non-technical marketers and business users from the equation. This is where an API-first content platform like Contentful is the right direction. 

Contentful doesn’t simply provide developer tools. It also provides capabilities for effective team orchestration and eliminates bottlenecks for non-technical users. Contentful’s app framework and extensibility options allow you to fully leverage the benefits of a headless infrastructure and design your platform for a true omnichannel experience. It provides deeply custom workflows, which makes undergoing such a migration project worthwhile.

Myth 3: I can’t see and navigate in my site structure, so I can’t find my content

Being able to navigate your website without getting lost and being able to locate content is a non-negotiable. When you’re used to a legacy CMS, moving to a headless CMS can seem daunting because the architecture is visually different. It might look like there is no way to navigate through the site to create, modify or update content, but that isn’t the case — everything just looks a bit different. 

In Contentful, the content model has a page called content type, which has subpages sorted into lists of references to other pages. This basic model enables you to build your site navigation tree and make it as complex as needed based on the various page types created, such as product and regular pages.

Data model: Content type Page with Subpages, a sorted list of references to other pages. For multisite architecture that shares most content, we use a content type Country as the entry point with one reference to the home page where the page tree starts.

Navigation can be done two ways in Contentful. The first way is to use the navigation tree that is built as content is created. If you have multiple sites, the first thing you’ll need to do is pick the site you are looking to navigate through. This site’s homepage will be the root of the navigation tree. From there, you can click on any area page and go deeper into the website and see, edit or add content to each area. As long as the navigation tree is present, you can easily move through the website to add and move content.

Frank says, “I always know where I am. I can always jump back to where I came from.”

The second method is to enter the preview mode and navigate through the website and jump into the editor as needed. This method is more aligned with the navigation in a legacy CMS.

Myth 4: I can’t get a direct preview of my content

When you edit content in a headless CMS, it often looks different than it would in a monolithic CMS. You rarely see an actual page as it would appear in someone’s web browser. Instead, editors work in content blocks that get assembled by front-end tools. This difference most likely leads to the misconception that you can’t preview your content before publishing.

But previewing content in Contentful is easy. The extensible web app allows your team to customize the editorial experience and include a preview option. At any time, simply click the Open preview button to see what it will look like on the final page. Some teams even have a variety of preview options, so that they can see how content will appear via multiple channels.

In the preview mode, you can navigate through the site and jump back into the editor to make changes to the layout or content.

Myth 5: I have no control over the layout, and no WYSIWYG or drag-and-drop editors

The last misconception we often hear is that editors don’t have control over layout with a headless CMS because the systems don’t include WYSIWIG or drag-and-drop features.

This myth is a little bit different from the others because it has a bit of truth to it. A headless CMS takes the pixel position layout aspect out of the editing equation and makes the layout processes about the relationship of content elements to each other. But just because you don’t have pixel layoutting doesn’t mean that you don’t have control of your content placement and presentation.

With Contentful, you can determine the order of your content, picture size, alignments and so forth in the web app. For example, the rich text editor takes advantage of the WYSIWYG, and editors can see how text will look on the page as you create it. 

All the editing functionality you’re used to is available in the web app — with help from a few apps or customization in the web app. This level of control lets your team add only what’s needed, which removes the excessive functionalities that might just cause confusion. 

If you’d like to learn more about how Harry and Frank demystify the headless CMS, download the webinar. If you prefer to get in contact with VI directly — just write to VI Business Development on bd@virtual-identity.com.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.