Non-Quantized Responsive Designs

Published on

I Recently watched this talk that covered some ground on modern CSS approaches. Specifically the stuff about fluid typography and margins I found really cool.

The talk goes into using a few modern CSS features beyond media queries to make designs responsive. A way I have started to think about this in the days since is that media queries or breakpoints handled in JS are able to make designs responsive in a quantized fashion rather than in a fully fluid fashion. And i wonder if this sort of quantized responsiveness ought to be increasingly be seen as inferior.

Now to be fair, that quantized approach is well established for some solid historical reasons, and for many it probably even feels like a good fit yet today. A lot of UI design work that web developers might get handed is quantized ‚ÄĒ here is my mobile design, my tablet design, and my desktop design, for example. But, how much of that approach is a remnant of the fact that fully dynamic responsiveness was both overkill and technically very difficult until recently? And how much of that is just an artifact of design tools being a bit too static; I don‚Äôt know.

However, I can say with some conviction that the benefit of being fully dynamic isn’t the overkill it once was!

Phone/tablet/convertible laptops variations are only increasing, Mobile OSs have have split screen multitasking, ‚ÄúDesktop‚ÄĚ screens can be 720p to 8k. Monitors turned to tall vs wide, or once strange aspect ratios like 21:9, are not that uncommon anymore. On top of that, windows within those wildly variable view-ports can also be variable. So, regardless of device format, who knows what size or aspect ratio you might be rendering your web page inside of.

With the recent death of Internet Explorer, as well as certain aspects of Apple’s mobile browser getting some long overdue enhancements in iOS 15 and 16, a lot more options are reliably available in CSS land. Fully dynamic responsiveness is no longer a major technical challenge in CSS itself.

UI Frameworks like MUI are still stuck mostly in the quantized breakpoints zone. React developers who have shied away from native web ideas like CSS and plain ol’ HTML for far to long now are going to have some adjusting to do, but fun fully responsive days are ahead, and I for one look forward to it!