Website design · 11 Nov 2026 · 7 min read
Responsive web design explained: how it works and how to test it
Responsive web design means one website that rearranges itself to fit any screen. This guide explains the parts, compares it with adaptive design and shows how to test your own pages.
The short answer
Responsive web design is a way of building one website that adjusts its layout to the width of the screen it appears on. It uses flexible grids, images that scale and CSS media queries, together with a viewport setting for phones. Adaptive design instead switches between a few fixed layouts. Google's documentation recommends responsive design.
What is responsive web design?
Responsive web design is an approach in which a single website, with one set of pages and one address for each page, changes its layout to suit the screen that opens it. On a phone the content sits in one column. On a wide monitor the same content may sit in several columns with more space around it. Nothing is duplicated and nobody is redirected to a separate mobile version.
The content stays the same. What changes is the presentation: the number of columns, the size of the text and images, how the menu appears and which elements are shown at full size. A good responsive site feels designed for the screen in your hand, even though it is one site.
The parts that make a site responsive
Responsive behaviour comes from a small number of techniques working together. If one is missing, the page tends to break in a recognisable way.
| Part | What it does | What goes wrong without it |
|---|---|---|
| Flexible grid | Sizes columns and spacing in proportions or flexible units instead of fixed widths | Content runs off the side of narrow screens |
| Flexible media | Lets images and video shrink to fit the space they sit in | One large picture forces sideways scrolling |
| Media queries | CSS rules that apply only at certain widths or conditions, such as stacking columns on a narrow screen | The layout cannot change as the screen changes |
| Viewport setting | A line in the page head that tells phones to match the page width to the screen width | The phone shows a shrunken desktop page |
On the last point, web.dev explains that without the viewport setting mobile browsers draw the page at a typical desktop width and scale it down, which makes text tiny. The usual setting uses a device-width value and an initial scale of one. web.dev also advises against settings that stop visitors zooming, because they harm people who need larger text.
What changes as the screen gets narrower
The same page element is often arranged differently at different widths. This table shows common patterns, which a designer will adjust for your content.
| Element | Wide screen | Narrow screen |
|---|---|---|
| Navigation | Full menu bar | Menu button that opens a list |
| Columns | Side by side | Stacked, one above another |
| Hero area | Text beside a picture | Text above or over a cropped picture |
| Images | Fixed share of the page width | Full width, or hidden if purely decorative |
| Forms | Fields in two columns | One column, large tap areas |
| Data tables | All columns visible | Scrolling inside the table, or rows turned into cards |
| Footer | Several columns | Stacked groups, sometimes collapsed |
Tables are usually the hardest part. A comparison table with many columns cannot simply shrink, so decide early how it should behave on a phone.
What is the difference between responsive and adaptive design?
A responsive layout flows continuously: as the window narrows, the design adjusts smoothly, with changes at chosen widths. An adaptive layout has a handful of fixed layouts, and the site picks the closest one for the device, sometimes by detecting the device on the server. People also use the word adaptive loosely for responsive sites with big jumps between layouts, so ask your developer what they mean before comparing quotes.
| Approach | How it works | Main strength | Main limit |
|---|---|---|---|
| Responsive | Same HTML and address for every device; CSS adjusts the layout | One site to maintain | Layouts need testing across many widths |
| Adaptive | A few fixed layouts chosen by screen width or device detection | Tight control over each layout | More versions to build and keep in step |
| Dynamic serving | Same address, but different HTML sent to different devices | Can tailor content to the device | Relies on device detection that can go wrong |
| Separate mobile site | A different address for mobile visitors | Can be built apart from the desktop site | Two sites to update, redirect and keep consistent |
Google's Search documentation lists responsive design, dynamic serving and separate mobile addresses as supported configurations and recommends responsive design, calling it the easiest pattern to implement and maintain. It also says the mobile version should carry the same content as the desktop version, because Google indexes the mobile one. Treat this as the position at the time of writing and check the current documentation before choosing a different route.
Is a responsive site always the right choice?
For most business websites, yes. Pages that are mostly text, images, forms and calls to action suit it well. Responsive design does not make decisions about your content, though. A phone visitor may be doing something different from a desktop visitor, such as finding an address or tapping a phone number, so the order of content may need to change, and not just the layout.
Some features do not translate at all: a dashboard with a dozen panels, a drag-and-drop tool, or navigation that relies on hovering. These need their own design for small screens. An old template built on fixed widths may also be harder to convert than to replace.
Responsive design says nothing about how many pages the site should have; for that choice see the comparison of a single page website and a multi page website. It also does not tell you what to write. If you are planning the content, start with how to write an about us page, which is often the page whose photo grids and long text break first on a phone.
How do I test whether my site is responsive?
You do not need special software. Work through these checks on your own pages, starting with the most important ones.
- On a desktop browser, drag the window narrower and watch the page. Content should reflow without a horizontal scrollbar and without overlapping.
- Open the browser's developer tools and switch to device mode to view common phone and tablet sizes. It is an approximation and not a real device.
- Open the site on at least one real phone and one tablet, in portrait and landscape.
- Zoom the page in and raise the browser's text size. Text should stay readable and the layout should reflow.
- Complete the tasks that matter: open the menu, fill in the form, play the video, use any chat widget.
- Run Lighthouse from the browser's developer tools. web.dev says it flags a page that has no viewport setting.
- Repeat on the pages with the busiest layouts, such as galleries, tables and long forms.
The guide to a mobile friendly website has a wider checklist of what to look for once the layout itself is working.
Common responsive problems and how they are fixed
| What you see | Likely cause | Usual fix |
|---|---|---|
| The page looks like a shrunken desktop site | No viewport setting | Add the viewport setting to the page head |
| The page scrolls sideways | An image, table or embedded item with a fixed width | Make it flexible, or let a wide table scroll inside its own box |
| Text is tiny | Fixed small sizes, or zoom switched off | Use relative sizes and allow zooming |
| Links are hard to tap | Menu or footer items packed close together | Add space around each link |
| Menu items cannot be reached | Dropdowns that open only on hover | Make them work by tap and by keyboard |
| Words are cut off | Boxes with a fixed height | Let boxes grow with their text |
| A button is covered | A floating widget fixed to the screen corner | Check its position at narrow widths; see the pros and cons in the guide to live chat for websites |
| The page is slow on phones | The same large image sent to every screen | Serve images sized to the screen |
Who does what on a responsive build
A designer plans how each page looks at several widths, a developer builds it and tests it on real devices, and the person who writes the content keeps headlines and captions short enough to wrap well. Owners help most by testing on their own phones and reporting problems with the page address and the device used. Image-heavy pages need extra care, which is why the guide to a portfolio website is worth reading if your pages are mainly galleries.
If your current site fails these tests and the template is hard to fix, Liftup Technologies offers website development that builds layouts for phones, tablets and desktops from the start.
Related guides
- Website development
- How to write an about us page
- Mobile friendly website what it means and how to check
- Web design vs ui design vs ux design
- Types of web hosting explained
- How to choose web hosting types explained
Questions and answers
What is responsive web design?
Responsive web design is a way of building one website that changes its layout to fit the width of the screen. It combines flexible grids, scalable images, CSS media queries and a viewport setting for phones. Visitors on a phone, tablet or desktop all receive the same pages at the same addresses.
What is the difference between responsive and adaptive design?
A responsive layout adjusts continuously as the screen width changes. An adaptive layout offers a few fixed layouts and picks the nearest one for the device. Responsive design means fewer versions to maintain, while adaptive design gives tighter control over each version at the cost of extra build and upkeep.
How do I test whether my site is responsive?
Drag a desktop browser window narrower and watch for sideways scrolling or overlaps, then use the browser's device mode, then check on a real phone and tablet. Zoom in, raise the text size and complete your key tasks, such as using the menu and sending a form. Run Lighthouse to check the viewport setting.
Does Google require a responsive site?
No. Google's documentation recommends responsive design and calls it the easiest pattern to maintain, but it also supports dynamic serving and separate mobile addresses. Whichever you use, the mobile version needs the same content as the desktop version. Check the current documentation for details.
What is a breakpoint?
A breakpoint is a screen width at which the layout changes, written into the CSS as a media query. For example, a page may move from one column to two once the screen is wide enough for two columns to read comfortably. Good breakpoints follow where the content starts to break, not particular device models.
Do I need a separate mobile site or an app?
Usually not. A responsive website serves phones, tablets and desktops from one set of pages. A separate mobile site means two sites to maintain, and an app is a different product with its own build and store process. Start with a responsive site and add an app only if you need something a website cannot do.
Tell us what you are building.
A short call, a written plan and a fixed quote. No obligation.