Responsive design is a way of building a website so that a single set of pages adjusts its layout to whatever screen it is viewed on, from a small phone to a wide desktop monitor. The content and the address stay the same; only the arrangement changes.
How responsive design works
Three ingredients do most of the work. The first is a viewport meta tag in the page head, which tells a phone’s browser to render the page at the device’s real width instead of pretending to be a desktop screen and shrinking everything. Without it, even a well-built layout appears as a tiny zoomed-out page.
The second is a flexible grid. Columns are sized in percentages or fractions rather than fixed pixels, so a three-column row of services can become one column on a phone. The third is CSS media queries: rules that apply only when the screen is above or below a certain width. Each width where the layout changes is called a breakpoint, for example where a horizontal menu collapses into a menu button.
Images need the same care. Responsive image markup (the srcset and sizes attributes) lets the browser pick a smaller file for a phone and a larger one for a desktop, so a mobile visitor on a weak signal is not downloading a 2,000-pixel hero photo. Text sizes, spacing and tap targets are also scaled so that buttons are easy to press with a thumb.
The older alternatives were a separate mobile site on an m. subdomain or serving different HTML depending on the device. Both still exist, but they double the maintenance and create duplicate URLs to manage. Google recommends responsive design as the simplest pattern to get right.
Why it matters
Google crawls and indexes the web with a smartphone crawler, so the mobile version of your page is the version that gets assessed and ranked. This is mobile-first indexing. If text, links, structured data or images are missing from your phone layout, Google treats them as missing from the page.
The commercial case is just as direct. Think of a plumber in Croydon whose customers search with a leak dripping on the kitchen floor: they are on a phone, in a hurry, and they will press the first call button they can find. If the phone number is hidden behind a menu, the form fields are too small to fill in, or the page jumps about as adverts and images load, that enquiry goes to a competitor. Layout jumps also show up in Cumulative Layout Shift, one of the Core Web Vitals.
There is an accessibility angle too. People who zoom text to 200%, or who hold a phone in landscape, rely on the same flexible layouts. Building to the WCAG accessibility guidelines and building responsively tend to fix the same problems, and the Equality Act 2010 expects UK service providers to make reasonable adjustments for disabled customers.
Common mistakes
- Hiding content on mobile to save space. Collapsed accordions are fine; removing sections from the phone layout entirely removes them from what Google indexes.
- Testing only in a desktop browser window. Dragging a browser narrower is a rough check. Real phones show problems with fonts, tap targets, pop-ups and the on-screen keyboard covering form fields.
- Full-screen pop-ups on arrival. On a phone they cover the whole page, frustrate visitors and can count against the page in Google’s assessment of the page experience.
- Tiny tap targets. Links and buttons squeezed together cause mis-taps. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA, and larger is kinder.
- Serving desktop-sized images to phones. The layout responds, but the page is still slow because the files never shrank.
- Horizontal scrolling. A fixed-width table, embedded map or long URL that pushes the page sideways is one of the most common faults I find.
How to act on it
Open your five most important pages on an actual phone, ideally an older mid-range Android as well as an iPhone, and try to do the main job each page exists for: call, book, buy or send an enquiry. Note anything that is hard to read, hard to tap or missing. Then run the same pages through Lighthouse in Chrome’s developer tools, which flags a missing viewport tag, oversized images and layout shift alongside speed.
Check the Core Web Vitals report in Search Console for mobile-specific problems, because it uses data from real visitors. If the faults run through the theme itself, patching individual pages rarely works; a rebuild of the templates usually costs less in the long run. That is the kind of decision I help with in a website redesign, where the mobile layout is designed first and the desktop layout grows from it.