Often times I've seen articles talking about the benefits of components to developers, but less often I see articles talking about the benefits of components to site builders and editors.
Component-based theming and site building is where the web is going. WordPress is there with Gutenberg's block system. Drupal uses Paragraphs, Layout Builder, and probably some other modules to handle components. All content management systems seem to have some way to build pages modularly, using self-contained chunks of code.
Components, design systems, pattern libraries, and other terms have multiple meanings to most people, but when I think of these terms, I think of enhanced efficiency, less stress, better focus on what matters: shipping pages and communicating with your audience.
This way of thinking offers enhanced efficiency because there isn't a considerable amount of time spent "re-inventing the wheel". As designers and developers, if you're making mock ups and coding designs that you've done countless times in the past, or if you need to be a tech genius to build a decent looking web page for your organization, chances are you could benefit from a CMS with components.
When using components, there is also less stress because the design and development are already 90% done. You're simply snapping together components that have already been built. Because of this, there is minimal worry anymore about what the page will look like. Since the design has been systemized, page/site builders don't need to worry about knowing a bunch of HTML/CSS -- although knowing these can definitely help editors take things to the next level using our utility classes, which I'll mention later. This allows the team to focus on what matters most: communicating a message.
At the end of the day, your systems should help your builders and teams make things quicker that are on-brand, accessible, and mobile-friendly.
Building with components
In my case, our organization is using Drupal's Paragraphs module to build pages. Each Paragraph (the Drupal-specific implementation of a component) has it's own template, then editors can add collections of Paragraphs to a page to build their desired result.
Our very talented and busy digital strategist was tasked with creating a highly important landing page for a campaign. After getting some content and spending a couple hours organizing and clicking buttons in Drupal, she was left with a completely branded, accessible, and mobile-friendly landing page that was ready to ship.
Component-based page building allowed:
- A content-first process approach
- Ability to quickly put together a page to share for feedback within hours
We take the component-based approach even further with utility classes. Using a libraries like Tachyons allows some variation within the components. In some cases, properties such as alignment, text size, text formatting, colors, and spacing can be easily tweaked using the utility classes.
- On brand - the only choices available are "branded" choices. For example, in our Drupal 8 site, the only text sizes available are sizes within the modular scale. Same with colors: the only colors that can be chosen are branded colors. While there's nothing to stop people from "coloring outside the lines," it seems that given a few options or variations is enough to satisfy most of our editors without them feeling like they need to write custom HTML or CSS.
- Accessible - each component has been tested across some accessibility indicators (contrast, focus states, click/tap target size, etc). So by using these components, you're guaranteed to have an accessible page, provided you follow the accessibility guidelines for content creation. The pre-made components reduce risk of inaccessible HTML/CSS being introduced into the system.
- Responsive - responsive web design has seemingly been around forever at this point, but it's not any less important. Again, our editors don't have to worry about media queries or how things look on mobile, since the components that are available in the CMS are already responsive by design.
Finished page
