6 ms·

I didn't see anyone mention the McMaster-Carr website [1]. It may not be the "densest" out there, but it's clean, functional, and nicely presents a lot of infor

by abound 1y ago

I didn't see anyone mention the McMaster-Carr website [1]. It may not be the "densest" out there, but it's clean, functional, and nicely presents a lot of information at once. [1] https://www.mcmaster.com/ https://www.mcmaster.com/

calvinmorrison 1y ago
of of course, RockAuto.com
- whalesalad 1y ago
  one of the most unconventional websites ever for sure
  - vvpan 1y ago
    Very ext.js looking.
agumonkey 1y ago
And there's something utilitarian in its internal and external design. No flashy, no fancy.. 99% informational and low lag.
- CleanCoder 1y ago
  The low lag part is especially impressive. Here is Wes Bos taking a deeper dive into the intricacies of technologies used to accomplish this: https://www.youtube.com/watch?v=-Ln-8QM8KhQ https://www.youtube.com/watch?v=-Ln-8QM8KhQ
  - flanbiscuit 1y ago
    related: https://syntax.fm/show/855/fast-websites-the-new-speculation-rules-api https://syntax.fm/show/855/fast-websites-the-new-speculation...
  - agumonkey 1y ago
    I remember people digging into this because it used good sense over vanilla js instead of complicated stack.
  - canucker2016 1y ago
    tl;dw - ASP.net, image sprites, yui, jquery, preloading, and caching
  - Sohcahtoa82 1y ago
    I've always assumed that making a fast and responsive website isn't a technical problem, but a social/political one. It's easy to create a website where interactions simply fetch the necessary resources and update the DOM as required. But managers then insist on adding 20 trackers so every little click and interaction gets logged somewhere for analytics. Or are frameworks REALLY that slow?
    - imiric 1y ago
      > Or are frameworks REALLY that slow? Of course they are. There's a significant overhead from a virtual DOM and reconciliation with the real DOM. Then there's the larger overhead from relying on JavaScript for everything. The JS VM in modern browsers is very performant, but it can't optimize poorly written code, whether that's from frameworks, the gazillion libraries modern web sites depend on for analytics, trackers, ads, shims, helpers, etc., and, of course, any custom JS specifically written for the web site. Browsers can enable very rich and responsive interfaces, but web development is bogged down by the insane state of popular frontend stacks. There's a recent trend of rejecting this insanity (htmx, Nue, Datastar), which I hope gets us on a track where we optimize for user experience using native web technologies.
  - victor106 1y ago
    the also use asp.net
WillAdams 1y ago
There is (was?) an absolutely fabulous answer on quora.com which detailed how this site came to be --- from memory: - initial ecommerce site was a mess (basically a page-by-page recreation of the catalog?) which saw minimal usage - the redesign, which focused on usability --- notably reduced cognitive load --- resulted in an immediate uptick in orders which grew markedly for a long while until it represented the vast majority of their business EDIT: and also optimized for repeat orders on a schedule If someone could find that, or a better writeup, I'd be grateful (it's _not_ the Medium.com article) and this page: https://iacollaborative.com/work/mcmaster-carr/ https://iacollaborative.com/work/mcmaster-carr/ is just a mentioning by the company which did the underpinnings, not the overall architect. This link is decent: https://www.bedelstein.com/post/mcmaster-carr https://www.bedelstein.com/post/mcmaster-carr There was of course previous discussion of this here: https://news.ycombinator.com/item?id=34000502 https://news.ycombinator.com/item?id=34000502 Video on why the site loads so fast: https://www.youtube.com/watch?v=-Ln-8QM8KhQ https://www.youtube.com/watch?v=-Ln-8QM8KhQ (which is from the Medium.com article)
- squiggy22 1y ago
  I wonder how much additional traffic, links, seo benefit and general brand awareness this site has generated simply off doing things to this standard. A fly wheel of benefits.
  - alnwlsn 1y ago
    Actually, I'm pretty sure I've never seen a McMaster link in any search engine. Even if you google a direct McMaster part number, like "91251A449", McMaster will not be among the results. While the url to that product is just https://www.mcmaster.com/91251A449/ https://www.mcmaster.com/91251A449/
    - spookie 1y ago
      "Black oxide screw" on the other hand appears. Those numbers could be anywhere, on completely unrelated things. They are not a good search query.
