Think Content-first When Designing for a Component-based Web Site
by Beth Bader
Components are not a new idea to content strategists. The idea of a component-based authoring system is central to building a “write-once, use many times” content set. These systems are usually XML-based and can author across mediums, both print and web, for example.
This same re-usable approach is the way major CMS platforms like Adobe CQ, Sitecore — or even open-source platforms like Drupal and Wordpress – function, by building sites with reusable “chunks” of functionality. These design components are then assembled to build a “page.” Like a set of Legos, you can combine these different building blocks to create different pages. Your only limitation is the set of building blocks you start with.
The big win here is flexibility to define pages from multiple combinations of components rather than a limited set of fixed page templates. You can also create the functionality once for a set of sites, but then alter the CSS style to allow for multiple brand sites sharing the platform to reuse the same component set.
A component approach to the site development also allows for the team to test and approve smaller chunks of site functionality throughout the project lifecycle. The approach makes sense on a lot of levels.
The challenge is changing the thought process for us as content strategists, content authors, clients, designers, and information architects who are accustomed to thinking in “pages.” This is where a content-first approach can save your sanity and your project.
Component-based Design Still Begins with Good Strategy
You need a clear road map for the project that defines goals and success. This doesn’t change whether you are using waterfall or agile, page templates or components.
You still need stakeholder interviews, user personas, a review of site and search analytics, and a thorough content inventory and content audit. The content gap analysis and a keep/kill/modify content exercise should also be in the mix before you begin design.
Understand Your Content to Define the Right Set of Components
The information architect still creates a site map for the top levels of the site. This is still based on working with the content strategist who will organize the deeper levels of content.
Where the work changes is that instead of building around 12 to 15 page templates for a large web effort, then fitting all the site’s content into one of these fixed shells, you now have to define about 30-40 components that all have to work together. Smaller projects require fewer components, of course.
How do you know what makes a component? The answer is in your site content and the content strategy. By looking at across all the content that will be migrating in, you can begin to identify types of content elements needed for the site. What is the best way to present each content element on the site and what would a component need to do to present it effectively? Just like enterprise content strategy, you are looking for the elements that can be repurposed and reused.
Define the Components for the Optimized Content, Not Just the Existing Content
The content audit is key here because this document explains how the content set needs to be optimized. This, plus the gap analysis, focuses your work on the ideal future content state rather than just referencing how the existing content is displayed, which may not be optimal.
For example, a current site page you are keeping may be a long page of only body text. Review the content and identify what the purpose and value of this content is. What are the elements that provide value and how can these be optimized? How does the content compare to your content review checklist?
By reviewing the content like this, your long content page may become five components: hero image and page title, text area with columns and images, author bio, supporting content like a video asset or an infographic, related content links, or an associated call-to-action.
Your long text page is now designed to help the user get more value, read the page more easily, quickly engage with more content or respond to a call-to-action. Because you’ve taken the time to identify what components make for a good user experience against your actual content — and because these building blocks are reused throughout the site — you’re creating a more consistent and valuable site experience that delivers better for both your users and your business goals.
The content strategy work may also define unique or new content items needed; brand stories, interactive experiences, how-to or training modules. These have to be identified as part of the component set as well.
Not every page in your content set will use all of the components. The goal is to define the whole set of components that are needed for all of the content types the site has to display. This is thinking content-first. This requires having the content strategist work closely with the UX resource and the project team throughout the design and development phases.
If you fail to base the component set on the actual content the site needs to display, you are setting the project up for failure before it begins. Designing the site first, then considering the content later may make for a nice looking site, but you won’t be able to use it to deliver the right content.
Pages Still Matter
Throughout the process of identifying the components, you will still need to think in “pages” because your end user still views your site as pages. You’ll need to look at how the components work together (or don’t) on a given page.
Imagine designing a house room-by-room without considering how the entire structure should work. If you design component-by-component, your project, like the house, won’t be structurally sound. Cobbling together components without a larger sense of context and interaction between them creates a chaotic experience. You will need to evaluate the design of the components in pages for the same reason.
To quickly test your component set, “assemble” the components you have identified into quick whiteboard sketches to try and produce the different types of pages the site will need. You can also do this in a list format if you don’t need to think visually.
Take for example the page formula header+text+video+related links=article page. You can use just the list of your components to quickly identify if you have the complete set you need. Do this first, before you prioritize and begin designing the components. This is a quick way to check your component set to see if it supports all of the new site’s content needs.
You may even need to create more polished page-type guides or formulas for how to use the components in order to give your content creators a guide on how to best use the component set for the site content. Page guides may also have to be created if the content is going to be produced in parallel with the site development.
These assets are also useful as an ongoing tool for site maintenance and governance, by documenting each component, it’s style rules, and the how/where/when it should be used in the site as you go, you build a useful guide for training and maintenance.
In Summary
The transition to component-based CMS platforms is an evolution of the current approach that offers a lot of flexibility, functionality re-use, and efficiencies for a web project. The same best practices, an informed discovery, and a solid content strategy are even more critical. Keys to successful projects focus on a content-first approach:
Component-based sites support the flexibility to define pages from multiple combinations of components rather than a limited set of fixed page templates.
All web site projects should be content-first, especially component-based projects.
To do a content-first approach, your project must include content strategy as a foundation.
Determine your components not just from the current content, but also from the recommendations from the content strategist.
The content strategist is a mandatory team member throughout the lifecycle of the project.
Designing the site first, then considering the content later, results in a site that won’t support the content strategy or the business and user goals.
Test your component set and your site design by “thinking in pages.”
All the pieces have to work together as your end user still experiences the site in pages.
Leverage your component definition work as you go to build documentation and training materials.
Beth Bader is a User Experience Director who works closely with content strategists to design and deliver content-first site experiences.