Responsive Web Design and Development Cost in 2026: New Build vs Retrofit

The short answer

A responsive site uses one codebase whose layout adapts to the screen: phone, tablet, laptop, wide monitor. You are not paying for "mobile support" as a feature. You are paying for every template to be designed and built so it works at any width, for a set of components that behave the same everywhere, and for testing on the devices your users hold. The count of unique templates and how dense they are decides most of the price.

This guide looks at the responsive and design side of the budget. For the full price of a site including CMS, hosting and content, see website development cost. For products with heavy back-end logic, web application development cost is the better fit, and if you want an installable, offline-capable web app, read progressive web app development cost.

What "responsive" actually adds to the bill

Compared with designing and building one desktop layout, responsive work adds four kinds of effort. In the estimates we prepare, together they come to roughly 20–35% of the design and front-end budget.

• Extra layouts per template. A designer works out how each template reflows at each layout range: what stacks, what collapses into a menu, what gets hidden, how a comparison table survives on a 375-pixel phone. Simple content pages adapt with little thought. Pricing tables, mega menus, filters and dashboards take real design time at every width.
• Components that adapt. Navigation, cards, forms, modals, tabs and tables need to behave correctly at every width, not just at the breakpoints someone drew. Building them fluidly (with CSS grid, flexbox, container queries and fluid type) costs more up front than hard-coding three fixed layouts and much less later.
• Responsive media. Images in several sizes and formats, art direction where a wide hero crop fails on a phone, video that does not autoplay megabytes on mobile data. This is also where performance budgets are won or lost.
• Testing across devices. Every template on every layout range, in the browsers your users run, in portrait and landscape, with zoom. This is the line buyers most often underestimate.

One more reason the work is not optional: Google finished moving to mobile-first indexing in 2024, so it crawls and ranks sites by what its smartphone crawler sees. Content that only exists on the desktop layout effectively does not exist for search.

Where the money goes in a responsive build

This is how the budget usually splits for a mid-size responsive site of about $70k: 20 templates, a design system, a headless or WordPress CMS, three layout ranges and WCAG 2.2 AA.

Breakpoints and the design system: the two biggest dials

Two decisions made early in design move the responsive budget more than anything else.

How many layouts you design. Each designed layout range adds work to every template: design, build and testing. Three ranges (phone, tablet or small laptop, desktop) with fluid behavior in between cover most sites. A fourth, wide-desktop layout earns its keep for dashboards and data tables. Designing for named devices ("iPhone 16, iPad Air, MacBook") is a trap: there are thousands of viewport sizes in real traffic, and a layout drawn for three devices breaks on the fourth.

Whether you build a design system. A design system is a set of tokens (colors, type scale, spacing) and components with documented states and responsive rules. It costs $5–25k for a marketing site and $25–80k for a product UI. It pays back from roughly the 15th template on, because new pages are assembled from parts that already work at every width. Below that, a style guide and a small component set are enough.

Design that is handed to engineers already clear, with each component's behavior at each width written down, is also the cheapest way to cut front-end rework. The hours lost to "what should this do on a phone?" questions mid-sprint never show up in the design line of a quote, but they show up in the invoice.

Built by Gilzor

Results we’ve shipped

70+products launched

98%delivered on time

85%clients come back

Pharmacy · DACHRedesigning and modernizing an Online Pharmacy mobile app→EdTech4 moto a full iOS app on the App StoreA mobile app to develop brain functions→Healthcare+30%lab test ordersMedical Lab Web and Native Mobile Applications→

Talk to the people who build it. Tell us about your project and get a free estimate of scope, timeline and cost.

See how we’d approach yours →

Size your responsive project

Set the number of unique templates, whether you are building new or retrofitting, how many layout ranges you design, the design system, the device matrix and your accessibility target. The calculator estimates hours, cost by team location, a timeline and the part of the budget that exists because the site has to be responsive.

