What is responsive web design? A plain-English guide

Key takeaways

Responsive web design is an approach where one website, at one address, rearranges its layout to suit the width of the screen it is viewed on. It is the standard way to build a business website, and Google recommends it. It is a starting point for a good mobile experience, not proof of one.

• One site, one URL and one set of content for every screen size.
• Three parts: fluid layouts, flexible images and breakpoints set with media queries.
• Without a viewport tag, phones draw the page about 980px wide and shrink it.
• Responsive does not guarantee readable text, usable buttons or fast pages.

What is responsive web design?

Responsive web design is a method of building web pages so that the same HTML adapts its layout to the width of the browser, from a narrow phone to a wide monitor, without a separate mobile site. The term was coined by the designer Ethan Marcotte in 2010 and has been the default approach for well over a decade.

In practice it means columns stack on a phone and sit side by side on a laptop, images shrink to fit their container, and menus collapse when there is no room to show them in full. The visitor always uses the same address, and you maintain one set of pages.

• Why mobile-friendly web design is essential for UK businesses

How does responsive design work?

Responsive design works through three techniques used together. The page layout is defined in proportions instead of fixed pixel widths. Images and video are told never to be wider than the space they sit in. And the stylesheet contains rules, called media queries, that change the layout at chosen widths known as breakpoints.

One line of code makes all of it work on a phone: the viewport meta tag. Google's web.dev guidance notes that without it, mobile browsers render the page at a desktop width, usually about 980 pixels, and then scale it down. That is the tiny, zoomed-out page you sometimes still see on older sites.

• Fluid grid: widths in percentages or flexible units, so columns resize.
• Flexible media: images and video scale down inside their containers.
• Media queries: CSS rules that apply only above or below a set width.
• Viewport tag: tells the phone to use its real width, not a pretend desktop one.

• The viewport meta tag: one line that makes mobile work
• Responsive breakpoints explained for business owners

Why does Google recommend responsive design?

Google recommends responsive design because it is the easiest pattern to implement and maintain. Its mobile-first indexing documentation lists three ways to serve mobile visitors: responsive design, dynamic serving and separate mobile URLs. Only responsive design uses one URL and one set of HTML, which removes the risk of the mobile and desktop versions drifting apart.

That matters because Google indexes the mobile version. With a responsive site, the content Google sees on mobile is the content you wrote. With a separate mobile site, anything left off the mobile version to save space may not be indexed at all.

• Separate mobile site vs responsive design: which is better?
• Mobile-first indexing: what it means for your business

How do you tell if your website is responsive?

Open the site on a laptop and slowly drag the browser window narrower. A responsive site rearranges itself as the window shrinks: columns stack, the menu collapses and images resize. A site that is not responsive keeps its shape and shows a horizontal scrollbar. Then open it on a phone and check that you can read it without zooming.

• Drag the browser window narrow and watch whether the layout changes.
• Open the site on a phone: is the text readable without pinching?
• Rotate the phone: does the layout adjust to landscape?
• Try a tablet or a small laptop: are there awkward in-between widths?
• Scroll sideways: if anything pokes off the screen, something is fixed-width.

• Website scrolls sideways on mobile? Causes and fixes

What does responsive design not guarantee?

Responsive design guarantees that the layout fits. It does not guarantee the site is pleasant or profitable to use on a phone. A responsive page can still have 12px text, buttons too small for a thumb, a 4MB hero image and a phone number that cannot be tapped. Those are design and content decisions, not layout ones.

This is the gap most owners miss when an agency says a site is 'fully responsive'. The claim is usually true and usually beside the point. The useful question is whether a first-time visitor on a phone can find the service, trust it and get in touch within a minute.

• Make your website work properly on mobile
• The mobile readiness scorecard: score your site in an hour

What does responsive design cost?

On a new build, nothing extra: responsive layout is part of any competent website project, and you should not see it as a separate line on a quote. On an old fixed-width site, retrofitting responsive behaviour can cost as much as rebuilding, because every template has to be reworked. Indicative UK ranges are £3,000 to £12,000 for a redesign and £5,000 to £20,000 or more for a rebuild.

If your site is already responsive but weak on phones, the work is smaller: an indicative £500 to £3,000 to fix text sizes, tap targets, forms, images and calls to action on the existing templates. We do not publish a rate card, so treat these as market ranges and ask for a quote against a written list of fixes.

• What it costs to make a website mobile-friendly in the UK

What does this look like in practice?

A pattern we see in professional services: a site rebuilt five years ago and described as responsive in the proposal. On a phone the columns do stack, so the claim holds. But the stacked page is fourteen screens long, the fee table runs off the right-hand edge, and the 'Request a call back' button sits below the fold on every page.

The fix is not a new layout system. It is editing: shorter pages, a table redesigned for a narrow screen and a button moved to where a thumb can reach it. Global Bridge Labs (GBL) treats responsive as the floor and reviews every template on a phone before sign-off.

• See client work
• Website Design & Development for UK businesses

Responsive design checklist

• Confirm the viewport meta tag is present on every template.
• Check the layout at phone, tablet, laptop and wide-screen widths.
• Make sure no element forces sideways scrolling.
• Serve images sized for the screen, not one large file for all.
• Test menus, forms and tables with a thumb, not a mouse.
• Ask your agency which breakpoints the design uses and why.

Next step

If you are not sure whether your site is responsive, or responsive but hard to use, a ten-minute check on three devices will tell you. We can do it with you and list what needs attention in order.