Content updated and sources checked on 19 October 2026. The original publication date has been retained.
A website is not properly responsive just because its columns stack vertically. Text must remain readable, forms must work and important information must not disappear. Responsive web design is about being able to complete the same task on a small screen and a large one.
1. Use one content foundation
Responsive design uses the same HTML and URL while adapting the presentation to the screen. Google recommends this approach because it is relatively easy to implement and maintain.[6] Check not just how the page looks, but also whether service information, prices and conditions remain available everywhere.
2. Understand mobile-first indexing
Google uses the mobile version of content for indexing and ranking.[6] That does not mean a responsive website automatically ranks higher. It does mean that a stripped-down mobile version can lack important information. Do not put main content behind an interaction that first has to fetch new text: Google does not perform that user action.[6]
3. Let the content determine the breakpoints
Reduce the window size until a menu, heading or card no longer works comfortably. Adjust the layout there. Use flexible columns and constrained text widths instead of creating a separate design for every device. Long Dutch words, error messages and large browser text belong in the test, not just short sample copy.
4. Check reflow and zoom
For vertically scrolling content, WCAG 2.2 describes reflow at a width of 320 CSS pixels without losing information or functionality and without scrolling in two directions. There are exceptions for content that needs a two-dimensional layout, such as certain tables.[7] Test a zoomed-in desktop view as well, rather than only a phone preset.
5. Give images room without stretching the page
Check that images stay within their column and important details remain understandable. Supply suitable image sizes and test whether the mobile browser downloads an unnecessarily large file. Use real text for essential explanations; an image with small lettering does not automatically become readable on a phone. Give informative images a descriptive text alternative.
6. Test the task, not just the screenshot
Go through an enquiry on a narrow screen: open the menu, choose a service, fill in the form incorrectly and correct the error. Then check keyboard operation and visible focus. A fixed button must not cover a field or important text. Test a long article, an empty search and a content-heavy page too.
7. Going further: document regression tests
Keep a fixed checklist for each important page type on small mobile, large mobile, tablet and desktop. Add a test with enlarged text and a slow connection. Repeat these checks after a template change. This makes responsiveness a maintenance task rather than a one-off tick at handover.
Responsive and mobile-first: what is the difference?
Responsive describes how the design adapts; mobile-first describes where you start the design and build process. You can combine both. Want to improve your current website? Explore our web design approach or discuss the issues.
Having a new responsive website built? Also see how much a website costs in the Netherlands and what belongs in a good quote.
