Approaching web builds at the component level is a great way for design and development to meet in the middle.

Every web project starts by examining the brand’s story. 

What are we trying to communicate? To whom? What is most important? These answers are what inform work like the sitemap, navigation, site-wide CTAs, information architecture and overall content strategy. Considering and empathizing with your user and aligning their needs with the goals of a project, can help determine what needs to be said as well as where and how to say it.


The content outline deliverable is what summarizes the site’s narrative. It’s a document that defines content needs and informs the wireframe work to come. This Google doc may not look like much, but thoughtful content work in the beginning of a project is what essentially shapes the entire website. 

Once we have a content outline in place, we let that drive layout decisions and determine component, UI and content needs from there.

If the content strategy and outlining work is the blueprint, the wireframes become the foundation, structure and support for the eventual build. We’re not shopping shutters just yet, we’re making sure the house can stand the test of time.

Achieving Consistency and Cohesion through Componentry

Now for an interface inventory. We start by breaking out each element from wireframes into categories - UI, cards, menus, lists etc. to determine the needs for a project. 

Components are what become the “building blocks” for your site. Once you have a library outlined, you can begin to infuse the brand. Component by component, leveraging a brand’s personality and starting to establish a style guide foundation - Colors, heading styles, underlying grid, spacing etc. 

Then, taking things a step further by setting styles and effects. This is where it’s important to have fun and flex the brand, but also be mindful of rules, consistency and feasibility. Applying design to each component, 1 by 1, allows you to experiment, feel out what’s working, what isn’t and create patterns through properties that carry throughout the design and ensure consistency, trust and cohesion for the entire site experience.

Tweak, iterate, test and finesse. Designing components is the fun part. And once you build a core set, you’re on your way to being the proud new owner of a scalable, design system. The 

component library that you establish is a subset of the full system

. The library is essentially a repository of reusable modules that developers, or the admin can then utilize when building pages. And guess what? It doesn’t have to end there! Design systems provide a flexible framework that allow you to easily grow your library of core components at any time. This provides your website with the capacity to scale and evolve without compromising on consistency or quality.

For a more comprehensive look at creating a full design system, check out this post:

A set of rules and guidelines that act as a single source of truth for digital interpretation of your brand. A design system is essentially a complex digital brand guide. The building blocks for any web work.



Introduction to Design Systems

Creating a Design System in Figma

Here are a few examples of open source component libraries to pull inspiration from:

Web Design

User Experience

Frontend Development

Websites

UX / UI

Component-Based Web Design

Here at VIA, we believe web performance optimization (WPO) is essential for all websites. But some may wonder: is performance really important for 

 website? How can I tell if my site performs well? And how can I fix it? Let's discuss.

A poor-performing website can impact your customer’s experience with your brand. It can reduce conversion rates, affect the perception of your brand, and even cost your customers time and money.

In this article, we will explore what a “performant website” is, how a poor-performing website costs your business and your customers, and steps you can take to improve your existing website’s performance.

Finally, we share a case study about how we used this work to increase a client's website's revenue by +16%!

What we talk about when we talk about performance

A performant website loads quickly and is immediately interactive.

The site takes multiple seconds to begin displaying content.

Content starts appearing quickly but trickles in slowly.

Content appears to be loaded, but nothing is clickable yet.

A performant website loads only the required assets, which should be tailored to the user's device and preferences.

A performant website displays its content without shifting its layout as sections load in, responding to user input without delay.

Now that we've established web performance, you may wonder why it matters. "Sure, a fast site sounds great, but so does a fast car, and my [insert affordable family car] serves my needs just fine. Does my site really need to be blazing fast?"

 generally involve supporting users with physical or cognitive disabilities, but a user's socioeconomic status is also a concern. Users with low-powered devices or slow internet connections are the most impacted by poor web performance. Someone with a fast device on a fast network may not notice that a site has a large Javascript bundle or unoptimized images; someone without either may not be able to load it at all. And for those without unlimited data, accessing an unoptimized site may literally cost them money.

Optimizing a website's performance will make it more accessible to users on any device.

Time is Money: The Business Value of Web Performance

, WPO expert Tammy Evert opens by observing that "performance is very much a human issue." She shares a concept called "web stress" and points to research suggesting that using a slow website can actually increase your blood pressure. We will touch on the business implications of this shortly, but it's important to consider that we have a responsibility to the people who use our products. We should be respectful of their time and health, and we should also try to give them a good experience whenever possible.

It's important to note that a fast website alone does not make a happy user. A fast site with a confusing layout can still frustrate a user; its design is a significant part of the user experience. Even the best design is simply an attempt to mitigate a user's stress level when finding information or looking for a product. Slowness or other interruptions only add to that stress. The combination of a good design with no performance issues can create a happy user or at least one with a little less stress than before.

Here's Everts again: "When users are happy as a result of a fast website, they're more likely to follow calls to action telling them to register, download, subscribe, request information, or purchase." Note the variety of actions here. Happy users simply *do* more. Regardless of your goals for the site, it is more likely they will be met if your users are interacting with a performant site.

