Stéphanie Walter avatar Stéphanie Walter

Designing Adaptive Components, Beyond Responsive Breakpoints

Screenshot of “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. 👍

  1. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }