←  All terms
R
Frontend & Web Development

Responsive Design

Responsive design adapts layout and interaction to different screen sizes and input methods.

Responsive design ensures that content and interface elements remain usable and visually coherent across different screen sizes, devices, and input methods. Flexible layouts, relative sizing, breakpoints, and adaptive media help interfaces respond to changing viewport conditions without sacrificing clarity or performance. The concept is closely related to Mobile First and CSS.

Read more

Mobile First

CSS

Web Accessibility

FAQ

Responsive Design

How are responsive design and accessibility connected?
The two overlap: a responsive layout has to stay usable under zoom and larger text. When text is enlarged, no content should be cut off and no two-dimensional scrolling should be required. Responsive implementation does not replace accessibility, but it supports requirements such as reflow.
What mistakes commonly occur in responsive design?
Typical issues are tap targets that are too small, horizontal scrolling caused by fixed widths, images that do not scale, and navigation that works only on hover. Layouts are often checked merely by shrinking the browser window. Testing on real devices and with touch input reveals considerably more.
How many breakpoints does a responsive design need?
There is no fixed number. Breakpoints belong where the layout breaks, not at individual device models. A few well-chosen steps are often enough, and fluid sizing plus flexible grids reduce the need further. Every additional breakpoint adds testing and maintenance effort.
How does responsive design relate to mobile first?
Responsive design is the goal; mobile first is one way to reach it. Responsive design lets a layout adapt to any screen size. Mobile first starts at the smallest viewport and adds rules for larger ones. A responsive layout can also be built desktop-first, usually with more overrides in the CSS.