-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
72 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | ||
|
||
|
||
|
||
|