Responsive Design
Responsive web design is an approach in which layouts, media, and interaction adapt flexibly to available screen space and device characteristics. Its foundations include a flexible grid, scalable media, CSS media queries, and a correctly configured viewport. Breakpoints should respond to content rather than individual device models alone.
Responsive does not merely mean stacking desktop columns. Navigation, type sizes, spacing, forms, tables, images, and controls must remain understandable and usable at different sizes. Mobile first can help prioritise content but is not an end in itself. Testing should cover relevant displays, touch and keyboard input, and realistic network conditions.
- Flexible layouts rather than fixed device versions
- Set breakpoints according to content
- Scale images and media appropriately
- Test touch, keyboard, and readability
- Check under realistic network conditions
Frequently asked questions
Responsive web design adapts a website layout and interaction flexibly to different screen sizes and device characteristics.
Yes. A mobile-friendly and technically accessible site supports users and crawling, although responsive design alone does not guarantee rankings.
