← All Elements

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

  1. Decide what must stay visible at every size.
  2. Design the smallest screen first.
  3. Test with real content, long words and 200% zoom.
  4. 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.

Elements.
48 elements · 8 families
Filters
DESIGN CONTEXT
What are you trying to do?

Scroll sideways within the map to explore all columns.

Created by Alan Hurt. Activities and notes are stored on your device. Privacy · Usage counts

ELEMENTS FIELD GUIDE