fortyseven 1y ago
This was absolutely amazing to navigate on mobile! Very fast. Instant response. Loved it.
alwa 1y ago
Part of its pleasure is the way it reduces an intrinsically dense catalog of parts to such a consistent and sensibly-structured interface. Even though it’s never failed to connect me with precisely the part I’m seeking, to this day their interface spooks me a little: where are they hiding the endless walls of text and part numbers, the kaleidoscopic wall of bins?!
the_svd_doctor 1y ago
This is incredible. Almost feels like another world.
fourside 1y ago
It’s one of the first examples in the link the OP shared. It’s a high quality post!
quacksilver 1y ago
RS is similar though was better in the past example: https://uk.rs-online.com/web/c/?searchTerm=zync+7010 https://uk.rs-online.com/web/c/?searchTerm=zync+7010
jotux 1y ago
Similarly good, but small mechanical component specific: https://shop.sdp-si.com/ https://shop.sdp-si.com/
rdtsc 1y ago
Absolutely! Every time I see it mentioned, I end up browsing it just marveling what a nice job they did. It's laid well very well, has just the right information, it's lightning fast, I like the color scheme. If there is a UI design award somewhere, they should definitely get it.
alnwlsn 1y ago
I'm going to go against the crowd and say that I prefer DigiKey and Mouser's sites over McMaster. The filter/apply pattern they use when trying to narrow things down is a lot quicker than waiting for Mcmaster's auto updating window. Usually, when I'm looking for something, it's not for an exact specific item, but to know what options are even there in the first place. Selecting ranges of things in McMaster has always felt a little cumbersome, but Digikey has always had it right. The other thing McMaster does that's kind of annoying, but also kind of funny, is that they go out of their way to purge the branding of the items they stock. Very understandable why they do that, but sometimes they do it when it doesn't make sense. Want to buy a generic "graphing calculator" for $126 which is definitely not a Texas Instruments TI-83 Plus? Here you go! [1]. Look, you're not fooling anybody here. [1] https://www.mcmaster.com/8392T11/ https://www.mcmaster.com/8392T11/
- kube-system 1y ago
  I kind of like how they genericize everything. It reduces the cognitive load of making decisions, and presents all of the options in the most uniform way, based on their hard specs, and not marketing BS.
  - alnwlsn 1y ago
    It's ok most of the time, but it's not like they sell McMaster branded stuff in McMaster packaging. They are a supplier, and might want to obfuscate to keep you from buying direct from the actual manufacturers. On the other hand, on my desk right now is a bag of springs, the info printed on it says it was made by WB Jones, part number 4011. We ordered it from McMaster. Why not? They stock the item and ship super quick. If I want another bag of the same springs, it's not like I can go to McMaster, type in "springs 4011" and expect to find it. Instead, I'll have to search up purchasing requests I've made, maybe ask a coworker if they ordered them, etc. to find the mcmaster number again. If I didn't know Mcmaster sold it to us, I'd have no idea they sold it at all. To be fair, if they sell things that are interchangeable, like screws, it would be a lot to list every manufacturer they use. They have 5 locations, and probably stock from a different manufacturer or multiple manufacturers at each one.
ddoolin 1y ago
I have written a couple internal parts databases and this was my starting point as far as design/UI/UX.
TiredOfLife 1y ago
There is a project that implements the site in Next.js https://github.com/ethanniser/NextFaster https://github.com/ethanniser/NextFaster
hbarka 1y ago
Wow that’s beautiful. The grayscale works surprisingly well with high fidelity. Thanks for sharing
fedsocpuppet 1y ago
I love McMaster but the multi-tab experience could really be better. Search filters don't carry through opening a link in a new tab (try searching M3 screw then ctrl-click socket head screws). Sometimes ctrl-clicking product numbers/product detail doesn't work at all. IIRC the back button sometimes breaks too. Pretty annoying since 80% of the time I'm researching the best component and want to backtrack easily.
deleted 1y ago
[deleted]
mberning 1y ago
I particularly enjoy Rock Auto’s website as well. Absolutely no BS. It dumps you right onto the list of car makes.
20after4 1y ago
And here is a knock-off of the McMaster Carr UI built with Next.js: https://github.com/ethanniser/NextFaster https://github.com/ethanniser/NextFaster
Waterluvian 1y ago
It’s one of the most purest Web adaptations of an existing product catalog I think there is.

