responsive design
/rɪˈspɒnsɪv dɪˈzaɪn/noun
Responsive design is an approach in which a website or web application adapts its layout and controls to the available screen space and device.
Responsive design keeps the registration form usable on phones, tablets and laptops.
Responsive design lets the same website work across different screen sizes. The content stays the same, but elements can change size or position. A navigation menu may sit behind a button on a narrow screen while cards stack vertically. Visitors do not need to scroll sideways or keep zooming in.
How does a page adapt?
The Glossary · In brieffrontendThe frontend is the part of a website or application that users see and operate, such as pages, buttons, forms and interactive screens.Read more uses flexible layouts, relative dimensions and images that scale with the available space. Media queries let browsers apply different styling at particular widths. The points where the layout changes are called breakpoints. These should fit the content: an extra column appears only when there is enough room, for example.
Developers often start with a simple layout for small screens and expand it for larger ones. This is called mobile first. Responsive design can also account for screen orientation and a user's preference for reduced motion.
Usable across screens
Simply shrinking a page rarely produces a usable mobile experience. Text, buttons and input fields must remain readable and usable, while important content retains a logical order. Responsive pages are therefore tested at different widths and with different input methods.
Responsive design supports Glossary · In briefdigital accessibilityDigital accessibility means people with different disabilities can perceive, understand and operate websites, apps and digital documents.Read more, but does not automatically make a site accessible. Keyboard controls, sufficient contrast, clear labels and a logical document structure remain necessary.