The work I’m about to talk about was never about dark mode specifically, even though countless users asked for it. By solving everything along the way to dark mode, Stack Overflow would modernize its front-end codebase, enable accessibility-conscious theming, and push for adoption of our design system. We could give our users dark mode and offer future accessibility modes for free?
I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. In this article, I will talk about all the interesting things I saw.
It is not uncommon that I raise an accessibility or usability issue with a client’s design or implementation and am met with either “But Google does this,” or “But Apple does this.” Mostly it is the default response to any issue I raise, but it is far worse when it is a reaction to a genuine technical failure or problem real users have identified. That response does not address the problem I may have raised. It avoids. It offloads responsibility. It declines to even try.
This is huge. Currently, every CSS color we can specify, is defined to be in the sRGB color space. This was more than sufficient a few years ago, since all but professional monitors had gamuts smaller than sRGB. However, that’s not true any more. Today, the gamut (range of possible colors displayed) of most monitors is closer to P3, which has a 50% larger volume than sRGB. CSS right now cannot access these colors at all. Let me repeat: We have no access to one third of the colors in most modern monitors. And these are not just any colors, but the most vivid colors the screen can display. Our websites are washed out because monitor hardware evolved faster than CSS specs and browser implementations.
The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them: Serving a different sized copy of the same image depending on the user’s viewport width. We call this resolution switching, and you can accomplish it using the srcset and sizes attributes.
Design is a medium for communication, and to do it well, we must cultivate our own communication skills. Within design teams, we do our best work when we create a culture of feedback shaped by our creative space and our design review process.