New Adventures in Responsive Web Design
summary
Practical checklist of what actually changed: enable Brotli + gzip fallback for HTML/CSS/JS and precompress static assets on the CDN; use responsive images with picture element, cropping/gravity tools and progressive scan tuning to cut dozens of KBs; apply fluid component sizing via calc-based CSS locks instead of many media queries; implement critical two-stage font load via data URI + Service Worker and use font-display: optional; sandbox third‑party code with iframes or SafeFrame and use Intersection Observer for lazy third‑party loading; test on midrange devices (Moto G4), aim for 170 KB initial budget, 14 KB critical and TTI <5s on slow 4G.
AI-written summary · about
chapters (31)
- 0:00Intro
- 8:22Images
- 16:20Design Systems
- 18:10Component Functions
- 20:00Media Queries
- 22:20CSS Locks
- 23:15Fluid Behavior
- 24:35Fluid Container
- 25:35Web Fonts
- 26:45Web Fonts Experience
- 29:05Data URI
- 29:40Twostage render
- 30:50HTTP cache
- 32:20Chrome cache
- 33:40Dont wait
- 34:55Variable fonts
- 38:00Dev Tools
- 40:50Black Hole
- 42:30iframe
- 43:15SafeFrame
- 44:05Interactive Advertising Bureau
- 44:47Intersection Observer
- 45:45Viewport Observer
- 47:05iframe Observer
- 47:50Polyfill
- 49:10Participation
- 50:00Cutting the Master
- 52:25Device Memory
- 53:35Speed Index
- 54:45File Size
- 56:40Conclusion
related talks
01h 03mNew Adventures in Responsive Web Design
43mResponsive Design, Past, Present and Future
43mGetting serious about Responsive Web Design
53mNew Adventures in Responsive Web Design
42mDelivering Responsibly
26mFast and Beautiful Modern Image Delivery Techniques
50mAdvanced HTML for Good Developers
29mSpeed Essentials: Key Techniques for Fast Websites