Skip to content

Commit

Permalink
Update; NEW: McMaster post
Browse files Browse the repository at this point in the history
  • Loading branch information
airbr committed Oct 27, 2024
1 parent f0f1c10 commit 72d5f84
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 0 deletions.
7 changes: 7 additions & 0 deletions content/atlanta/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Atlanta, Georgia, USA
date: 2024-10-23 12:00:00
---

I have a long interest in Georgia where I am originally from and retain strong connections to the area.

65 changes: 65 additions & 0 deletions content/posts/mcmaster-carr-wsg-review.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: "McMaster-Carr Sustainability Example: Getting into nuts and bolts"
date: 2024-10-25T8:00:00-08:00
draft: false
tags:
- web
- performance
- design
- sustainability
- CSS
- HTML
- JS
- Preloading
- Prefetching
- McMaster-Carr
- Web Sustainability Guidelines
- WSG
- WSG 1.0
show_reading_time: false
read_more_copy: Read more about McMasters design virtues...
blurb: Taking a Web Sustainability Guidelines look at some of the praised features of McMaster.com
---


Sustainability makes people happy and have joy in interacting with your products. User-Experience Design is one key feature of sustainability and the web is no exception.

The Web Sustainability Guidelines (WSG) are not just about reducing the environmental impact of a website it is also strongly linked with happy people. In the following example, we look at a few outstanding use of techniques that support some select web sustainability guidelines for a fast website experience that seems to wow people.

# The example: McMaster-Carr

[McMaster](https://www.mcmaster.com/) is a dramatic show of force at several guidelines that I argue explains why this website resonates with people. At least, it sort of gained a lot of traction and discussion in various groups and I am aware it made some [impact in media, credit to Wes Bos](https://www.youtube.com/watch?v=-Ln-8QM8KhQ).

McMaster exemplifies some sustainable web design principles to such a strong degree that it has at least a medium impact to some degrees in considering the web Sustainability Guidelines. The real world experience of selling such hardware must have taught them many lessons, and these seem built into the design of the website:

## 1. [Lightweight by Default](https://w3c.github.io/sustyweb/#create-a-lightweight-experience-by-default)

Open the website and there you are, you are looking at the product(s) available down to a list.

## 2. [Avoids Overabundance of Assets](https://w3c.github.io/sustyweb/#avoid-unnecessary-or-an-overabundance-of-assets)

Very minimal, consistent use of assets.

## 3. [Uses a Design System to prioritize interface consistency](https://w3c.github.io/sustyweb/#use-a-design-system-to-prioritize-interface-consistency)

The whole website has a consistent theme and style. There is a very spartan and clear visual hierarchy to the website.

---

# The web performance of McMaster-Carr

It is pretty awesome at some guidelines. But in terms of web performance it has got [some INP-related web performance issues](https://www.webpagetest.org/result/241027_BiDcRK_5T/) that seem to get in the way of it meeting the title of passing Core Web Vitals. Despite this, it is full of features to make the experience better for at least many users:

1. Preloads fonts
2. Prefetch's content
3. Caches content
4. Uses [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) Technology
5. Inlined CSS

# Conclusion

You may be locked within the realm of some particular stack, but there are always a variety of techniques that are available to help make your users happy. These go hand in hand with aiming to meet some of the User-Experience Design and performance described above.




0 comments on commit 72d5f84

Please sign in to comment.