Adapting the layout to available space
Responsive design combines flexible layouts, suitable image behaviour and changes in presentation when space becomes constrained. A row of service cards may become a single column, while a large navigation menu needs controls that work on a narrow screen and with touch.
Breakpoints should respond to the content’s needs, not just a list of popular phone models. MDN’s responsive design guide explains how flexible grids, media queries and responsive media support this approach.
Example: a full-width homepage image
A desktop hero can combine a readable text column with artwork extending to the edge of the viewport. On a phone, the same artwork may need a different crop or its own position below the heading. Simply reducing the entire desktop composition can make both the text and the visual difficult to understand.
Define the container width, image focal point and overflow behaviour deliberately. Test intermediate browser widths as well as the smallest and largest examples. A blank strip or horizontal scrollbar can come from a mismatch between the image container and the viewport.
Check complete tasks on each layout
- Open and close navigation with touch and a keyboard.
- Read the page with enlarged text and confirm that controls remain reachable.
- Complete forms, including validation messages and confirmation states.
- Check tables, long URLs, images and embedded content for overflow.
- Verify that sticky elements do not cover the main action.
W3C’s reflow guidance addresses access to content when the viewing area narrows or content is enlarged. Responsiveness is therefore more than an attractive screenshot: the usable reading order and interaction must survive the layout change.
Common questions about responsive design
Does responsive design require a separate mobile website?
Usually it can use the same content and URLs with a layout that adapts. The design still needs deliberate mobile behaviour rather than relying on automatic shrinking.
Can responsive layouts include 3D graphics?
Yes. Plan a suitable fallback, sensible image cropping and motion controls, and check that the visual layer leaves navigation, text and enquiry actions usable.
Related definitions
- CSS — Cascading Style Sheets: rules that control the presentation of a web page, including its typography, spacing, colours and responsive layout.
- Accessibility — Designing content and controls so people with different abilities can use them, including through a keyboard, screen reader, enlarged text or reduced motion.
- UI design — User interface design: the visual and interactive controls through which someone uses a digital product, including components, states and responsive behaviour.
- Core Web Vitals — A set of user experience measures covering loading, responsiveness and visual stability. The current metrics are Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.
Related SEO guides
A responsive layout should preserve useful content, navigation and controls across screen sizes.
For help connecting these decisions with your website, explore our SEO services or start with an SEO audit.
Put it into practice
Explore our web design service or talk with Refined IT about applying this to your website or business systems.