Two quick checks. A new 20-template site with three layout ranges, an adapted component library, a standard device matrix, WCAG 2.2 AA and a CMS comes to about 1,210 hours, or roughly $73k with a Central/Eastern European team; about $25k of it is the responsive part. Switch the same site to a CSS-only retrofit of an existing CMS theme with no design system and it drops to about 630 hours and $38k. Push the template count to 60 and a custom design system costs about the same in total as an adapted library, with every template after that cheaper.

Retrofit or rebuild?

Plenty of US companies still run sites built before responsive layouts were the default: fixed 960-pixel grids, table layouts, a separate "m." mobile site, jQuery plugins nobody dares touch. Making those work on phones is a different project from a new build, and the price depends on how much of the old markup survives.

The crossover is usually easy to see once the templates are audited. A retrofit costs less per template than a rebuild when markup can stay. Every template that has to be rewritten costs almost as much as a new one, plus the time spent working around old code.

Retrofit or rebuild: check your site

Six questions about the site you have now. The result tells you which route to price first.

The device testing matrix

Responsive bugs live in specific combinations: Safari on an older iPhone, a mid-range Android phone with a large system font, a tablet in landscape, a laptop at 125% scaling. A testing matrix lists the combinations you commit to support, and it should come from your analytics, not from a vendor's default list.

Your audience may be less mobile than you think, or more. StatCounter's August 2026 data puts US web traffic at about 56% desktop, 42% mobile and 2% tablet. Consumer brands often see well over half of visits from phones; B2B tools used at work can be 80% desktop. Both still need every template to work everywhere, but the split tells you where to spend design attention and test depth.

Real-device spot checks catch what emulators miss: touch targets, on-screen keyboards covering inputs, safe areas around the notch, scroll behavior in iOS Safari. A cloud device lab typically costs tens to a few hundred dollars a month and replaces a drawer of test phones. Our own metric is that only 5% of tasks sent to QA come back to developers, and responsive work is where that discipline matters most: each component is checked at every layout range as it is built, not in a device hunt the week before launch.

Accessibility: WCAG 2.2 is now part of the responsive budget

The state of the web is poor. WebAIM's 2026 analysis of the top one million home pages found detectable WCAG failures on 95.9% of them, up from 94.8% a year earlier, with an average of 56 errors per page. Legal pressure keeps rising too: UsableNet counted more than 5,000 digital accessibility lawsuits in US federal and key state courts in 2025, and 1,427 of them targeted companies that had already been sued before.

On the public side, the Department of Justice's 2024 rule under ADA Title II requires state and local governments to meet WCAG 2.1 AA on websites and mobile apps. An interim final rule in April 2026 moved the deadlines to April 2027 for larger entities and April 2028 for smaller ones. Private companies have no equivalent federal rule but face demand letters and lawsuits under Title III, and US companies selling into the EU have been subject to the European Accessibility Act since June 2025.

WCAG 2.2, a W3C Recommendation since October 2023, is the current version and a superset of 2.1 for practical purposes. Several of its new criteria land squarely on responsive layouts:

Built in from the start, WCAG 2.2 AA adds roughly 10–15% to design and front-end effort in our estimates. Retrofitted after launch, it often costs two to three times that, because fixes touch every template and component. An independent audit with a report and retest typically runs $5–25k depending on page count, and it is what procurement teams and lawyers ask to see. Accessibility overlays and widgets are not a substitute; UsableNet's data shows sites using them still get sued.

How team location changes the price

For the same mid-size responsive project of about 1,200 hours (20 templates, design system, CMS, standard matrix, WCAG 2.2 AA), region moves the price more than any design decision. These are typical 2026 vendor rates for a blended team of designers, front-end engineers, QA and PM.

Latin America gives US teams the most time-zone overlap, which is why it is called nearshore. Central and Eastern Europe, where Gilzor works from Poland and Cyprus, is offshore for the US: Warsaw is six hours ahead of New York, leaving two to four shared hours with the East Coast on shifted schedules and very little with the West Coast. Responsive design work handles that well, because it runs on Figma files, written component specs and review links rather than constant calls. For a US baseline, the Bureau of Labor Statistics put the median annual wage for software developers at $135,980 in May 2025, before benefits and overhead. Our nearshore software development rates guide compares regions in more detail.