by abound 1y ago

calvinmorrison 1y ago

of of course, RockAuto.com

whalesalad 1y ago
one of the most unconventional websites ever for sure
- vvpan 1y ago
  Very ext.js looking.

agumonkey 1y ago

And there's something utilitarian in its internal and external design. No flashy, no fancy.. 99% informational and low lag.

CleanCoder 1y ago
The low lag part is especially impressive. Here is Wes Bos taking a deeper dive into the intricacies of technologies used to accomplish this: https://www.youtube.com/watch?v=-Ln-8QM8KhQ https://www.youtube.com/watch?v=-Ln-8QM8KhQ
- flanbiscuit 1y ago
  related: https://syntax.fm/show/855/fast-websites-the-new-speculation-rules-api https://syntax.fm/show/855/fast-websites-the-new-speculation...
- agumonkey 1y ago
  I remember people digging into this because it used good sense over vanilla js instead of complicated stack.
- canucker2016 1y ago
  tl;dw - ASP.net, image sprites, yui, jquery, preloading, and caching
- Sohcahtoa82 1y ago
  I've always assumed that making a fast and responsive website isn't a technical problem, but a social/political one. It's easy to create a website where interactions simply fetch the necessary resources and update the DOM as required. But managers then insist on adding 20 trackers so every little click and interaction gets logged somewhere for analytics. Or are frameworks REALLY that slow?
  - imiric 1y ago
    > Or are frameworks REALLY that slow? Of course they are. There's a significant overhead from a virtual DOM and reconciliation with the real DOM. Then there's the larger overhead from relying on JavaScript for everything. The JS VM in modern browsers is very performant, but it can't optimize poorly written code, whether that's from frameworks, the gazillion libraries modern web sites depend on for analytics, trackers, ads, shims, helpers, etc., and, of course, any custom JS specifically written for the web site. Browsers can enable very rich and responsive interfaces, but web development is bogged down by the insane state of popular frontend stacks. There's a recent trend of rejecting this insanity (htmx, Nue, Datastar), which I hope gets us on a track where we optimize for user experience using native web technologies.
- victor106 1y ago
  the also use asp.net

WillAdams 1y ago

There is (was?) an absolutely fabulous answer on quora.com which detailed how this site came to be --- from memory: - initial ecommerce site was a mess (basically a page-by-page recreation of the catalog?) which saw minimal usage - the redesign, which focused on usability --- notably reduced cognitive load --- resulted in an immediate uptick in orders which grew markedly for a long while until it represented the vast majority of their business EDIT: and also optimized for repeat orders on a schedule If someone could find that, or a better writeup, I'd be grateful (it's _not_ the Medium.com article) and this page: https://iacollaborative.com/work/mcmaster-carr/ https://iacollaborative.com/work/mcmaster-carr/ is just a mentioning by the company which did the underpinnings, not the overall architect. This link is decent: https://www.bedelstein.com/post/mcmaster-carr https://www.bedelstein.com/post/mcmaster-carr There was of course previous discussion of this here: https://news.ycombinator.com/item?id=34000502 https://news.ycombinator.com/item?id=34000502 Video on why the site loads so fast: https://www.youtube.com/watch?v=-Ln-8QM8KhQ https://www.youtube.com/watch?v=-Ln-8QM8KhQ (which is from the Medium.com article)

squiggy22 1y ago
I wonder how much additional traffic, links, seo benefit and general brand awareness this site has generated simply off doing things to this standard. A fly wheel of benefits.
- alnwlsn 1y ago
  Actually, I'm pretty sure I've never seen a McMaster link in any search engine. Even if you google a direct McMaster part number, like "91251A449", McMaster will not be among the results. While the url to that product is just https://www.mcmaster.com/91251A449/ https://www.mcmaster.com/91251A449/
  - spookie 1y ago
    "Black oxide screw" on the other hand appears. Those numbers could be anywhere, on completely unrelated things. They are not a good search query.

fortyseven 1y ago

This was absolutely amazing to navigate on mobile! Very fast. Instant response. Loved it.

