Component based website design

Have you read the book, ​“What Got You Here Won’t Get You There”? It’s all about staying successful in your career as you climb higher up the rungs of experience and responsibility. It’s a great book, but its title is also an adage that’s true of many other things. Like escalators, for example, or the method by which your business’s website is designed.

It’s true. The old-school method of building websites has become far from optimal.

The Internet is a living, evolving thing, although we may not think of it in those terms. What was best-practice or industry-standard even just five years ago, is often antiquated today. Technologies have come and gone; the padded-table monstrosities, the Flash dinosaurs, HTML versions one through four…

Despite all this, the one thing that is still resistant to change is the approach that most companies use to design their websites. For the most part, small and midsize businesses are still using the same web design methodology that was fit for purpose in 1998.

And that’s a problem, because that traditional, page-centric design approach imposes a time, money, and performance cost, which potentially blunts your business’s competitive edge, and at minimum, is a cost that’s higher than what your business should be paying.

There is a better way. It’s called component-based web design — it’s what businesses like Airbnb, Pinterest, Uber and Walmart use to build their websites. And, if you’re considering a new website or a redesign, it’s what you (or your web agency) should be using too.

In this article, we’ll explain what component-based design is, how it works, and most importantly, why you should be using it.

In short, it’s an approach that flips traditional web design on its head, designing websites from the bottom-up, rather than the top-down. To really make sense of this, though, let’s just take a bird’s‑eye view of how things work without component-based design.

Page-Centric Problems

It used to be that when you wanted a typical business website, your starting point was to pick a number of pages — 5, 10, perhaps 20? With that decided, a designer would create full design layouts for each of those pages.

Usually, it would turn out that many of those pages would share similar elements — a navigation menu, for instance, or a search box. But often, some pages would also be entirely unique, with nothing in common with the rest of the website, except (hopefully) for a common visual theme. Ideally of course, each page would look good individually, but also together as a whole.

But what happens when you have a website with a lot more pages? 100, 500, or even 10,000 pages? Obviously, at that scale, it doesn’t make sense for anybody to try and design so many pages individually.

Template Trouble

That’s where templates came in. It’s a simple enough idea. Instead of designing each individual page, designers would instead work out a layout for a particular type of page. Archive, search result, contact, product listing — every page type would be templated.

However, templates built with this page-centric design approach have quite a few limitations. For one thing, they’re very restrictive. Even if you’ve invested a lot of time and effort to enrich your site with amazing content, it’s all forced within the constraints of a template. Making it look monotonous. Boring.

The other problem is that designers can’t always know beforehand the types of content or elements that will eventually be needed on a page. Want a page that offers two download options instead of just one? A sidebar to be displayed on some pages but not others? Nope, template won’t allow it.

Oops, I Broke It Again

All of this is why page-builder tools like Elementor, Divi and ultimately WordPress’s Gutenberg editor, started to become popular. They allow more flexibility in the design, enabling content authors greater control over the layout of each page. Unfortunately, because of the way these tools are implemented, the increased flexibility comes at the cost of consistency.

Content authors are given enough rope to hang themselves with and are often able to create pages that are detrimental to the design and functionality of the website, not to mention the presentation of the brand. What seemingly looks good and functions well on one screen or device, often turns out to be broken, unsightly or unusable on another.

To add insult to injury, the interfaces of these page editing tools have become increasingly complicated, to the point that some of the tools go as far as expecting that the content editors should actually be web designers!

Meet The Components

To counter all of these problems, designers and developers have proposed a variety of solutions over the years. The most powerful of them all, is component-based design, a method based on Brad Frost’s ​‘Atomic Design’ concept.

At its core, component-based design is based on a simple principle: web interfaces (or any interface, for that matter) are made of a number of fundamental building blocks. Starting the process with these blocks, and working up from there (rather than the traditional top-down approach), makes it possible to design pages with greater flexibility, modularity, and granular attention to detail.

So, what are these building blocks, you ask?

Well, at the most basic level, you have things like fonts, colours, and shapes. These are at the heart of your business’s identity, and really, they are attributes that should stay consistent not just across your website, but all of your brand’s assets, whether that’s a pullout in a brochure, or a display space in a physical store.

Next, you have elements such as buttons, form inputs, links, headlines, and images. Further up are components, which are groups of elements. For instance, a combination of a button, text, and image grouped together makes a component called a card.

(Note: There isn’t any standardised nomenclature for components (yet). People may use different names for components that are essentially the same.)

Building higher, you have compositions, which are groups of components. To continue with our card example, a group of cards clustered together might be called a panel, or (surprise, surprise) a deck.

A slightly more abstract (but very, very crucial) building block is the layout block, which is a set of rules that defines how compositions, and the components and elements within them, must be arranged, wherever they occur. This includes padding, white space, margins, alignment, and so forth.

