Do you have plans to refresh or rebuild your website? If so, you could benefit from compiling what is called a component inventory. A component inventory is extremely beneficial in documenting high value areas of your site. It is an easy practice that identifies pieces you know you won’t be able to do without on a site.
What is a component?
Most websites are made up of what are called components. Put simply, these are the building blocks of your website that are reusable across the entire site. Things like videos, images, product listings, text areas, headers, etc. are typically created using a component.
How do I identify what components are on my site?
The easiest way to identify which components you will need to plan for in your project is to run your current site through a website crawler (such as Screaming Frog), which will populate a list of all known pages on your website. From here, you can look at the list of your existing pages and group them into like page templates or important page types that you can’t live without (for example: product listing, blog post, service offering, about your company, home page, contact information, etc.).
Once you have a list of the page types you plan on needing in your upcoming project, you can run through an example of each of those pages to identify what pieces live on each of those pages that you think you’ll need on the new site. If you know what platform you are going to be building your new site on and you are familiar with the types of components available within that platform “out of the box”, you can start to uncover what components are missing that may need a custom effort development-wise or custom styling in the form of a variant/styling. The more that can be uncovered in this component inventory phase, the more smoothly and efficiently development of your new site will go.
What does a component inventory look like?
Every component inventory will look slightly different, but at the end of the day a solid inventory will be a table with (at a minimum) the following fields for each component:
Name of the component
This will be how the component is labeled both in the Content Management System (CMS), as well as how it is referred to across development teams and the project management platform being used throughout the duration of the project.
Purpose of component
This will be what the component is used for on the site or what value the component brings to the site. Think of it this way: what can a user accomplish by using or viewing this piece of your site?
Screenshot of example of component in use on current site on desktop
This should help clear up any confusion about what is being referenced once the project is kicked off. It also is helpful to have a visual of what the component is supposed to look like. If there are multiple variations or styles of a component needed, it’s helpful to capture a screenshot for each variant.
Screenshot of example of component in use on current site on mobile
How a component renders on mobile will occasionally be much different than how it appears on desktop. For this reason, it is important to have a visual of both desktop and mobile views to understand these differences.
Notes about functionality or just general notes about the component
This last piece of the component inventory is a “catchall” for any notes that don’t fit within the other fields. That said, these notes are still vital to the execution of your project and therefore need a place to live.
Putting it all together
When all is said and done, your component inventory template may look something like this:
Once this document is in place, your team will be well on its way to planning out your project. Is this concept new to you or do you think you’ll need help on your next project? The experts at Perficient can help. Reach out to us today!
