The new responsive: Web design in a component-driven world | Session



The web community is entering into a new era of responsive design and shifting our perspectives on what it means. With user preference queries, container queries, and other form-factor queries on the horizon, we’ll soon have the tools to create responsive designs far beyond what querying the global viewport allows. This Session highlights what it means to be responsive to the user, container, and form-factor, along with how to implement some of these new axes of responsive design.

Speaker: Una Kravets

Watch more:
Web at Google I/O 2021 Playlist →
All Google I/O 2021 Technical Sessions →
All Google I/O 2021 Sessions →

Subscribe to Google Chrome Developers →

#GoogleIO #Web #Design

product: Chrome – General; event: Google I/O 2021; fullname: Una Kravets; re_ty: Premiere; ;

42 comments

  1. For those of us doing client work, anything stuck in Chrome Canary is irrelevant. Container queries sound cool, but you could get some of that functionality using grid column min-max sizing.

    Reply

  5. wow! And here I was thinking which one to use, CSS-in-JS or CSS Modules !!! guess plain vanilla CSS is the way to go

    Reply

  9. cool indeed .. I thought it was going to go into how you must serve separate mobile/tablet/desktop pages.. just an upgrade to responsive yay lol 🙂

    Reply

  16. Hey, google, stop over-engineering.
    If some users don't like something, that's fine, they'll get used to it.
    If they don't even know what they want, don't make more work over-posturing your app.
    Come on.

    Reply

  24. Interested in seeing how this fleshes out across the new fangled foldable tech that is going to be introduced in the future.

    Reply

  32. Container queries seem soooo game changing. Seriously this is basically all that was missing for developing truly independent components.

    Reply

  33. What about a @prefers-[language]???
    When will you stop forcing android apps to be a certain language when I'm abroad or when, for example, an app has brazillian portuguese but I'm in Portugal? Brazillian Portuguese is different from Portuguese and it sucks not being able to at least use stuff in English

    Reply

  39. Container queries is the real beast here, the rest I would just call out as extras. Then scoped styles could become interesting if it's user friendly. But like all new features, this won't really be used until +7 years from now if I know the ecosystem and browser support, sigh…

    Reply

  40. In the current market trend – mobile-first, is hard to find some information about the CSS for BIG TV SCREEN. Maybe the future of CSS would be about mixing the mobile-first CSS approach with BIG TV. CSS. I mean users can search information on mobile and display the same data with BIG TV CCS? Is like switching between dark-light CSS, but I think switching small colors from the mobile display into a big screen would need some additional CSS library to install on both devices ( browsers ). When I wrote BIG TV SCREEN I do not mean the only TV at home but also in cars, trucks, trains, airplanes, and airports. The future of CSS is full of transferable data

    Reply

  42. Container queries will be great for saving time building out multiple components. But we're probably looking at another 3/5 years until it's widely adopted enough to justify using

    Reply

Leave a comment

Your email address will not be published.