Stéphanie Walter avatar Stéphanie Walter

Designing Adaptive Components, Beyond Responsive Breakpoints

Screenshot of “Designing Adaptive Components, Beyond Responsive Breakpoints”

https://stephaniewalter.design/blog/designing-adaptive-components-beyond-responsive-breakpoints/

A great talk from Stéphanie about responsible use of responsive components:

In the talk, I show how I design systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different layout and container contexts. I also try to make sure that my components work beyond the perfect “happy path perfect situation”: what happens with super long text, missing images/content for example? And how about adapting components to user needs across specific points in their journey and build truly adaptive systems?

Stéphanie shares the slides, a video recording AND the transcript. 👍

  2. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?