Departures
FE-102RSPGate 03

Responsiveness

Boarding

Five breakpoints, min-width everywhere, one context for viewport info.

Responsiveness — Key Takeaways

Five named breakpoints, min-width everywhere, one useViewport() for the whole app.

  1. 01No more pixel-edge bugs
    • No max-width / min-width collisions at 1024px
    • No +1 / -1 offset dance
    • One direction, one source of truth
  2. 02Shared vocabulary
    • "Tablet" means the same thing in Figma and in code
    • Five named stops — xs · sm · md · lg · xl
    • Five prototypes from design, no improvised widths
  3. 03One owner for viewport state
    • One useViewport() — not five competing isMobile answers
    • UA sniffs and ad-hoc useMediaQuery calls retired
    • Pick a breakpoint, use the context, done
  4. 04Right product per device
    • Mobile fetches less (e.g. MAX_PAGES.MOBILE = 5)
    • Desktop uses the room it has (DESKTOP = 10)
    • Not a desktop layout squeezed onto a phone

Less guessing, fewer bugs, and a product that actually behaves the same across devices — because design and code finally describe the same world.

Jira

External sources