The Evolution of Responsive Web Design: What's Next?
summary
More than 50% of global web traffic comes from mobile; the talk shows concrete techniques that replace heavy media-query layouts: container queries (supported broadly since Feb 2023) let components adapt to parent width instead of viewport, fixing a Spotify-like Angular demo where cards switch from 1.5 to full rows around ~492px; CSS Grid’s auto-fit / auto-fill plus flexbox handle dynamic columns, and responsive math with clamp() and cqw units smooth sizing; user prefs like prefers-color-scheme and reduced-motion are applied.
AI-written summary · about
chapters (22)
- 0:00Introduction to responsive
- 0:48The history of web layouts
- 3:33The rise of mobile browsing
- 5:39Principles of responsive design
- 7:56About the speaker
- 9:37Content-aware layout with Flexbox
- 12:26Flexible form layout example
- 15:51Viewport-based responsive design
- 18:27Building responsive grid systems
- 21:35Flexbox vs Grid comparison
- 23:47Advanced CSS Grid techniques
- 27:31Introduction to container queries
- 30:40Spotify card demo
- 34:22Container query implementation
- 37:12Using the @container rule
- 39:28Layout example breakdown
- 42:31Container query syntax details
- 45:41Container query units and clamp
- 47:33Live demo of flexible cards
- 50:53Future of design and support
- 52:53Respecting user preferences
- 56:32Conclusion and Q&A
related talks
40mFuture-Proofing Responsive Web Design in 2023
17mThe New Responsive: Web Design in a Component-Driven World
15mResponsive Design vs. Adaptive Design
35mModern CSS Replacements for Better Responsive Code
45mHow Responsive Are You in CSS? 2026 Edition
26mResponsive Components: Present & Future
29mSquishy Pixels
28mResponsive Components: Present & Future