alwa 1y ago

Part of its pleasure is the way it reduces an intrinsically dense catalog of parts to such a consistent and sensibly-structured interface. Even though it’s never failed to connect me with precisely the part I’m seeking, to this day their interface spooks me a little: where are they hiding the endless walls of text and part numbers, the kaleidoscopic wall of bins?!

the_svd_doctor 1y ago

This is incredible. Almost feels like another world.

fourside 1y ago

It’s one of the first examples in the link the OP shared. It’s a high quality post!

quacksilver 1y ago

RS is similar though was better in the past example: https://uk.rs-online.com/web/c/?searchTerm=zync+7010 https://uk.rs-online.com/web/c/?searchTerm=zync+7010

jotux 1y ago

Similarly good, but small mechanical component specific: https://shop.sdp-si.com/ https://shop.sdp-si.com/

rdtsc 1y ago

Absolutely! Every time I see it mentioned, I end up browsing it just marveling what a nice job they did. It's laid well very well, has just the right information, it's lightning fast, I like the color scheme. If there is a UI design award somewhere, they should definitely get it.

alnwlsn 1y ago

I'm going to go against the crowd and say that I prefer DigiKey and Mouser's sites over McMaster. The filter/apply pattern they use when trying to narrow things down is a lot quicker than waiting for Mcmaster's auto updating window. Usually, when I'm looking for something, it's not for an exact specific item, but to know what options are even there in the first place. Selecting ranges of things in McMaster has always felt a little cumbersome, but Digikey has always had it right. The other thing McMaster does that's kind of annoying, but also kind of funny, is that they go out of their way to purge the branding of the items they stock. Very understandable why they do that, but sometimes they do it when it doesn't make sense. Want to buy a generic "graphing calculator" for $126 which is definitely not a Texas Instruments TI-83 Plus? Here you go! [1]. Look, you're not fooling anybody here. [1] https://www.mcmaster.com/8392T11/ https://www.mcmaster.com/8392T11/

kube-system 1y ago
I kind of like how they genericize everything. It reduces the cognitive load of making decisions, and presents all of the options in the most uniform way, based on their hard specs, and not marketing BS.
- alnwlsn 1y ago
  It's ok most of the time, but it's not like they sell McMaster branded stuff in McMaster packaging. They are a supplier, and might want to obfuscate to keep you from buying direct from the actual manufacturers. On the other hand, on my desk right now is a bag of springs, the info printed on it says it was made by WB Jones, part number 4011. We ordered it from McMaster. Why not? They stock the item and ship super quick. If I want another bag of the same springs, it's not like I can go to McMaster, type in "springs 4011" and expect to find it. Instead, I'll have to search up purchasing requests I've made, maybe ask a coworker if they ordered them, etc. to find the mcmaster number again. If I didn't know Mcmaster sold it to us, I'd have no idea they sold it at all. To be fair, if they sell things that are interchangeable, like screws, it would be a lot to list every manufacturer they use. They have 5 locations, and probably stock from a different manufacturer or multiple manufacturers at each one.

ddoolin 1y ago

I have written a couple internal parts databases and this was my starting point as far as design/UI/UX.

TiredOfLife 1y ago

There is a project that implements the site in Next.js https://github.com/ethanniser/NextFaster https://github.com/ethanniser/NextFaster

hbarka 1y ago

Wow that’s beautiful. The grayscale works surprisingly well with high fidelity. Thanks for sharing

fedsocpuppet 1y ago

I love McMaster but the multi-tab experience could really be better. Search filters don't carry through opening a link in a new tab (try searching M3 screw then ctrl-click socket head screws). Sometimes ctrl-clicking product numbers/product detail doesn't work at all. IIRC the back button sometimes breaks too. Pretty annoying since 80% of the time I'm researching the best component and want to backtrack easily.

deleted 1y ago

[deleted]

mberning 1y ago

I particularly enjoy Rock Auto’s website as well. Absolutely no BS. It dumps you right onto the list of car makes.

20after4 1y ago

And here is a knock-off of the McMaster Carr UI built with Next.js: https://github.com/ethanniser/NextFaster https://github.com/ethanniser/NextFaster

Waterluvian 1y ago

It’s one of the most purest Web adaptations of an existing product catalog I think there is.