Laziness in the Time of Responsive Design
summary
Opens with Pando — 43 hectares, ~40,000 stems, maybe 80,000 years — and moves to concrete techniques: use an intrinsic-ratio shim (padding-top: 56.25% aspect ratio) to make embedded video resize without JS; build fluid grids by dividing pixel comps into proportions and using nth-child for gutters; implement a fancy stateful four radio-button picker with semantic inputs, CSS transforms and JS that only toggles classes; favor progressive enhancement like cutting the mustard and baseline content-first breakpoints.
AI-written summary · about
chapters (35)
- 0:00Introduction
- 5:08Adjectives
- 6:48Layout
- 7:28Video
- 8:24Resizing Video
- 9:28Aspect Ratio
- 10:29CSS Styles
- 11:09Example
- 12:01Net Result
- 13:03Fluid Grid
- 13:35Applying Fluid Grid
- 14:19Using andChild
- 17:31Frameworks
- 18:14The problem with frameworks
- 19:28Disney Studios
- 20:19They felt real
- 21:12The Twelve Principles of Animation
- 24:48Design Frameworks
- 25:26Small Layout Systems
- 26:23Shared Buckets
- 27:12Selfcontained design system
- 28:11Navigation
- 29:49The Hamburger
- 30:18The Hamburger Problem
- 31:00Timecalm Responsive Design
- 31:22Helpful Menu Text
- 33:34Filament Group
- 34:16Frank Camaro
- 42:56Trent Walton
- 43:40BBC News Responsive Redesign
- 44:27Cutting the Mustard
- 45:24Wrap Up
- 45:58The Beginners Mind
- 46:23The Future of Layout
- 48:11Should Responsive Design Be Expanded
related talks
29mSquishy Pixels
49mPanel 4: Responsive Layout
40mThings To Keep In Mind When Working In The World Of Responsive Design
32mResponsive Design Patterns for an Evolving Web
43mGetting serious about Responsive Web Design
51mWeb Design Engineering With the New CSS
01h 01mThe Evolution of Responsive Web Design: What's Next?
28mResponsive Components: Present & Future