[Robin]: First up this week, Una Kravets wrote about how marvelous the future will be with container queries:
Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
Why is that? Well, when it comes to CSS, the very small is disconnected from the very big. So it would be easy to make relatively large layout changes with grid and media queries, but smaller components are disconnected from that logic. Adding container queries makes smaller bits of UI more intelligent in a way that they now understand the context that they exist in. Or, as Una says much more eloquently:
One of the best features of container queries is the ability to separate micro layouts from macro layouts. You can style individual elements with container queries, creating nuanced micro layouts, and style entire page layouts with media queries, the macro layout. This creates a new level of control that enables even more responsive interfaces.
And with that, Una shows this pretty nifty example. Watch how the dates at the top of the calendar change their size in response to the width of their parent:
In this demo, Una showcases what makes container queries so very useful: improving small typographic details like font-size, line-height, and other properties. Perhaps that’s my own bias showing here as a font nerd, but websites will be able to be so much more typographically beautiful once container queries lands in browsers. Our toolbox gets so much bigger.
On that note, Max Böck wrote about how container queries can be applied to web components and argued that they’re so very helpful when combined together because they set up a clear separation of concerns:
That’s why Container Queries pair so well with CSS Grid. Grid defines a flexible layout from the outside, while container queries adapt whatever content sits inside it to the optimal size for the available space.
His demo for container queries is equally impressive here:
Modern Blog Layout with CSS Grid
Speaking of fabulous layouts, Aysenur Turk made this real nifty CSS Grid demo where the UI is more like a magazine than it is a traditional website:
It’s very much worth checking out Aysenur’s Pen because there’s all sorts of lovely UI work there, including this glass-inspired Creative Cloud app redesign:
Making Disabled Buttons More Inclusive
I’ve been thinking about this post from Sandrina Pereira a lot this week all about how to make disabled buttons more inclusive. The TL;DR here is that when we want to prevent a user action we shouldn’t just slap on the disabled attribute onto a <button>:
Our goal is to prevent the click, but by using disabled, we are preventing not only the click, but also the focus, which means we might be doing as much harm as good. Sure, this behavior might seem harmless, but it causes confusion. People with a cognitive disability may struggle to understand why they are unable to focus the button.
Sandrina recommends adding an explanation as to why you can’t click a button, such as telling someone that they need to select a number of tickets before they’re added to the cart.
But here’s the real kicker:
Whenever possible, don’t use disabled buttons. Let people click it at any time and, if necessary, show an error message as feedback.
DevTools for CSS Layouts
Many years ago, I remember talking to a web developer who was mad at DevTools. Why can’t it be so much more?
they asked me. To them, DevTools was nothing more than a debugging tool which, sure, is extraordinarily handy. But, what if,
they said, DevTools could teach you how to make a website? What if it could crack open Pandora’s box of CSS properties and HTML attributes to guide you towards becoming a better developer?
That conversation has stuck around in my head for years and I remembered it once again this week when I read Chen Hui Jing’s post about DevTools for CSS layouts. And especially this bit:
I’m personally convinced that DevTools can be more than just a debugging tool, it can potentially be a source of guidance right in our browsers. And with the way things are going, I think this might be becoming a thing.
Here’s an example of how Chrome teaches us about all the possible options when you select the display: flex property in CSS:
This and the grid inspector, as shown below in Firefox below…
…reminds me a lot of design tools like Figma or Sketch. Sure, you have to understand what CSS is and what properties are available to you — but! — as Chen shows in this post, there’s a ton of improvements to DevTools that are moving in this territory; letting DevTools become a guide and teacher for us as we build things.
Variable Aspect Ratio Cards
Ana Tudor made an incredible demo here: “Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal.” Wait, what? Okay, let me show you because I think it’s super impressive stuff:
See how those cards have two conic gradients going from each corner and then they meet at the center? If a designer gave me this mockup to create I think I’d change the design a bit or make a background image perhaps, but not Ana. She shows us how she created this effect with only CSS and some help from the background property. Then Ana made sure that it works when the aspect-ratio of the card changes, too.
Sponsor
BackHub
Mistakes happen. How long would it take your team to recover from downtime or data loss on GitHub?
Enjoy peace of mind with reliable, automated repo backups by BackHub. Get set up in minutes so you can recover in seconds.
Sponsor
Netlify
Like Jamstack, Netlify is coining the term “Distributed Persistent Rendering” (or “DPR” for short). Watch Netlify CEO Matt Biilmann explain how DPR is actually a push toward simplification and leverages ideas as old as the web is, just like Jamstack. Like, instead of re-building an entire site for a simple change, DPR can trigger the build only where it’s needed, and just when someone visits the affected area on the front end.
[Chris]: I find it interesting what the fate of Big Topics in our industry are. Sometimes they become legendary. Responsive design was a buzzword for dang near a decade and change the way web design is done. Design systems (for the web) overlap a bit, but came a bit later, and seem to be headed toward that same fate. Some things end up more like fads that drift way into nothingness only to be reborn decades later. Like… mom jeans.
Is UX one of these things? That seems wild to consider, doesn’t it? Here’s Peter Merholz and Waking up from the dream of UX:
What’s happened by 2021 is that UX is not interesting in and of itself anymore. UX is a given. As Joe Lamantia said in a mailing list I’m on, “it’s furniture.” And the challenges and frustrations people are expressing are largely due to this maturation.
We’re moving from “the dream of UX” to “the reality of UX.”
At the risk of sounding like a dummy, I never understood UX as a profession in and of itself. I get that it is about thinking about (and talking to) real users such that products can be built and refined toward making their experience better. But isn’t that literally everyone’s job? If it isn’t, shouldn’t it be? If you hire someone specifically for UX, isn’t that almost like a weird permission slip for others to care less about it?
Maybe we can promote UX to legendary status where, like responsive design, it is an assumption. Everyone cares about it. Everyone practices it. Everyone takes it seriously from the CEO to the designers to the DevOps people to the support engineers.
