By the end of this lesson you can
- Explain the difference between responsive and adaptive design.
- Build frames that stretch using auto layout, min and max widths, and wrap.
- Design the key breakpoints a product needs and show how layouts change between them.
The idea
Responsive layouts flow continuously: columns stretch, text wraps and items reflow as the screen width changes. Adaptive layouts switch between a set of fixed designs at specific widths. Most real products combine the two, with fluid layouts that also change structure at a few breakpoints.
Tools in a design file
- Auto layout with fill container lets content stretch with its parent.
- Min and max width stop elements from becoming too narrow or too wide. A paragraph capped at about 70 characters per line stays readable.
- Wrap lets cards move onto a new row when space runs out.
- Layout grids per breakpoint show columns, gutters and margins.
What to design
You do not need every width. Design the smallest supported width, a common phone, a tablet and a desktop width, and test the in-between widths by dragging the frame. Note structural changes, such as a sidebar becoming a bottom bar, with annotations.
Why it matters in real projects
People use products on phones, tablets, laptops and large monitors, often switching mid-task. A design that only works at one width forces developers to guess, and the guesses usually produce cramped or stretched layouts. Building resizable frames shows the real behaviour and catches problems before they are coded.
A realistic example
A recipe site's desktop design has three columns of cards and a filter sidebar. The designer builds the card grid as a wrapping auto layout with cards at a minimum of 260px, and caps the article text at 680px.
Dragging the frame narrower, the grid drops to two columns, then one. At tablet width, the sidebar becomes a "Filters" button that opens a sheet, shown as a separate frame with an annotation. Developers receive a clear picture of both the fluid and the adaptive behaviour.
Step by step
Choose breakpoints
Pick three or four widths based on your users' devices and content.
Set up grids
Create a layout grid style for each breakpoint.
Build fluid sections
Use auto layout, fill container and wrap for main sections.
Add limits
Set min and max widths on cards and text blocks.
Drag-test
Resize the frame slowly and note where it breaks.
Design structural changes
Where layout must change, design the variant and annotate the breakpoint.
Common mistakes
Mistake Designing desktop only and hoping it shrinks.
Instead Start with or include the smallest width early.
Mistake Lines of text stretching across wide screens.
Instead Set a max width for reading content.
Mistake Leaving behaviour between breakpoints undefined.
Instead Drag-test and annotate how items stretch or wrap.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Responsive product listing
Design a product listing page that works from 360px to 1440px wide.
Steps
- Set up grid styles for three breakpoints.
- Build the card grid with wrap and minimum widths.
- Design how filters change on small screens.
- Capture screenshots at four widths and annotate changes.
Deliverable
A resizable layout with annotated screenshots at four widths.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Responsive flows; adaptive switches; most products do both.
- Auto layout, min and max widths, and wrap build fluid frames.
- Design a few key breakpoints and drag-test between them.
- Annotate behaviour for developers.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Responsive web design basics (opens in a new tab)web.dev
- Mobile first is not mobile only (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.