What is responsive web design? It is one website that rearranges itself to fit the screen it is opened on. On a phone, three columns become one, pictures shrink to the width of the screen and the menu folds behind a button; on a wide monitor, the same page spreads out. One address, one set of content and one code base: nothing is built twice.
It matters for two reasons:
- Your visitors are split almost in half. StatCounter puts phones at 49.1% of web traffic in the US in September 2026, against 48.5% for desktops; worldwide, phones had 59%.
- Google judges the phone version. It indexes and ranks the mobile version of your pages, so what a phone gets is what Google sees.
I have been building software for 18 years, and since 2017 my team of 70+ specialists has delivered 150+ projects. Here is what I would want a client to know before paying for responsive website design.
How responsive web design works
Four parts do the work. You will not write them yourself, but their names let you ask a developer precise questions.
A fluid layout
The page is built in proportions instead of fixed pixels: a column takes a share of the screen rather than 960 pixels of it. Modern CSS layout, flexbox and grid, is responsive by default, so a row of cards can wrap onto the next line when it runs out of room. On a wide monitor, lines of text stop at a readable length.
The viewport tag
One line in the page's code tells a phone to lay the page out at its real width. Without it, a phone may render the page as if it were a screen 980 pixels wide and shrink the result, so visitors get tiny text and pinch to read. The line contains width=device-width; if it also says user-scalable=no, it blocks zoom, which people with low vision depend on.
Pictures in sets: srcset and sizes
A responsive picture is a set of files, not one file. The srcset attribute lists the same picture in several widths, and sizes tells the browser how wide it will appear on the page; the browser weighs the screen size and pixel density and downloads the first file big enough for that space. A <picture> element can add newer formats such as AVIF or WebP, with a fallback for browsers that skip them. A picture with its width and height in the code also keeps its place while it loads, so the text below does not jump.
Media queries and container queries
Three kinds of rules switch the design as conditions change:
- Media queries change the layout at chosen screen widths, the breakpoints: below one width, two columns become one.
- Hover and pointer queries, part of media queries, ask how the visitor points, so a finger on a touchscreen can get larger controls than a mouse.
- Container queries, now supported by every major browser, react to the width of the box a component sits in rather than the screen, so one card design can be wide in the main column and compact in a sidebar.
Font sizes can grow with the screen too. The formula needs a fixed part as well as a screen-based one, or zoom stops working on that text.
Responsive, adaptive or a separate mobile site
Responsive is the default, and Google recommends it as the easiest setup to implement and maintain. The other setups still exist, and the word "adaptive" is used loosely, so ask which one a vendor means:
| Setup | How it works | What you maintain | When it still fits |
|---|---|---|---|
| Responsive | One address and one page; the styles adapt it to each screen | One site | Almost every business site |
| Adaptive (dynamic serving) | One address; the server detects the device and sends different HTML | Templates for each device class, plus the detection | A phone task unlike the desktop one, until a rebuild |
| Separate mobile site | A second site at its own address, such as m.example.com | Two sites with equal content and redirects between them | Rarely; it is usually the first thing to merge |
| An app | Installed from the App Store or Google Play | A separate product with its own code | Daily use and features a browser handles poorly |
A separate mobile site is not a mobile responsive website, even when it looks like one on a phone. Some people also call fixed layouts that jump between three set widths "adaptive": they look right at those widths and fit poorly between them. Whatever the setup, Google expects the phone version to carry the same content as the desktop one.
How to check whether your site is responsive
Eight tests cover the basics; you need your phone, a laptop and Google's free PageSpeed Insights. Google's own Mobile-Friendly Test was retired on December 1, 2023, and any responsive website checker that shows screenshots at three widths misses what happens between them. Forward this table to whoever looks after your site:
| Test | How | It passes when |
|---|---|---|
| Sideways scroll | On your phone, open the five most visited pages and swipe left on the text | Nothing moves sideways |
| The widths in between | On a laptop, drag the browser window slowly from full width to its narrowest | Nothing overlaps, no text is cut off, the menu stays reachable |
| Zoom | Pinch the text on your phone | The text gets bigger |
| The viewport tag | Right-click the page, choose View page source and search for viewport |
The line says width=device-width and not user-scalable=no |
| Picture sizes | PageSpeed Insights, Mobile tab, "Improve image delivery" (older reports say "Properly size images") | No pictures listed, or only small savings |
| Jumps while loading | The same report, Cumulative Layout Shift | 0.1 or less |
| Same content | Open each key page on the phone and on the laptop | Every section, price, form and link exists on both |
| Real phones | Repeat the first tests on an iPhone and an Android, one of them a few years old | The same results; a browser's phone view is only an approximation |
A responsive page can still be heavy
Passing all eight does not make a page light. In October 2026 I opened five of the top guides Google shows for "responsive web design" on a phone-sized screen: all five had the viewport tag, none scrolled sideways, and only one of the 37 pictures they showed, a small icon, was more than twice as wide as the screen needed. Yet on all five, scripts outweighed pictures, and three sent more than 1 MB of compressed JavaScript before the reader scrolled. Five pages are a small sample, but the lesson holds: fit and weight are separate checks, and what else a phone visitor needs is the subject of our mobile-friendly website checklist.
The mistakes few avoid
A site can pass the tests above and still lose people in five places. Here they are, with the fix for each.
Content cut from the phone version
To shorten a phone page, teams delete sections or move them behind a "show more" button that fetches them on tap. Google indexes the mobile version, and it does not load content that needs a swipe, click or typing to appear, so what the phone version lacks can vanish from search too. Keep the same content on every screen: shorten long sections by collapsing them, with the text already in the page.
Pictures sent at desktop size
A picture made for a wide monitor costs a phone visitor time and data before anything useful appears. On Build Wise Investments, a contractor site we built, the first screen pulled a 3840-pixel image, and a loader was the largest thing the page painted. Fixing both and inlining the styles halved the phone's first download and took the mobile Lighthouse scores from 77 and 74 to 100. The lasting fix is a site that cuts every uploaded picture into a set of widths by itself, so no upload can undo the work.
Wide tables and embedded widgets
Price tables, schedules and comparison grids are wider than a phone by nature, and so are many embedded maps, calendars and booking widgets. Squeezed, their text drops below a readable size; left alone, they push the whole page sideways. Let a table scroll inside its own box, with a visible hint that it does, or turn each row into a card on narrow screens; for a third-party widget, ask its vendor about the phone layout before you sign.
Tap targets that are too small
A link that is easy to click with a mouse can be hard to hit with a thumb, especially in menus, footers and the close button of a pop-up. WCAG 2.2, the accessibility standard, asks for targets of at least 24 by 24 CSS pixels at level AA and 44 by 44 at level AAA, with an exception for links inside a sentence. Treat 24 as the floor and give the main buttons more room. The rest of accessibility, from screen readers to magnification, is what our accessibility audit and fixes cover.
Full-screen sections under the browser bars
A first screen sized with the classic vh unit is measured for the screen with the browser bars hidden, so while the bars show, its bottom edge, often the main button, sits under them. Small viewport units (svh) measure the screen with the bars shown, and the button stays in sight.
How this site does it
This site is a working example, and you can check each point below in your browser's developer tools. The best responsive web design examples are the ones you can inspect yourself:
- The viewport tag reads
width=device-width, initial-scale=1, viewport-fit=cover. - Pictures come in sets. On the Build Wise Investments case page, each of the four site screenshots comes in four widths, from 360 to 1,280 pixels. I checked which file arrives: a 360-pixel-wide Android at double density gets the 720, an iPhone at triple density the 1,080, a laptop at double density the 1,280.
- No jumps, no early downloads. Every picture carries its width and height and loads only as it nears the screen; our written standard asks the same of every site we build for clients.
- Lighter formats where they pay. Four of the seven team photos on our About page arrive as AVIF and three as WebP, whichever came out lighter.
- Headlines fit their column. On service pages, a container unit caps the headline's size by the width of its own column, so the longest word never breaks out on a narrow phone.
- A finger is not a mouse. Some rules apply only to touchscreens (no hover, a coarse pointer), and full-screen sections use small viewport units.
What a responsive rebuild involves
If you are wondering how to make a responsive website out of the one you have, start with a list of what breaks where, not with a new design. The work goes in this order:
- Audit. Analytics show which pages phone visitors open most; the eight tests show what breaks on them. For a site someone else built, we read the code first, as part of web development consulting.
- Retrofit or rebuild. A few clean templates can take new styles and picture sets while the design stays. A fixed-width layout, tables used for layout, an old theme or a separate mobile site usually means a rebuild.
- Content. Decide what collapses, what moves and what changes order on a phone; nothing disappears.
- Templates. Design at three widths, then test every width in between; the order of that work, phone first, has its own guide.
- Pictures. Set up automatic picture sets and run the existing library through them.
- Testing. Real phones first, then the browser's phone view for the rest.
- Launch. Keep page addresses, or redirect each old one permanently to its new page; that is how Buhgalteria na doloni, an accounting firm, kept its rankings when we moved its site.
What drives the cost
The number of different templates drives the cost, not the number of pages: 60 pages built on four templates are less work than 15 pages that are each unique. What adds to the estimate:
- content that resists a phone: wide tables, comparison grids, calculators, maps;
- third-party widgets for booking, chat or payments, whose phone layout you do not control;
- an old theme or builder that costs more to fix than to replace;
- thousands of existing pictures to cut into sets;
- a separate mobile site to merge, with a redirect for every old address;
- the phones and browsers that must pass, and the accessibility level you target.
With us, a new website starts at $499, paid upfront, and its design works on a phone, a laptop and a wide screen from the first version; the package terms are in their own article. A design no one else has, or logic of your own, is a custom website, estimated before work starts. Making an existing site responsive is estimated the same way, after we have looked at its code.
When responsive design is not the whole answer
Responsive design solves fit. It does not solve everything a phone visitor needs:
- Offline work or notifications. A progressive web app adds both to web code and installs from a link; some products still need a store app.
- A different job on the phone. If a technician closes orders on site while the office plans the week, design a separate flow for the technician instead of squeezing the office screen.
- A site you are about to replace. Skip the retrofit and put the money into the new build.
If your tests found problems, send the list and the page addresses to whoever will fix them, us included. We will tell you whether new styles are enough or the site needs a rebuild; everything we build for the web is on our web development page.
Questions
What are breakpoints in web design?
They are the screen widths at which a layout changes, for example where two columns become one. Google's web.dev advises letting the content set them, not a list of devices or brands.
Does Google rank responsive websites higher?
Google ranks the mobile version of your pages, whatever setup serves it. It recommends responsive design as the easiest setup to maintain, and every setup needs the same content on phone and desktop.
Can an existing site be made responsive without a redesign?
Often, yes, if it runs on a few clean templates: new styles and picture sets change how it adapts while the design stays. A fixed-width layout or an old theme usually makes a rebuild the cheaper path.
How much does a responsive website cost?
With us, a new website starts at $499, paid upfront, and it is responsive from the first version. Making an existing site responsive is estimated after we look at its code, free and before any work starts.
Do we still need an app if the site is responsive?
Only if people will use it often and need what a browser does poorly. Offline use and notifications can often come from a progressive web app, which installs from a link.