Jordan Moore | Web Design, Northern Ireland, Bangor, Freelance
A sweet little meditation on the nature of the web and responsive design.
Related links
An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed
Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.
- Responsive to the content
- Responsive to the viewport
- Responsive to the container
- Responsive to the user preferences
Tim Brown: CSS forces
Some interesting thoughts from Tim here. What if CSS could “displace” design decisions from one area to another?
For example, a flexible line spacing value in one container could influence margins that surround the text block. That change in spaciousness may mean that nearby headings need size or spacing adjustments to stay feeling connected.
This feels like the complete opposite way that most people approach design systems—modular, componentised, and discrete—but very in-line with the way that CSS has been designed—interconnected, relational and cascading.
Related posts
Five websites
I have some very talented friends.
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Utopia
Why do I like fluid responsive typography? Let me count the ways…
Tweakpoints
Not all media queries are created equal.
Media queries and multiple columns
Responsiveness in the second dimension.