Responsive design

Responsive design is a design approach where a single interface adapts to the size of the screen displaying it, from mobile to desktop computer. Rather than building a separate version for each device, the layout reorganises itself through flexible grids, fluid images and conditional display rules. The same page stays readable at every resolution, with a single base to design and to maintain.

Responsive relies on a fluid layout that readjusts continuously. Adaptive relies on several fixed layouts, designed for specific widths, that the service switches between. Responsive is simpler to maintain and copes better with in-between sizes, whereas adaptive offers finer control over each format at the cost of several versions to keep up to date.

A breakpoint is a screen width at which the layout changes, for instance moving from two columns to a single one. Frameworks offer standard values, but the best breakpoints depend on the content: you place them where the layout stops working visually, not at sizes fixed in advance.

Browser developer tools simulate different screen sizes and serve as a first check. Realistic testing then goes through actual devices: an emulator faithfully reproduces neither touch, nor performance, nor rendering. Online services let you test remotely on a wide pool of devices.

No, and confusing the two is a common mistake. An interface can adapt perfectly to every screen and still be heavy to load, if its images are not optimised or if it draws on too many resources. Responsive deals with adapting the layout; performance deals with weight and display speed. The two are worked on separately, even if they come together in careful design.

Not always. Starting from the smallest screen forces you to prioritise and to get to the essentials, which often serves the result. But the approach is decided case by case: rich content poorly transposed to mobile scatters more than it lightens. What matters is not the method but the result, a readable and comfortable interface on every screen you are targeting.