A responsive site is one whose layout adjusts automatically to the screen it’s displayed on, whether that’s a phone, a tablet or a desktop monitor. In 2026, Google indexes every site from its mobile version first, which means a site that doesn’t adapt to phones will rank lower in search results, lose visitors and, as a direct consequence, lose potential clients. For a freelancer or a small business, that’s the difference between a site that works for you around the clock and a site that half your visitors leave before reading a single line.
What exactly is responsive design?
Responsive design is a way of building a website so that its elements reorganise themselves based on the available screen space.
On a desktop, you might see three columns of text side by side, a horizontal menu at the top of the page and large images. On a phone, that same content reorganises into a single vertical column, the menu folds into a button, and the images resize so they don’t overflow the screen. You aren’t switching to a different site, it’s the same site adapting to your device.
The technique relies on three principles that work together. Fluid grids allow content blocks to occupy a percentage of the screen width rather than a fixed pixel width, so a block that takes up one-third of a desktop screen simply takes up the full width on a phone. Adaptive images load at a resolution appropriate to the device, which avoids downloading a four-megabyte file on a phone connected over 4G when a 200-kilobyte version would look identical on that smaller screen. And conditional rules, which developers call media queries, define at what width threshold the layout changes, for instance by switching from three columns to two and then to one.
The term was coined by Ethan Marcotte in 2010, and it became the industry standard within a few years. Before responsive design, many businesses maintained two versions of their site, one for desktops and one for phones, often hosted on a subdomain like m.example.com. That approach doubled the update workload and created duplicate content problems for search engine optimisation.
There’s a common confusion between “responsive” and “mobile-first”. Mobile-first is a design method that starts with the phone version of the site and then progressively adds features for larger screens. Responsive design is the technique that makes the result possible, regardless of which design method you choose. The two ideas complement each other, but a site can be responsive without having been designed mobile-first, and that’s the case for the majority of existing sites that were adapted after the fact.
Why does Google require a mobile-friendly site?
Google switched to mobile-first indexing in 2023, which means it’s the phone version of your site that its crawlers analyse to decide your position in search results.
The numbers explain why: in France, 47% of internet traffic now comes from mobile phones according to Statcounter data from June 2026, and that figure climbs above 60% in sectors like restaurants, local retail and personal services. Google adapts its ranking criteria to how its users actually browse.
In practical terms, if your site isn’t mobile-friendly, the consequences stack up quickly. Google considers the user experience poor and ranks you lower, reducing your visibility against competitors whose sites display correctly on phones. A visitor who lands on a site where they have to zoom and scroll horizontally to read the text will leave within seconds, which increases your bounce rate and confirms to Google that your page doesn’t answer the query well. You also lose direct conversions, because a contact form or a call button that can’t be tapped properly on a phone is a form nobody fills out.
This isn’t a gradual penalty, either. A site that forces horizontal scrolling on mobile creates such a poor experience that most visitors won’t even try to work around it, they’ll just hit the back button and click on the next result. Your competitors who invested in a responsive site get that visitor, and over hundreds of visits per month, the gap in enquiries and sales becomes very real.
Google’s official documentation is explicit on this point: it recommends responsive design as “the simplest model to implement and manage”, because it serves the same HTML at the same URL regardless of device. Google discourages separate mobile sites and configurations that serve different content depending on the device, because they create risks of inconsistency between versions and complicate indexing.
Google has also integrated mobile compatibility into its Core Web Vitals, the three performance metrics it uses as a ranking signal. LCP, which measures the display time of the largest visible element, must stay under 2.5 seconds. INP, which measures responsiveness to interactions, must stay under 200 milliseconds. And CLS, which measures the visual stability of the page, must stay under 0.1. A non-responsive site will almost always score poorly on all three metrics in its mobile version, because oversized images, overflowing layouts and overlapping elements degrade all of these.
How does a mobile-friendly site work?
A responsive site relies on a system of rules that tell the browser how to distribute content based on the screen width, without the server needing to detect the device or serve a different file.
The first building block is a configuration tag, which developers call the viewport meta tag, placed in the head section of every page. This tag tells the phone’s browser to display the page at the actual screen width instead of shrinking it down like a miniature version of a desktop site. Without this tag, even a site with fluid grids will appear tiny on a phone.
The second building block is fluid grids. Instead of defining a content block at 960 pixels wide, the developer gives it a width of 100% of its parent container, or a ratio like one-third or one-quarter of the total width. When the screen narrows, the blocks naturally fill the available space.
The third building block is conditional rules. They work as breakpoints: below 768 pixels wide, for example, a two-column layout switches to a single column, and the horizontal menu folds into a button. The developer typically defines three to five of these thresholds to cover phones, tablets in portrait mode, tablets in landscape mode and desktop screens of various sizes.
Finally, adaptive images allow different versions of the same image to be served depending on the device. A phone with a 375-pixel-wide screen doesn’t need to download a 1920-pixel image meant for a desktop monitor. Modern formats like AVIF and WebP reduce file sizes further, which is particularly important for mobile connections where every kilobyte matters for load time.
There’s also a concept called lazy loading, where images and other heavy elements only load when the visitor scrolls close to them rather than all at once when the page opens. This is especially valuable on mobile, because a page with twenty images that all load simultaneously on a slow connection can take ten seconds or more to become usable, while the same page with lazy loading becomes interactive within two seconds because it only loads what’s immediately visible.
If you’re working with a professional on creating your website, responsive design is one of the fundamentals included in any serious project, alongside security and search engine optimisation.
How much does mobile adaptation cost?
The cost depends entirely on the state of your current site, and the gap can range from simple adjustments to a full rebuild depending on whether the existing structure allows adaptation without starting over.
If your site was built recently on a modern tool like WordPress with a responsive theme, Shopify, Webflow or a custom framework, the adaptation usually comes down to layout adjustments, font sizing and reorganising blocks for small screens. For a showcase site of five to ten pages in this situation, expect between CHF 1,500 and 4,000, because the work consists of adapting what already exists rather than rebuilding.
If your site dates from before 2015 or was built with fixed pixel widths, layout tables or technologies that don’t support conditional rules, adapting it for mobile isn’t realistically possible without starting from scratch. In that case, it’s really a full redesign, and prices range from CHF 4,000 to 12,000 for a showcase site, and considerably more for an e-commerce site or a web application.
Between those two extremes, there’s a grey area that catches many businesses off guard. Sites built on WordPress between 2015 and 2019 often have themes that claim to be responsive but do a mediocre job of it, with text that’s technically readable on a phone but images that overflow, menus that are hard to navigate and buttons that are too small to tap comfortably. In these cases, switching to a modern theme or rebuilding the front end while keeping the existing content can cost between CHF 2,000 and 5,000, which is less than a full redesign but more than a simple adjustment.
A few benchmarks to help you situate your budget: a website audit costs between CHF 500 and 1,500 and will tell you precisely whether an adaptation is feasible or whether a redesign is needed. It’s the best investment to make before any decision, because it prevents you from spending CHF 3,000 on adaptation work for a site whose foundations won’t support it.
You should also factor in the cost of doing nothing. If your site gets 500 visitors per month from phones and they leave immediately because the navigation is unusable, you’re losing contact requests and potential sales every month. The return on investment of a mobile-friendly site is measured in weeks, not years.
One budget item often forgotten is ongoing maintenance. A responsive site needs to be tested with every content or design update, because a new text block, an unusually sized image or a hastily added form can break the mobile layout without the problem being visible on desktop. If you have a maintenance contract, check that it includes regular phone testing, otherwise you risk discovering problems at the same time as your customers.
How to test if your site is mobile-friendly?
The most reliable and fastest test is also the simplest: open your site on your phone, browse through the main pages and check that everything is readable and usable without effort.
In practical terms, ask yourself these questions while navigating on your own phone. Is the text readable without zooming? Are buttons and links large enough to be tapped without accidentally hitting the wrong element? Do images display correctly without overflowing the screen? Can forms be filled out using the phone keyboard without having to scroll horizontally? If the answer is no to any of these questions, your site has a responsive design problem.
For a more technical diagnosis, several free tools are available. Google’s mobile-friendly test, accessible at search.google.com/test/mobile-friendly, analyses your page and tells you whether Google considers it mobile-friendly. PageSpeed Insights, accessible at pagespeed.web.dev, goes further by measuring your page’s Core Web Vitals, including load times and visual stability, and providing specific improvement recommendations.
You can also use the simulation tool built into desktop browsers. On Chrome, press F12 to open the developer tools, then click the phone-shaped icon at the top left of the panel to simulate different screen sizes. It’s useful for quickly checking the display across several devices, but it doesn’t replace a real test on a physical phone, because the simulation doesn’t faithfully reproduce real-world performance or touch behaviour.
A point many site owners overlook is testing across multiple phone brands and screen sizes. A site that looks fine on an iPhone 15 might cause problems on a budget Android phone with a smaller screen or a different browser. If you don’t have multiple devices on hand, ask friends or colleagues to check your site on their phones and flag any display or navigation issues, it’s the most effective user test and it costs nothing.
If your search ranking is a concern, run this test at least once a quarter, because content updates and design changes can break mobile compatibility without you noticing on your desktop screen.
Should you go beyond responsive?
Responsive design is the essential baseline, but it doesn’t solve every usability problem on phones, and there are situations where you need to go further.
A responsive site adapts the layout, but it doesn’t necessarily simplify the user journey. If your desktop site has a fifteen-field form, a three-level-deep menu and pages with 3,000 words of text, making all of that responsive will stack the content into a very long single column on a phone, technically adapted but painful to use. In those cases, it’s better to rethink the mobile experience separately: reduce the number of form fields, simplify the navigation and perhaps reorganise the content so that the information most requested on phones appears first.
Typography is another area where responsive design alone isn’t sufficient. Text that reads well at 16 pixels on a desktop screen can feel cramped on a phone if the line height and spacing aren’t adjusted, and a heading that looks balanced at 48 pixels on a large screen can overflow awkwardly on a narrow one. A properly responsive site adjusts not just the layout but also the typographic scale, the spacing between elements and the size of interactive targets so that the phone experience feels intentional rather than like a shrunk-down version of the desktop.
Web accessibility is a related concern that responsive design alone doesn’t cover. A site can display perfectly on a small screen while remaining unusable for someone navigating with a keyboard, a screen reader or insufficient visual contrast. The two subjects go hand in hand and should be addressed together during design or redesign.
As for native mobile apps, they don’t replace a responsive site, they complement it. An app makes sense when you need phone-specific features like push notifications, camera access or offline functionality. But for a business whose primary goal is to be found on Google and to present its services or products, a well-built responsive site remains the best ratio between investment cost and potential clients reached, because it works everywhere without the visitor having to install anything.
Progressive Web Apps, sometimes abbreviated PWA, represent an interesting middle ground between a responsive site and a native app. A PWA is a website that partially behaves like an application: it can be added to the phone’s home screen, work offline for certain pages and send notifications. The development cost of a PWA is substantially lower than a native app, because there’s only one codebase to maintain instead of developing separately for iPhone and Android. For the majority of small businesses and freelancers, a quality responsive site is more than enough, but if you’re starting to consider an app, a PWA deserves to be evaluated first.
For a site built with performance and sustainability in mind, see also our article on sustainable web design, which covers page weight and resource optimisation, two topics directly tied to the quality of the mobile experience.
