Conditions, not devices
Responsive work is broader than desktop, tablet, and mobile. Interfaces respond to available width, text size, language, input method, motion preference, network quality, and content length.
Figure 01
Priority across widths
The composition changes, but the dominant content and reading order remain intact.
Source
Proteus study
Reflow before removal
Give content a new arrangement before hiding it. Stacking, wrapping, scrolling, and disclosure can preserve access while adapting the field.
Test the awkward middle
Many layouts are polished at large and small extremes but fail between them. Resize slowly. Add long labels. Increase text to 200%. Rotate the screen. Responsive quality lives in these transitions.
Exercise 01
What should compress first?
Reveal the observation +
Outer field space usually compresses before internal grouping. Preserve the intervals that communicate component relationships for as long as possible.
Chapter summary
Keep these
ideas close.
- 01Responsive systems adapt to conditions, not device names.
- 02Preserve priority and access before preserving geometry.
- 03Breakpoints emerge where relationships fail.
Related topics
Keep exploring
References
Books
Responsive Web Design
Ethan Marcotte · The foundational articulation of fluid web design.
Every Layout
Heydon Pickering & Andy Bell · Intrinsic layout patterns with clear reasoning.
Web & practice
web.dev Responsive Design
Modern browser capabilities and implementation guidance.
Utopia
Fluid type and spacing systems between fixed breakpoints.
Field exercise
Test one page at every width from 320 to 1440 pixels and record the first relationship that fails.