The costs that don't show up in the first quote

• Upkeep: about 15% of the build per year. New iOS and Android versions, browser changes, dependency updates and the layout bugs that appear when editors paste a 40-word headline into a component designed for six. Our website development and maintenance cost guide covers the full yearly picture.
• Content that does not fit. Long tables, PDFs, embedded third-party widgets and old blog posts with fixed-width images break responsive templates. Cleaning legacy content is often a few days per hundred pages.
• Images and performance. Generating several sizes and formats, an image CDN, and fixing Core Web Vitals on phones, where slow layouts hurt most and Google measures page experience. Image services typically bill monthly by volume.
• Device lab and tooling. A cloud device testing subscription, automated accessibility scanning in the build pipeline, visual regression tests for key templates.
• Accessibility audits. An independent audit before launch and periodic checks after, $5–25k each time depending on scope.
• Fonts, icons and stock assets. Web font licenses priced by page views, icon sets, photography. Small individually, rarely in the estimate.
• SEO protection on a rebuild. URL mapping, redirects and monitoring after launch so a responsive rebuild does not lose search traffic.

Overruns are common enough to plan for. The Standish Group's CHAOS research has for years rated only around three in ten software projects as fully successful on time, budget and scope. Responsive projects rarely fail outright, but they overrun in a predictable way: templates multiply once design starts, and testing gets squeezed at the end.

What we see in estimates and first calls

• "Just make it mobile-friendly" hides the template count. A site that "has about ten pages" often turns out to have 30 distinct layouts once landing pages, legacy sections and forms are counted. Counting templates is the first hour of every honest estimate.
• Designs arrive for desktop only. Figma files with beautiful desktop screens and no mobile layouts push design decisions onto front-end developers, who make them slower and less consistently. Ask for at least the phone layout of every template.
• Tables are the hardest part. Pricing comparisons, spec sheets and data grids are where responsive design gets expensive. Decide early whether each table scrolls, stacks into cards or gets a separate mobile view.
• Third-party embeds break layouts. Booking widgets, chat bubbles, old video players and cookie banners often ignore the site's breakpoints and cover the content or the focused element. Test them in the matrix like your own code.
• Accessibility comes up after the demand letter. Buyers who would have spent 10–15% more to build it in end up paying an audit, a rush retrofit and legal fees.

How to reduce the cost without breaking the site

1. Cut templates, not breakpoints. Merge near-duplicate layouts into one flexible template. Fifteen well-designed templates cost much less than thirty slightly different ones, and editors get a simpler site.
2. Design phone-first for key flows. Starting with the smallest layout forces content priorities and makes the desktop version easier. It also surfaces table and navigation problems while they are cheap to solve.
3. Adapt a proven component library. For most sites, a well-maintained library styled to the brand is tested at every width already and saves weeks. Build a custom design system only when template count or brand demands it.
4. Fix the test matrix from analytics. Support what your users actually run. Dropping a browser with a fraction of a percent of traffic from the formal matrix saves hours on every template.
5. Build accessibility in. Accessible components, color tokens checked for contrast and automated scans in every build cost far less than a retrofit. See our list of web accessibility companies in the USA if you need an independent auditor.
6. Retrofit in phases when you can. Make the highest-traffic templates responsive first, guided by analytics, and leave rarely visited legacy sections for later or for retirement.
7. Keep QA in every sprint. Responsive bugs found per component take minutes. Found across 30 templates the week before launch, they take days. More ideas in how to reduce software development cost.

FAQ

Where Gilzor fits

We design and build responsive sites and product interfaces: discovery and template inventory, a component library with each component's behavior specified at every width, front-end build by our web development team, and device and accessibility testing in every sprint. For existing sites, we start with a template audit and give you a retrofit and a rebuild figure side by side.

Send us your URL or Figma file, your analytics split by device and any accessibility requirements you have to meet. We will count the templates, propose a test matrix and tell you which route costs less. If you are comparing vendors, our list of responsive web design companies in the USA is a useful starting point.