What is responsive web design?
Responsive web design is a single website built to reshape itself to whatever screen it is opened on, rather than a desktop site plus a separate mobile one. The same pages, the same address and the same content rearrange themselves for a phone, a tablet or a wide monitor, using a flexible grid and a handful of set widths where the layout changes.
The quickest test is your own phone: if you have to pinch and zoom to read the page, the site is not responsive.
- One address for every device: the same URL serves the phone and the desktop, so there is no second site to keep in step
- A flexible grid: columns stack rather than shrink, which keeps text at a readable size without zooming
- Breakpoints: the layout rearranges at a few chosen widths instead of being redrawn for every device
- Images that scale: pictures fit their container rather than pushing the page sideways
- Touch-sized targets: buttons and links built for a thumb, not a mouse pointer
- Where to go next: the business case, the effect on conversion rate, and the SEO side
One set of pages, not two websites
Almost every site built in the last decade claims to be responsive, so the word has stopped carrying much weight in a sales conversation. It is still worth being precise about what it describes, because the thing it replaced is not extinct.
Responsive means one set of pages, at one address, that rearranges itself for whatever screen it lands on. The older approach was a second site on a separate mobile subdomain, maintained in parallel and served to phones by detecting the browser. Where that arrangement survives today it is normally because removing it was never budgeted for.
The difference that matters is maintenance, not appearance. On one responsive site a change to a price, a phone number or a form field happens once. On two sites it happens twice, and the second one is the copy that gets forgotten.
That is also why the decision sits alongside the other early question about a build: whether you are starting from a custom design or a template. Both routes produce a responsive site now. They differ in what happens when your content stops fitting the pattern.
What actually makes a layout responsive
Underneath the marketing word there are five mechanisms, and a page needs all of them. Having four is the normal state of a site that technically passes a mobile test and still loses visitors.
| Building block | What it does | What a visitor sees without it |
|---|---|---|
| A fluid grid | Columns are sized as proportions of the screen rather than in fixed pixels, so they stack instead of shrinking. | Text that shrinks to unreadable rather than reflowing, or a layout that runs off the right-hand edge. |
| Breakpoints | A handful of chosen widths where the layout rearranges, rather than a separate design per device. | A page that looks right on the designer's laptop and falls apart on a tablet held sideways. |
| Flexible media | Images, video and embeds are capped to the width of the container they sit in. | One wide image pushing the entire page sideways, so every page scrolls horizontally. |
| Touch-sized targets | Buttons and links sized for a thumb, with space between them. | Mis-taps on menus and form fields, and a visitor who gives up before the form is finished. |
| The viewport declaration | One line in the page head telling a phone to use its real width instead of pretending to be a desktop. | A full desktop layout scaled down to fit the screen, legible only by pinching and zooming. |
The last one is worth knowing about because it is a single line of code and it undoes the other four when it is absent. A site can be built entirely on a fluid grid and still arrive on a phone as a shrunken desktop page.
How to tell whether your own site is genuinely responsive
This takes about three minutes on a real phone, and it is more reliable than any automated report. Two rules before you start: use a real device rather than a desktop browser window dragged narrow, and test the pages you sell from rather than the home page.
Home pages get the design attention. Service pages, article pages and the contact page get whatever was left.
- Rotate the phone. Landscape is where fixed heights and sticky headers usually fail, and almost nobody checks it.
- Fill the form, do not just look at it. Check that the on-screen keyboard does not cover the field you are typing into and that the submit button can still be reached.
- Turn the text size up. Set the browser or system text size to around 200%, which is a setting a large number of visitors already have switched on permanently.
- Find the widest thing you publish. Usually a table, a pricing grid or an embedded map. It should scroll inside its own box rather than making the whole page slide sideways.
- Try your longest real content. The customer name with no spaces in it, the product with a 60-character title, the category with one item in it.
If any of those five produce something you would not want a buyer to see, the fix is usually specific and small rather than a rebuild. The same practical checks sit behind several of the questions on our buyer questions page.
Passing an automated check is not the same as working
Automated mobile testing looks at a page in isolation, at a set of standard widths, with the content that happened to be on it that day. It is a useful screen and a poor guarantee.
| The check says | What can still be true |
|---|---|
| The page is mobile-friendly | The submit button on the enquiry form sits under the phone keyboard, so the form is filled in and never sent. |
| Text is readable without zooming | The body text is fine and the comparison table beside it is clipped at the edge of the screen. |
| Tap targets are sized correctly | Two of them sit underneath a sticky banner that only appears on phones. |
| The viewport is configured correctly | One embedded map or video ignores its container and forces the page to scroll sideways. |
| No horizontal scrolling was detected | Scrolling was switched off in the stylesheet, which hides the overflow rather than fixing it. |
| The layout is responsive at standard widths | It was tested against short placeholder content, and your real product names break the cards they sit in. |
None of these are exotic. They are what a working site looks like a year after launch, once real content, a cookie banner and a marketing widget have all been added by different people.
Responsive, mobile-friendly and fast are three different things
The three get used interchangeably in proposals, and they are separate properties. Responsive describes the layout: one set of pages that rearranges. Mobile-friendly is a judgement about whether the page can actually be used on a phone, of which layout is only one part.
Fast is about weight, and about how long the page takes to become useful. A site can be any combination of the three.
The expensive combination is responsive and slow. The layout reflows perfectly while the phone spends several seconds downloading desktop-sized images before anything appears. Reflowing a layout does not reduce what is sent down the wire, and nothing about being responsive makes a page light.
The site you are reading is static HTML with self-hosted fonts and no framework. That is a decision about weight, taken separately from any decision about layout.
AI will generate a responsive layout. It cannot know your content
Producing a layout that reflows correctly is now close to free. Ask any current model for a pricing page and you will get sensible breakpoints, a grid that stacks and touch targets at a reasonable size.
What that layout is responsive to is the placeholder content it was written against. Placeholder text is uniform in length; real content is not. The failures that survive into production are nearly always content failures rather than grid failures.
The German translation is noticeably longer than the English, the customer's company name has no spaces and cannot wrap, and the table grew a column in March. None of these are visible in a generated preview, because the preview was drawn with content that behaves.
So the useful instruction has changed. Rather than asking whether a layout is responsive, give it the worst real content you have and see what survives: the longest name, the widest table, the empty state, the error state. Generating those awkward cases quickly is where these tools genuinely help, which is the same pattern as AI turning a design file into a working front end, where the states the design never showed are still yours to decide.
Where responsive design stops being the answer
Responsive covers the website. It does not cover everything a business needs on a phone, and it is worth knowing which problem you actually have before commissioning work.
If people need to work offline, receive notifications or use the camera as part of the job, that is an app question rather than a layout one, and choosing between cross-platform and native is where it starts. We build both sides of that as AI web and app development.
If the site works on every screen and the enquiries still go cold, the problem sits after the form rather than on the page. That is a CRM setup and workflow automation question: who replies, how quickly, and what happens when nobody does.
And responsive decays. A layout that was correct at launch meets three years of added content, a new banner, an embedded booking widget and a tracking script, which is what ongoing maintenance is for.
Common questions
Is responsive web design still necessary in 2026?
It is necessary and it is no longer a feature worth paying extra for. Every current framework, theme and page builder produces a responsive layout by default, so a supplier presenting it as an upgrade is charging for the baseline. The work that still costs something is making the layout survive your real content, your forms and the third-party widgets added after launch.
How do I know if my website is responsive?
Open the page you sell from on a real phone, rotate it to landscape, fill in the contact form, turn the text size up to around 200%, and find the widest table or embed on the site. If you have to pinch and zoom to read anything, or the page slides sideways, it is not responsive in any useful sense. A desktop browser window dragged narrow is a weaker test, because it does not have a keyboard covering half the screen.
Is a responsive website the same as a mobile app?
No. A responsive website is opened in a browser and works on any device that has one; an app is installed from a store and can run offline, send notifications and use device hardware in the background. Most businesses that ask for an app need a responsive site and better follow-up, not a store listing.
Does responsive design make my site slower?
Not in itself, but it does not make it faster either, and the two are often confused. A responsive page that serves one desktop-sized image to every device is doing the layout correctly and wasting most of a phone's download on pixels nobody sees. Speed comes from what you send, not from how it rearranges.
How much does it cost to make an existing site responsive?
We quote per project, because the honest answer depends on which of two jobs it is. Adapting a site whose layout is already flexible is usually a contained piece of work; retrofitting one built on fixed pixel widths often costs more than rebuilding it, and leaves you with the old structure. The first thing worth paying for is someone telling you which of the two you have, and you can ask us for that assessment before committing to anything.
