Responsive Design in 2020
summary
Argues responsive means adapting to user preferences, environment, network and device capabilities rather than only viewport width, and shows concrete techniques: use prefers-color-scheme plus a cheap dark-mode using invert + hue-rotate and double-inverting images, respect prefers-reduced-motion and make reduced motion the default, query network with navigator.connection or Save-Data and avoid heavy media, handle safe areas with env(safe-area-inset-)*, and use interaction media queries to size touch targets and hide hover-only UI.
AI-written summary · about
chapters (9)
- 0:00Start
- 5:11User preferences: prefers-color-scheme
- 7:45User preferences: prefers-reduced-motion
- 11:10User preferences: prefers-contrast
- 15:06Environment: light-level
- 16:17Network conditions: prefers-reduced-data
- 17:38Network conditions: navigator.connection
- 19:33Device: Screen inset
- 20:50Device: Interaction
related talks
36mBeyond responsive design - New CSS media queries
15mResponsive Design vs. Adaptive Design
35mThe New Rules of The Resposnive Web
29mSquishy Pixels
43mResponsive Design, Past, Present and Future
01h 01mThe Evolution of Responsive Web Design: What's Next?
47mConditionally Responsive
43mGetting serious about Responsive Web Design