By the end of this lesson you can
- Wireframe a screen for small, medium and large widths.
- Decide how content stacks, reflows and changes between sizes.
- Annotate responsive behaviour for developers.
The idea
Most products are used on many screen sizes. Responsive wireframes show how a screen adapts, so the team decides behaviour deliberately instead of leaving it to chance.
Common responsive behaviours
- Stack: columns side by side on wide screens stack vertically on narrow ones, in priority order.
- Reflow: a grid of cards changes from four per row to two to one.
- Reveal or collapse: secondary content moves into an accordion, tab or "more" link on small screens.
- Reposition: navigation moves from a top bar to a bottom tab bar or menu.
- Resize: images and text scale within limits.
Start with the smallest
Wireframing the small screen first forces prioritisation, because there is only room for what matters. Then expand: what gets more space, what moves alongside, what new elements become useful on large screens?
Annotate breakpoints
Note the widths where layout changes, and describe the behaviour: "Filters move into a slide-up panel below 768px." Developers need this as much as the drawings.
Why it matters in real projects
A layout designed only for desktop usually fails on mobile, where many people now do most of their browsing. Thinking through responsive behaviour at the wireframe stage is cheap; fixing it after visual design or development is expensive. Clear annotations also prevent developers having to guess.
A realistic example
An online course platform's lesson page has video, a lesson list sidebar, notes and comments. The designer wireframes three widths.
On a phone, the video comes first, then the lesson title and a "Next lesson" button; the lesson list collapses into a drop-down and notes move into a tab. On a tablet, the lesson list becomes a slide-out panel. On desktop, the list sits in a sidebar and notes appear beside the video. Annotations describe each change, and the developer builds it without questions.
Step by step
Write a priority list
Rank content for the screen.
Wireframe small first
Stack content in priority order on a narrow frame.
Expand to medium
Decide what moves side by side and what gains space.
Expand to large
Use extra space for secondary content, not just bigger margins.
Mark behaviours
Label stack, reflow, collapse and reposition changes.
Annotate breakpoints
Write widths and behaviour notes for developers.
Common mistakes
Mistake Hiding important content on mobile.
Instead Reorder or collapse, but keep everything essential available.
Mistake Choosing breakpoints by device names.
Instead Choose them where the content starts to break.
Mistake Only showing static frames.
Instead Annotate how and why content changes.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Three-width wireframe
Wireframe a restaurant menu and ordering page at phone, tablet and desktop widths.
Steps
- Write a priority list.
- Wireframe the phone version first.
- Wireframe tablet and desktop versions.
- Annotate behaviours and breakpoints.
Deliverable
Three annotated wireframes.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Responsive wireframes decide how layouts adapt.
- Common behaviours: stack, reflow, collapse, reposition, resize.
- Start small and expand.
- Annotate breakpoints based on content.
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.