Headless CMS

Explaining Headless CMS to a web designer

by Arso Stojović
5 min
23. Aug 2022.

Headless CMS is not a design tool, so how can it help web designers? Users prefer engaging sites that load fast and are distinctive; here are the facts: 

  • 88% of visitors leave a website if it is loading slowly.

  • 62 out of 100 visitors quickly see when a website has a bad UX. Or, in other words - can’t easily hide a slow & poorly designed website from your visitors ;)

  • Only every third user used a PC to access the Internet in 2021. Yet, somehow, developers and designers primarily focus on bigger screens, while mobile phones are a (not-so-new) new standard.

Did anyone notice when did this switch happen?  This data is important and should be used as a guide in every user interface design and user experience design process. According to Web Design Research, the number and kind of features your website should have, as well as the choice of third-party services, including CMS, significantly influence the web design process and the final result. Speaking with a lot of designers, I’ve put together a list of the most frequent questions they usually ask when it comes to choosing the best CMS for a website they are designing.

Designer: What is a Headless CMS and how does it work?

Before content management systems, creating or editing websites without the development skills was impossible. CMSs came around as user-friendly website builders allowing the creation of websites easily.  Headless content management systems became leading when traditional CMSs weren't enough to create fast, uniquely designed, and powerful modern websites. Traditional CMSs like WordPress, Drupal, and Joomla let users design their websites within the CMS. In most cases, their built-in visual builder features are not enough, so users and developers are installing many additional plugins that help speed up and simplify the website production process but, in essence, make websites much slower, less scalable, insecure, and hard to maintain. Headless CMSs, on the other side, don't have any front-end components or "head" to determine how the content should be displayed. Headless CMSs serve as a content repository from where you can consume content via API - anywhere you want. Read more about the differences between Traditional CMSs and Headless CMSs.

Designer: What’s better, a Headless CMS or WordPress?

Many people wonder if Headless CMS is a WordPress alternative, but the truth is that it just represents the next phase of content management systems. WordPress is the most known CMS out there. It powers 43% of all the websites on the Internet. WordPress is the most famous for its long list of themes, plugins, and patterns, which help developers build their websites faster, sometimes even without technical knowledge.  For these reasons, WordPress gained popularity, but it seems that what makes it popular may be, at the same time, one of its biggest drawbacks. All those themes, plugins, and patterns are pre-built packages of functionality. In this case, pre-built means that you can create whatever kind of site you want or need, but only within the framework set by WordPress itself. All those reasons lead to decreasing interest in WordPress as a technology of choice.

WordPress themes consist of prebuilt layouts with specified CSS classes, color palettes, templates, etc. Then, plugins, on the other side, have their own design rules, independent of the WordPress theme you’ve selected. So, even though installing a theme and a bunch of plugins is as easy as 1 2 3, designers are freaking out! Why? Because this approach forces them to fit the mold and put aside most of the innovative and creative ideas, they might’ve had for the project. Besides creativity limitations, a bunch of plugins make WordPress-powered websites slow and less secure. Constant maintenance of plugins and themes is a must-do thing. You should make sure to update them every time there’s a new version, which increases the risk of website design being broken.  How does Headless CMS deal with all that?  In Headless CMSs, nothing is predefined. There are no themes, no templates or color schemes, and no plugins which give developers, designers, and content creators the freedom to make their projects the way they want, without limitations.  You can design different layouts, frames, and text boxes for different content types. Nothing is uniformed by default unless you want it to be. Every page can have different colors and shapes; there is no mold.

Hence, I would say that a Headless CMS is not an alternative to WordPress but rather a way to develop unique and fast websites for projects where that is a crucial thing. Learn more about Headless CMS vs. WordPress.

Designer: Do I need to know how to code?

Most content management systems allow users to create their entire website without coding. And that’s true for both traditional and headless options out there. When it comes to Headless CMSs, you need to do is decide what you want to be changeable on the site. Developers can then set up the CMS to have inputs for all of those editable elements.

Designer: Is Headless CMS suitable for multi-platform design?

