The promise of Utopia
One way to ensure our designs feel at home on more devices is to add more breakpoints, enabling more nuanced design tweaks at more screen sizes. This comes with the cost of a more laborious design process, more mockup generation, more code, and more documentation.
Another way is to lean into the fluidity of the medium, recognising this perceived limitation as the advantage it truly is. Instead of tightening our grip by loading up on breakpoints, we can let go, relinquishing some of that control and allowing the medium to share the load. We can embrace the ebb and flow with a more fluid and systematic approach to our design foundations.
-
Design and develop rapidly
Use a handful of related rules, building the system, not every permutation of its contents at arbitrary breakpoints. -
Create bespoke constraints for your projects
Ensure consistent and harmonious designs with streamlined communication and collaboration between design and development. -
Visualise the invisible
Componentise responsive space, codifying its implementation and behaviour. -
Swap jarring breakpoint jumps for buttery-smooth interpolation
Programmatically tailored type and space scales for every screen size.
Thinking this way encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.
James G – Digital Designer
Fluid type scales
An example
| Scale step | @min (320px) | @max (1140px) |
|---|---|---|
| 5 | 52.25 | 73.24 |
| 4 | 43.55 | 58.59 |
| 3 | 36.29 | 46.88 |
| 2 | 30.24 | 37.50 |
| 1 | 25.20 | 30.00 |
| 0 | 21.00 | 24.00 |
| -1 | 17.50 | 19.20 |
| -2 | 14.58 | 15.36 |