tag · also a term
responsive web design
LukeW's layout patterns, the five ways a page reflows as the viewport narrows.
6 terms across 1 category · all tags
Responsive web design is also a term in its own right. Its page carries the definition, a demo, and these same members grouped by how they relate to it.
layout
- Column drop
A responsive pattern where full height columns peel off one at a time and stack below as the viewport narrows, keeping source order.
- Fluid hybrid
A mail layout that reflows with no media query at all: percentage widths held in by max-width, with fixed-width ghost tables that only Outlook can see.
- Layout shifter
A responsive pattern where the arrangement genuinely differs per breakpoint rather than reflowing, so each size gets its own composition.
- Mostly fluid
A responsive pattern where a multi column grid stretches with the viewport up to a maximum width, then centres, stacking only on the smallest screens.
- Off canvas
Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content.
- Tiny tweaks
The lightest responsive pattern: a single column design that only adjusts type size, image size and margins as the screen changes.