Definitely, absolutely and with no doubt, YES! A headless content management system acts primarily as a content repository. The cross-platform functionality lets you distribute content to any codebase or platform application you prefer - a website, an app, a smartwatch, or a TV.  The same way you design components inside Figma and reuse them across pages and platforms, Headless CMS lets developers reuse content across pages and platforms.

Designer: Does Headless CMS have any design constraints?

To keep it short & clear: There are absolutely no constraints. A headless content management system is software that you use for and only for any kind of content you need on your website (or other platforms.) The headless architecture uses API calls to deliver text, video, images, or other content. But it doesn’t force you to display that content in any specific form. You’re free to display it anywhere and in any way you want.

Why would designers like the headless CMS setup?

Creative freedom

Changes to the front-end of a website in a traditional CMS setup can significantly impact the back-end. In some cases, changes to the front-end may require the involvement of the back-end development too.  Design and front-end teams can completely control their website's look, feel, and user experience with a headless CMS, all without involving back-end development.

Easier maintenance and updates

Conventional CMSs such as WordPress can have major conflicts with plugin updates and themes - headless CMSs are free of these issues.  Developers can keep both front-end and CMS running smoothly separated. Furthermore, marketing, writing, and design teams can quickly update sections on the website without waiting for developers’ help.

Parallel development

Dependencies between front-end and back-end systems can be one of the biggest slowdowns in web development. The design team cannot implement designs, and the content team cannot write until the back-end team has finished building frameworks. A headless CMS eliminates these dependencies and allows teams to work simultaneously without worrying about how the other side is doing. More Headless CMS functionalities can help designers and content editors in their work:

Headless CMS Features

Here are some general features of Headless CMSs that useful for designers Structured content and Content Modeling Content Editing Improves collaboration between different teams on the project Multi-language support Image Editing Read the complete list of Headless CMS features before you decide to implement CMS on your project. Okay, using Headless CMS helps with the in-team challenges. But what about collaboration with the clients?

Designer: How can Headless CMS help with clients that are not sure what they want

One of the biggest challenges for any designer is to fulfill clients' demands and expectations. Even when they are not well defined (yet 😃). In this study, almost 60% of web designers said that "never-ending projects" is the biggest challenge when working with clients. More than 50% of designers are having difficulties communicating with their clients. Continuous or uncontrolled growth in a project's scope is a widespread situation in web design at any point after the project begins. Before I show you how Headless CMS can help you in these situations, let's see the factors which can prolong the whole project life cycle.

How clients can influence web design process?

There are so many different influences depending on the kind of your projects. Clients frequently wish to add new features to their original requests after hearing about them from colleagues or seeing them on other websites.  Scope creep can take several forms, including Fresh images  Unlimited image slideshows Page counters  Web content changes Blogging services  On-site SEO updates Many clients assume that these things are quick amends or fixes. But with conventional CMS setups, those changes require a lot more effort than what clients usually expect.

Headless CMS as a solution

When using a Headless CMS, those “quick changes” really do become quick - and simple, even so that clients can often do them themselves. Also, Headless CMSs’ ability to be easily connected with other software and tools gives the whole project an amazing level of scalability.

Designer: How can Headless CMS help me work with developers?

When working with Headless CMSs, everything on a website can be editable - if you define it that way. Because Headless CMSs like TheBCMS are so simple and easy to use, designers can set up content structures on their own. That way, they can easily communicate some design decisions to developers. For example, in the CMS, they can create inputs for pre-defined color palletes, upload properly sized images and video files, or add content for the website. That way, developers should only work on the API & front-end side. Another awesome thing that can help you collaborate with developers is multiple environments that can be used to give a sneak peek into your designs & content changes before they go live. For example, your team can establish staging and production environments and only publish design and content changes to one of them at the time. That way, you can see how the updates on the website look on a separate URL and get some feedback from the client before the changes get approved and go live.

Conclusion:

Headless CMS integration into the design

Using a headless CMS brings structure to how your team works on the website production projects. Your existing practices don't need to be changed.  Content stays separate from the code and can be revised at any time. Design teams can validate ideas more effectively with a headless CMS and have better content governance and consistency. To learn more about how BCMS can help your design team - schedule a demo.