How do you define responsive layouts and grids?
Adapt arrangements to available width while preserving content order and the main task.
A responsive layout adapts one page to the available space. Content placed side by side in a wide window may stack in a narrow one. It responds to browser width rather than merely supplying a separate phone drawing.
Keep these basics in mind
- A container holds content. A grid uses columns and gaps to support alignment and space allocation.
- The viewport is the browser area displaying a page, not necessarily the device’s entire screen.
- A breakpoint is a condition for changing layout, such as switching to one column when content becomes cramped.
- Preserve a sensible reading and action order so the main task remains possible in narrow windows.
The RISD visual communication handout explains how grids organise areas and why screen work needs browser checks. RISD means Rhode Island School of Design. See the USWDS grid guide for web layout and responsive conditions.
Decide on a layout
Illustrative layout changes
This is a hypothetical website. Breakpoints depend on actual content.
| Content | Wide-window example | Narrow-window example |
|---|---|---|
| Service explanation and image | Side by side | Stacked in reading order |
| Two columns of fields | On the same row | One field per row |
| Main action | Near related content | Still easy to find and unobstructed |
Walk through an example
A booking page places instructions and a form side by side in a wide window. The team narrows the browser until they become cramped, switches them to a vertical arrangement, and records that condition. After implementation, they also inspect intermediate widths to ensure buttons do not overflow the page.
Limits and common misunderstandings
A 12-column grid is one tool, not a requirement for every website. Two fixed screenshots are insufficient: users resize windows, enlarge content, and provide different text lengths. Shrinking everything is not a complete responsive solution.