Lastly, at the top of them all, are pages, which, as you’d expect, contain layouts of one or more compositions. Because of the way component design works, there’s nothing much to define at the page level, except the exceptions. If you want your Christmas sale page to sport a white and red colour scheme instead of your brand’s usual palette, that’s something that would be defined at the level of that individual page.

And that’s everything there is to component-based web design. Now, let’s look why any of this matters.

From the point of view of a business, the biggest attraction of this method is the fact that it saves significant amounts of time and money in the web development process. Because components are clearly defined and documented, building new pages becomes so much simpler.

When the entire website is broken down into individual components, you no longer have to worry about creating or improving individual pages. Instead, the team can focus on improving the components, and since those are shared across pages, improving the components automatically improves all the pages.

Say you have compositions like a ​‘featured card’, a text panel, and a header, ready for use. Making new types of pages like a blog post, a case study, a bio, or a product page, is just a question of reusing these building blocks, rather than designing from scratch and testing everything across hundreds of breakpoints. The whole is greater than the sum of its parts.

What’s more, all of this speeds up the time it takes to translate a design to work across mobile, tablet, and desktop displays. It can also improve how things look. For example, if you add animation or transition elements to one component, each place that that component is deployed will benefit from the upgrade.

But the benefits of this approach extend far beyond just development cost and time, as you can see below.

Simpler, Prettier, More Robust Sites

With this approach, content authors can create unique new pages without having to call in a designer to produce a layout for them each time, or worrying about without worrying about whether or not their layout will work on the latest iPhone. When each individual component has already been tested on an array of devices and browsers, the content editor can rest assured that they’re unlikely to break things by getting creative.

What’s more, if at all something does go wrong or require updating, it’s far simpler for developers to modify and maintain individual components than to maintain hundreds or thousands of individual custom-coded pages.

Better Performance

A consequence of designing at the component level is that it allows for much closer scrutiny and evaluation of whether a particular component is really the best tool for the job.

For instance, imagine that your site needs a checkout page, where one of the form fields that a user needs to fill is their shipping address. In the traditional approach, it’s easy to gloss over this detail with little thought, and just plonk in a few drop-down boxes for the user’s state or province.

In the component-based approach, we’re looking at elements like form fields at a closer level, so there’s a much better opportunity to ask: is this the best way?

What if, instead of clunky, unwieldy drop-downs that force users to scroll and add so much friction to the checkout process, the site instead uses a text field with auto-suggest? When the user types in their city name, the state / province could be automatically updated.

With just a little bit of extra thought and practically no extra expenditure of money, you’d be reducing friction and shaving seconds off the checkout process — and who knows how much that is worth?

Okay, you say, I’m sold on the advantages of CBD. But my website only needs six pages, so it probably doesn’t make any difference to me.

Not so. Admittedly, economy of scale is indeed a factor that works in favour of large websites using component-based design. It’s true that the savings in terms of development time and cost would be greater for a massive website, than for a tiny one.

That said, one of the great strengths of component-based design is that it delivers websites that are more extensible and future-proof. This is because designers can define rules on how different components or compositions can be combined, even when you may not currently have any instances where they occur together.

Once a component has been tested well and is verified to work properly, it can be used anywhere. As a result, your business can confidently create and add pages to your website, including pages that, at the time you first built the site, you didn’t even know you needed.

And, of course, the performance and aesthetic benefits mentioned previously would still be applicable, even for a small site.

So, what are the hidden drawbacks of component-based web design? If it’s really so beneficial, why isn’t everyone using it?

We’re not entirely sure, to be honest. But we can make a few guesses.

The foremost reason why component-based design isn’t as popular as it ought to be, is probably because it’s still relatively new. Page-centric design has been around since — well, since the dawn of the internet. CBD, on the other hand, has been around for less than a decade, and has garnered more attention even more recently.

Another reason might be the fact that component-based design demands more collaboration between developers and designers. With page-centric design, it’s easy enough to judge whether each specific page looks good — after all, you’re looking at it. With component-based design however, developers and designers need to work together to make sure that what they’re building will really work well in all permutations.

And, if you don’t start with a well-defined plan, you might not create enough (or the right) components to be used on your site later. This can leave content authors frustrated, trying to create pages with inadequate parts. To do this properly, project stakeholders, designers, developers, and content authors need to collaborate very early on in the process to determine the necessary components and how each one will work.

At Simplicate, we work with our customers using a proprietary process that combines component-based design with rapid web prototyping. This, in our opinion, truly delivers a web development workflow that offers the best of both worlds — the clarity on desired end results that’s available in linear development, and the speed, flexibility and cost-savings of iterative development.

If you’re planning your next web project, you might be interested in this great guide on the best CMS for small and midsize businesses. Or, if all of this feels like a bit much to process, why not just get in touch with us for a free, no-obligation consultation? We’re friendly, happy to chat, and always strive to leave you with more clarity than you had before.