The Three Scales of a Web Fix

Working on the web gives us a rare chance to build things that genuinely improve people's lives. What's fascinating is how wildly different the reach of those improvements can be—sometimes you're fixing a problem for one person on one site, and other times you're solving it for everyone, everywhere, at once.

Take the prefers-reduced-motion media query. As Eric put it, its real value isn't in impressing recruiters, but in sparing someone from experiencing real pain just because they wanted to click a link or scroll a page. It's a tool whose sole purpose is to respect a user's explicit request for less visual stimulation.

Now, note that a user opting into reduced motion isn't necessarily asking for zero motion—but unless you're ready to do the nuanced work of determining the perfect level of reduction per user, erring toward none is safer. So let's say you decide to strip all animation from your site. A simple CSS rule can handle that:

@media (prefers-reduced-motion: reduce), (update: slow) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

With that single rule, you've solved the problem for all users who prefer reduced motion, on one site. That's one distinct scale of impact.

But you could go a different route: build a browser extension. Thanks to the web's standardized extension format, you can largely write once and deploy it to any desktop browser. The caveats are obvious—you can't force anyone to install it, and of those who would benefit, a tiny fraction will ever have it running on your site. Yet for the people who do install it, you've fixed all sites for one person. A completely different, but equally powerful, kind of reach.

Given those two extremes, it's no surprise that some developers gravitate toward working on the browsers themselves, or the standards organizations guiding them. Browsers don't currently impose something like forced reduced motion at a CSS level, but they could. If you fix something at that foundational layer, you're potentially fixing it for all sites, for all users—the widest possible scope.

Those levels are worth keeping in mind:

  • Fixing one site for all users
  • Fixing all sites for one user
  • Fixing all sites for all users

You're not locked into a single one. Most of our daily work naturally lands in that first bucket. But it's worth asking, every now and then, whether a piece of what you're building could be pushed upward into the others.