Responsive web design adapts a website’s layout and content to different screen sizes, orientations and input methods. The goal is to preserve readability and task completion—not simply to shrink a desktop page.
Key Techniques #
- Fluid grids: use flexible widths and layout systems instead of fixed page dimensions.
- Flexible images: prevent media from overflowing its container and serve appropriately sized assets.
- Breakpoints: adjust layout when content needs it, not only for named devices.
- Responsive typography: maintain readable text and sensible line lengths.
- Touch-friendly controls: provide adequate spacing and target sizes.
Mobile-First Design #
Begin with the essential content and actions for small screens, then enhance the layout for larger screens. This encourages prioritisation and helps prevent mobile users from losing access to key features.
Testing #
Test common viewport widths, portrait and landscape orientation, real devices where possible, keyboard navigation, zoom, forms, menus and performance on slower connections. Emulators are useful but do not replace all real-device checks.
Common Mistakes #
Avoid hiding essential content on mobile, using fixed-width elements, relying on hover-only controls, allowing horizontal scrolling unintentionally or loading oversized images everywhere.
Example #
A three-column service grid can become a single-column list on narrow screens. The primary enquiry button remains visible, the form fields fit the viewport and the text remains readable without horizontal scrolling.
Related Topics #
See User Experience (UX) Principles and Website Speed and Performance.
