Responsive web design is a way of building websites so that one set of pages adapts to any screen, from a small phone to a wide desktop monitor. The layout, images and text resize and rearrange themselves to fit the space available, so visitors never have to pinch, zoom or scroll sideways. It rests on three features: a fluid grid that sizes the layout in proportions, flexible images that scale within their containers, and media queries that change the layout at set screen widths.
The term was coined by the designer Ethan Marcotte in 2010, and those three features are still the foundation. Here’s what each one does, how responsive compares with adaptive design and how to check your own site.
Why responsive design matters for your business
For many businesses, most visits now come from phones, and Google indexes the mobile version of your site to decide how it ranks. A site that works beautifully on a laptop and awkwardly on a phone is, for most of your visitors and for Google, an awkward site.
To keep this concrete, follow a hypothetical example. Say you run a recruitment agency in Kingston. Candidates mostly browse your job listings on their phones, often on the train. Clients reviewing your services are more likely to be at a desk. One website has to work for both, and it has to be easy for your team to update every day. That’s exactly what responsive design is for.
What are the 3 main features of a responsive website?
1. A fluid grid
A fluid grid sizes the layout in proportions instead of fixed pixel widths. A column might take up a third of the screen on a desktop and the full width on a phone, rather than being fixed at 400 pixels and spilling off the edge.
On the recruitment site, the job listings page might show three columns of job cards on a desktop, two on a tablet and one on a phone. The cards are the same; the grid decides how many fit side by side. Modern CSS layout tools, Flexbox and Grid, make this far simpler than it was when the idea first appeared.
2. Flexible images and media
Flexible images scale down to fit their container and never overflow it. In its simplest form, that’s one line of CSS: `max-width: 100%`.
Good responsive sites go further and serve different image files to different screens, using the `srcset` attribute and modern formats such as WebP or AVIF. A phone gets a smaller, lighter file than a large desktop monitor, which makes a real difference to load times on mobile data. Video embeds and maps need the same treatment, or they’ll break the layout on small screens.
3. Media queries
Media queries are CSS rules that apply only when certain conditions are true, most often when the screen is narrower or wider than a set width. These widths are called breakpoints. Below 768 pixels, for example, the recruitment site’s navigation might collapse into a menu button and the search filters might move into a panel that slides open.
Media queries can respond to more than width. They can detect whether someone prefers dark mode, has asked their device to reduce motion, or is using a touchscreen. Newer container queries let a component respond to the space it sits in rather than the whole screen, so a job card can rearrange itself whether it appears in a wide main column or a narrow sidebar.
A responsive site is one website that fits every screen, which also means one site to update, one address to share and one set of pages for Google to rank.
Responsive design in practice
The three features are the mechanics. A few principles make the difference between a site that technically resizes and one that’s pleasant to use:
- Plan content first. Decide what matters most on each page, so the phone layout shows it first instead of burying it under a hero image.
- Design with real content in the browser. Static mock-ups at three sizes miss the awkward widths in between. Prototypes built in code show how the page really behaves.
- Use a component library. A consistent set of buttons, cards and forms that already work at every size keeps the site consistent as it grows.
- Design for touch. Buttons and links need to be big enough to tap with a thumb. Our guide to tap targets covers the sizes WCAG requires.
- Keep it fast. Responsive images help, but so does keeping scripts, fonts and plugins to what the page actually uses.
What is the difference between adaptive and responsive design?
Responsive design uses one flexible layout that adjusts continuously to any screen width. Adaptive design uses several fixed layouts, typically one per device size, and serves whichever is the closest match.
You can usually tell them apart by dragging the corner of your browser window. On a responsive site, the content reflows smoothly as the window changes size. On an adaptive site, nothing changes until the window passes a set width, then the whole layout jumps to the next version.
Adaptive design gives tight control over each layout, which can suit complex applications. The drawback is maintenance: every layout has to be designed, built and updated separately, and screen sizes keep changing. For most business websites, responsive design is simpler to maintain and is the approach Google recommends.
How do I test if my website is responsive?
Start with the quick checks, then test on real devices:
- Resize your browser window slowly from wide to narrow. Text should stay readable, nothing should overlap, and there should be no sideways scrolling at any width.
- Use your browser’s device mode. In Chrome, open Developer Tools and switch on the device toolbar to preview common phone and tablet sizes.
- Run PageSpeed Insights on your key pages. It reports mobile performance and accessibility problems, including small tap targets.
- Test on real phones, ideally an older Android as well as a recent iPhone. Try filling in your contact form with one thumb.
Google’s standalone Mobile-Friendly Test was retired in 2023, so if an old article tells you to use it, use Lighthouse or PageSpeed Insights instead.
How we build responsive websites
Every site we design is responsive, built mobile first by our in-house team and tested on real devices before launch. We plan layouts around the content and the people using them, so a candidate on a train and a client at a desk both get a page that works. If your site struggles on phones, you can see how we approach responsive web design in London, or read why we start with mobile-first design.
FAQs
What is a responsive website?
A responsive website is one that automatically adjusts its layout, images and text to fit the screen it’s viewed on, whether that’s a phone, tablet, laptop or large monitor. It uses one set of pages and one address for every device, so visitors never need to zoom or scroll sideways to read it.
Is responsive design good for SEO?
Yes. Google indexes the mobile version of websites and recommends responsive design because it serves the same content at the same address to every device. That makes the site simpler for Google to crawl and avoids the duplicate content and redirect problems that separate mobile sites can cause.
What is the difference between responsive and mobile-first design?
Responsive design describes how a site adapts to any screen size. Mobile-first is a way of designing and building that site: you start with the smallest screen and add layout and features as space allows. Most good responsive sites today are built mobile first.
Do I need a separate mobile website?
No. Separate mobile sites, often on an “m.” subdomain, were common before responsive design became standard, but they mean maintaining two sites. A well-built responsive site gives mobile visitors a good experience from one set of pages.
