The problem responsive design solves
A printed page has one size. A web page or app screen may appear on a small phone, a tablet, a laptop or a very wide monitor, in portrait or landscape, sometimes in a window the user has resized. A layout designed for a single width tends to fail elsewhere: text becomes tiny, content spills sideways, or large empty areas appear.
Responsive design addresses this by making the layout adapt to the space available. Rather than creating a separate design per device, the designer defines flexible rules so that one design can reflow sensibly across a range of widths. It is now a standard expectation for web design and an important part of mobile design.
Three core ingredients
The approach is commonly described as having three parts.
Flexible grids. Instead of fixed measurements, column widths and gutters are defined in relative terms, such as percentages or fractions of the available width. A three-column layout may mean three columns each taking about a third of the space, whatever the size of that space.
Flexible media. Images and video scale within their containers so they never exceed the column width. Images may also be cropped differently at different sizes, which makes careful choice of focal points important.
Conditional rules. At certain widths, the layout changes structure. These points are called breakpoints. For example, a layout might show three columns on a wide screen, two on a medium one, and one on a narrow one.
How reflow works
Imagine a hypothetical page with a main article and two side panels.
- Wide screen: the article takes the center, with a panel on each side.
- Medium screen: the article and one panel sit side by side, and the other panel moves below.
- Narrow screen: everything stacks in one column, in an order chosen to make sense for reading.
The content is the same at every size. What changes is arrangement. The order in which items stack is a design decision: the most important content usually comes first, and secondary material follows.
Choosing breakpoints
A tempting approach is to pick breakpoints based on popular devices. Device sizes change constantly, so this tends to age badly. A more durable approach is to let the content decide: widen and narrow your layout gradually and note where it starts to look wrong, such as lines getting too long, columns too cramped or gaps too wide. Place a breakpoint there.
Fewer breakpoints are generally easier to maintain. Many layouts need only a handful, and some modern techniques let columns wrap automatically as space shrinks, reducing the need for explicit breakpoints.
Designing from small to large
Many teams start with the narrow-screen layout and add complexity as space grows. This is often called a mobile-first approach. Its main benefit is discipline: a small screen forces decisions about what matters most. Content and features that survive that filter are usually the important ones. Then, as width increases, the design can add columns, larger images and extra navigation.
It is not the only valid method, but starting with the hardest constraint tends to produce cleaner results than shrinking a complex desktop design.
Readability across widths
Flexible layouts must keep text comfortable at every size.
- Line length. Very long lines are tiring and very short ones choppy. A common rule of thumb is a range of roughly 45 to 75 characters per line, but this varies with the typeface and context. Limiting the maximum width of a text column on large screens helps.
- Type size. Body text should stay comfortably readable on small screens. A fluid type scale can adjust sizes gradually between a minimum and a maximum. Line spacing matters too, since taller lines often help on narrow columns.
- Spacing. Margins and gutters can shrink on small screens but should not vanish.
Touch and navigation
On touch screens, buttons and links need to be large enough and spaced widely enough to tap accurately. Navigation that works as a full menu on a desktop often collapses into a compact control on a phone. Good website navigation keeps the most important destinations easy to reach at every size.
Hover effects do not work on touch devices, so important information should not depend on them. Considering a call to action on a small screen is another test: is it visible, reachable by thumb, and clear?
Images and performance
A large image scaled down on a phone still has to be downloaded. Serving appropriately sized versions helps pages load faster, which relates to image resolution and compression. Decorative images may also be hidden or replaced at small sizes, though important content should remain available.
Testing
- Resize a browser window slowly and watch for awkward transitions.
- Test on real devices when possible, not only simulated ones.
- Check portrait and landscape.
- Zoom text larger, as some users do, to see whether the layout holds.
- Try with a keyboard and assistive technology as part of accessible design.
A responsive layout is never truly finished, because new screen shapes keep appearing. Flexible rules, content-led breakpoints and a clear priority order are what help it keep working.