Guide · Layout
Responsive design basics
Responsive design is the practice of making a product work across screen sizes, from a phone to a wide monitor, rather than designing a single fixed layout. It is a baseline expectation now, and deciding how a layout reflows is a design decision as much as an engineering one.
Last updated
Breakpoints and fluid layouts
A breakpoint is a screen width at which the layout changes — a sidebar collapses, a grid drops from three columns to one. Between breakpoints, fluid layouts and relative units let content stretch and shrink smoothly rather than jumping.
The goal is a layout that stays usable at every width, not just at the two or three sizes a designer happened to draw.
Mobile-first thinking
Mobile-first means designing the smallest screen first and adding for larger ones, rather than cramming a desktop layout onto a phone. It forces a clear content priority, because the small screen has no room for anything that is not essential.
What survives on mobile is usually what matters most, which is why starting small tends to produce a stronger design at every size.
What changes across sizes
Navigation collapses into a menu, multi-column layouts stack, dense tables become cards, and touch targets grow. Deciding these transitions is design work, not something to leave to whatever the build happens to do.
Koryvant generates screens with responsive intent and carries the layout behaviour into its stack-agnostic handoff specs, so engineering builds the reflow that was designed rather than inventing one.
Try it on your own idea
Describe your product to Koryvant and get a complete clickable prototype — every screen, every state, both themes — free to generate and preview.
Questions
- What is a breakpoint?
- A breakpoint is a screen width at which the layout changes — for example, a sidebar collapsing or a grid dropping to a single column on narrow screens.
- Why design mobile-first?
- Starting from the smallest screen forces a clear content priority and usually yields a stronger design at every size, rather than squeezing a desktop layout onto a phone.
- Does Koryvant handle responsive layout?
- Koryvant generates screens with responsive intent and carries the layout behaviour into its stack-agnostic handoff specs, so the reflow is designed rather than improvised.
Keep reading: Prototype vs MVP: what each one is for or No-code vs prototype: which do you need?. Browse all guides, or see Koryvant by product type.