Headless Content Management Systems Offer Endless Freedom for Website Design, Tech Decisions
Last year, Brunner embarked on a brand refresh — new messaging, new visual design, new language.
Most importantly for me, the brand refresh meant we needed a new company website. As Brunner’s chief digital officer, I’m responsible for our agency’s site as well as the many web redesign projects we do for all types of clients.
To redesign the Brunner website — and handle a large client website redo at the same time — we went with something entirely new for both projects: we utilized Contentful — a leading “headless” content management system (CMS) as the core of our website technology components.
Simply put, a headless CMS completely separates the backend data (the content) from where it is displayed (the presentation). It lets you put content in various places, including your website, using a front-end display option.
After nine months, Brunner had a new website. We also have in-depth lessons learned from implementing a headless CMS and navigating the seemingly endless freedom it offers not only for content and design decisions but also tech stack selections.
If you’re looking to redo your website, here are seven critical lessons we learned from our projects — including that a headless CMS is the way to go, along with smart ways of working.
7 Critical Lessons from our Headless CMS Project
Lesson 1: Don’t design in a silo — collaborate across UX, content, and dev teams.
Cross-functional collaboration is essential for a successful website project. The UX team should lead the site design process, with UX designers working in constant collaboration with the content team and the developers. If you don’t take a collaborative approach, be prepared for a lot of re-work. The TEAM should decide together how best to display a piece of content by establishing the look and feel, as well as the level of effort for development.
Lesson 2: Use “content modeling” as the foundation of your website design.
Valuable, helpful content is why most people visit your company website. Take the time to break down each piece of content into its smallest meaningful parts to create a content model. That allows you to create reusable content components that your team sets up in your headless CMS. For example, an author bio page might include the author’s name, title, a short bio, a headshot, and a social media link. The idea is to create one model for that piece of content, then follow that model for every instance of that type of content on your site. Content modeling is a fairly painstaking process, but it will help map and organize all the content within your CMS database.
Lesson 3: Have a very well-established brand guide.
Your brand guide will inform decisions throughout the design and development process. A well-established brand guide should include the visual aspects of your brand as well as content aspects like brand tone and brand voice. This will allow for the creation of a robust design system that aligns with your brand, down to the smallest detail.
Lesson 4: Make sure your team has strong front-end dev skills.
Front-end developers build the parts of a website that visitors see and interact with, like your site navigation and ways to get in touch (contact us form, interactive phone number, etc.) Most headless CMS systems have much of the backend data and integration work already built in. Your front-end developer still needs to do the essential work of bringing the UX and content design to life through solid, efficient code. That’s not to say that a developer who understands the interworking of the backend of the CMS is not important. But you’ll need a front-end developer who is skilled in libraries such as React, or frameworks such as Next.js.
Lesson 5: Consider agile for project management.
Headless CMS deployments have many moving parts. I’m sure that waterfall project management, with its more linear, step-by-step approach, could work. For us, agile was the best choice. We found the overall project was much more manageable by taking Agile’s iterative, flexible approach for tasks like scheduling and tracking deliverables. Agile also allowed us to be nimble and shift priorities quickly, as needed.
Lesson 6: Be prepared for a learning curve.
The concept behind a headless CMS is simple to understand. Likewise, the notion that you can select a front-end editor that will plug and play with just about any other part of your tech stack may seem like building a website with this technology is easy. And in a way, using a headless CMS is far more intuitive than monolithic CMS solutions. However, as with all new technologies, there is a learning curve. Your team will be learning the new CMS, the front-end editor, the design system, the static site generator, and most importantly, how they all integrate together. Give your team time to learn these systems, gain experience, and become adept at managing your website.
Lesson 7: Do it right — the result is worth it!
Implementing a headless CMS and selecting the rest of the tech stack for your website takes a lot of work. But it’s well worth the effort. For the first time, I recall in 25 years of doing website development, the actual content management is super simple once the site is built and launched. This new approach puts the power to manage website content into the hands of the content and editorial teams, where it should be.
At Brunner, I’m sure we will continue to learn more with each website project we take on. In fact, we’re already considering new approaches and new tools for our own site. Personally, I can’t imagine a resurgence of traditional CMS’s, and I’m convinced this new technology will become the norm. Headless is here to stay.
Looking to redo your website? Let’s chat
If you’re planning to redesign and rebuild your website, there’s a lot to consider, including a headless CMS. We’d be happy to talk through your project and your goals, and we can share insights from website projects for clients including banks, HVAC manufacturers, insurance companies, and universities. Please feel free to get in touch — we love to talk about website projects!
Rick Gardinier, Brunner partner and chief digital officer, is responsible for developing and executing comprehensive digital strategies that help Brunner’s clients unlock new avenues for growth. He brings more than 30 years of experience helping companies leverage emerging technology to solve business and marketing problems. Rick spearheaded the launch of Brunner’s innovation lab, BHiveLab, which for 10 years was dedicated to helping companies invent new ways to use technology to engage their customers. His unique blend of technical, marketing, and business expertise has enabled him to build bridges between the technical and creative sides of the digital space. Rick earned an MBA with a marketing analytics concentration from Capital University and a BS in computer science from Bowling Green State University. | LinkedIn