, where Everts and Tim Kadlec of WebPageTest (more on that later) curate web performance success stories. While you might expect large companies like 

Yelp to see improvements in their conversion rates by reducing load times

online dress retailer seeing a 30% conversion rate increase by moving to a faster eCommerce platform and optimizing images

. Performance improves results for businesses of all scales.

, a collection of metrics for measuring a site's performance and user experience. We'll discuss these metrics in the following section, but here's the critical thing to know here: 

in 2021, Google incorporated the web vitals into their search ranking algorithm

SEO and WPO are now intrinsically linked.

If you are doing the work to optimize your search rankings with searchable content and keyword tracking, but you are not optimizing your site's performance, you are missing a huge step.

You might wonder: "So performance is important, but how can I tell if my website is performant?" There are two ways to measure performance at a high level: field data and automated testing.

The absolute most effective way to tell how well your site is performing is to see how actual people are using it. This can mean:

Asking users for permission to record their usage

It is obviously not practical for everyone to bring in actual users for observation, which is why we have automated testing. Still, it's important to remember that automated tests are just 

As discussed above, Google's Web Vitals are metrics designed for measuring page performance, and while other metrics exist, these are the standard measurements across the web.

There have been a few variations, but these are the three prevailing metrics at the time of writing:

: how long it takes for the largest visible image or text block to load

: how much the content moves as it loads in

: how long the main Javascript thread is blocked by executing code, preventing user input

 is a tool made by Google for measuring website quality. It predates web vitals and tests for more than just performance, scoring on accessibility and best practices. Its results can vary from web vitals a bit, but the slightly different approach makes it a good complement to the basic metrics, and it's easy to run: just open the **Lighthouse** tab in the Chrome Dev Tools.

 is a tool that incorporates everything we've discussed so far. You can provide a URL and schedule a test that does the following:

It is the absolute best place to start if you want to get a sense of your site's performance.

You might have run a WebPageTest and been overwhelmed by all the data you're presented with. Now that you have it, where to begin?

Here are the most common problems on a site and how to fix them.

To reduce file size and improve Largest Contentful Paint:

Restrict the image dimensions to the dimensions at which it will be displayed on the page

Use multiple image sizes and `srcset` to only deliver the image size needed by the device

Set `width` and `height` attributes on the image so the browser knows how much space to save for it

When analyzing a request waterfall, you may notice that some important files, like those with critical CSS, are blocked by less important requests, like Javascript, that are not needed until the content is ready. There are a few ways to improve this.

 to optimize the order of `<head>` elements.

Move `<script>` tags to the end of the body and/or use the `async` or `defer` attributes

Loading a large Javascript bundle can block the loading of content and extend the Total Blocking Time, which prevents user interactivity. Take steps to deliver the minimum required JS.

Include only the most essential analytics scripts

, recently asked us to audit their site parts eCommerce website, 

. We had just added some new features, like Algolia autocomplete in the search and a dynamic Parts List for users. We wanted to take a step back and ensure everything was as optimized as possible without changing functionality or architecture. We did not build the site originally, so we also saw it as an excellent opportunity to better understand how things were structured.

We ran a WebPageTest and found that there was room for improvement. Emulating a 4G network connection on mobile, we got the following results:

It also identified a large number of uncompressed images, and ct.css determined that several critical assets were loading out of order.

Lazy-loaded all background images below the fold (i.e., not in the viewport on the initial load before scrolling)

Deferred the loading of all hidden images (e.g., images in the navigation's mega menu dropdowns)

Resized and compressed all background images

For the hero image above-the-fold, used Cloudinary's API to generate resized copies for each device breakpoint to avoid loading the desktop-sized image on mobile

Re-ordered the `<head>` elements and added `defer` to the Javascript scripts

Audited the Google Tag Manager and removed some unnecessary tracking tags

After all of these updates, we re-ran the test and found that we had cut both the LCP and the TBT in half (LCP: 3879ms (-57%); TBT: 4414ms (-48%)), and the site was noticeably faster for our QA testers.

The effects of these updates can be measured by more than just improvements in site speed and performance. In the 3 months following the updates, the website’s performance with user engagement and business goals also improved.

In the three months after making these updates, site users viewed an average of an additional page per session, and the average session duration increased by nearly 30 seconds!

In terms of revenue, site revenue increased by +16%, eCommerce conversion rate increased by +39%, and average order value increased by +24%.

Your Website's Performance Could Be Costing Time and Money

Ecommerce

Foxhollow Farm 

Branding

Art Direction

Auditing & Roadmapping

VIA Studio 

HTML, CSS and Javascript form the "presentation layer" of modern web development in your mobile and desktop browser. These things together are considered "Front-end Development". The tools, techniques and standards are changing all of the time - but our development team is always staying abreast of the latest. For our partners, we do the research, experimentation and testing needed to make sure your audience has an accessible, fast, reliable experience.

Frontend Development

Frontend Development: Case Studies

01

Foxhollow Farm

02

VIA Studio

Frontend Development: Blog Posts

Component-Based Web Design

Your Website's Performance Could Be Costing Time and Money