Shape
Responsive Layout
Adapting a layout to different screen sizes and zoom levels, using real content.
What is Responsive Layout?
Adapting a layout to different screen sizes and zoom levels, using real content.
What you learn
As space shrinks, keep what matters visible and usable.
When it helps
a design breaks on small screens, or zoom and long text hide important controls.
Use it at work
- Decide what must stay visible at every size.
- Design the smallest screen first.
- Test with real content, long words and 200% zoom.
- Make sure key actions stay on screen and reachable.
Your output
View your main screens at phone width and at 200% zoom. Check that the main action stays visible and usable.
Watch for
Letting important controls shrink, hide or fall far down the page.
Related practices
Sources
Enable JavaScript to try the interactive activity.