Illustration of abstract shapes suggesting the positioning of components on a page

Benefits of component-based CMS design

Armed with data, marketing teams are becoming increasingly agile. With close-to-immediate analytics feedback on how a given marketing effort is performing, it’s possible to adapt, rethink, and adjust strategies more quickly than ever.

But what happens when essential tools like email and web platforms haven’t been designed and built to empower marketers? In some organizations, even modest content or design changes require a developer to execute.

In the past, a website might have—quite reasonably—been thought of as a one-off investment, intended to last three to five years. Requirements were identified and agreed upon, and page templates were created in the content management system (CMS) to reflect the communication and design strategies at that moment in time. The experience of populating the site with content was as straightforward as filling out forms in the CMS. The tradeoff of this apparent simplicity, however, is that it created a rigid and inflexible platform where any deviation from the specified templates required custom development.

Today a more flexible, componentized solution is considered a best practice in CMS design. With this approach, content teams design and assemble pages using a library of components. Componentization offers the following important benefits:

Radical flexibility

A virtually unlimited library of components—ranging from simple to complex—can be designed for different types of content. A simple component might present a block of text or an image with a caption; perhaps with the ability to apply one or more predefined styles using a drop-down menu. A more sophisticated component might allow a content manager to display content based on a query they create such as “show the three most recent blog posts related to this topic in reverse chronological order.”

Since a content manager can choose which components to use, where to place them on the page grid, and what styles to apply to each, the number of potential page designs becomes immense with even a  modest library of components.

Additionally, a component can display with different styles in different environments. For example, promotional microsites may have a different look and feel from the main website, but be built using the same library of components.

Robust testing and personalization

When pages are built in this way, marketers can go beyond basic A/B testing and run multivariate tests to identify the most successful mix of components on a page. Personalization rules, as well as content security, can be also be applied at the component level to create multiple experiences within a single page, depending on who is viewing it.

Streamlined data management

Best practice componentized websites are designed with a data model that allows data to originate from a single source and appear in multiple places on the site. Contact information is a common example—a staff member’s details might appear alongside blog posts, in a staff directory, or on service offering pages. Managing this through a single data source ensures accurate information across the site.

Fine-tuned governance

Permission to use or revise components can be applied on very granular levels as needed. For example, some content managers may be able to edit the content of components but not modify the overall layout of the page. Alternatively, some managers may be limited to a subset of the total component library when they build pages.

Speed and agility

Content managers and UX designers can radically change pages and navigation elements—in minutes—to respond to the evolving needs of the organization. When a team is familiar with the components at their disposal, it’s often possible to skip formal wireframing and visual design processes altogether. A quick whiteboard sketch can be agreed in a meeting, and minutes later a page can be created on a staging site for review. Publishing entire microsites can be done in a matter of hours, without requiring a developer.


Componentized websites do cost more initially to design and build than traditional templated sites. With greater flexibility and more robust technology, training and documentation for content managers must be more extensive. However, over the long term, costs are greatly reduced since significant changes can be made without relying on the services of developers.

Of course, even with the best advance planning, new requirements will emerge over time that will require engineering work. But when an existing component is enhanced or a new component is added to the library, the whole site becomes more powerful since the updates can be used on any new or existing pages.

The true value of building a website in this way reaches far beyond development efficiencies. It empowers the web team to think and act in more strategic ways. A culture of ongoing iteration and improvement enables the website to better meet the ever-changing needs of users and the goals of the organization—the real benefit of improved agility. Article closing icon

More stories you might like

See all stories

Short Clock icon Story

User experience design

Our favorite accessibility tools

No single accessibility tool can do everything—check out Durable’s top five automated tools for accessibility testing.

Short Clock icon Story

User experience design

Angela Wolak collaborates on new Sitecore UX4CX whitepaper

The whitepaper, published by Sitecore, details how to plan, design, and execute personalized experiences using the platform's robust experience marketing features.

Short Clock icon Story

Engineering and development

Shane Marsden to judge 2019 Umbraco Awards

Durable Technical Director, Shane Marsden is one of three outside jurors for the Umbraco Awards.