Responsive Design

The principle behind responsive design

Responsive design uses CSS techniques (media queries, flexbox, grid) to adapt a site's layout to the size of the user's screen. The same site displays its content differently on a 27-inch monitor, a 10-inch tablet and a 6-inch smartphone, without ever losing readability or functionality.

The mobile-first approach means designing the mobile version first, then enriching the experience for larger screens. It is the opposite of the traditional approach, which started with the desktop. This method has become the standard because more than 60% of web traffic worldwide comes from mobiles (Statista, 2025). In France that figure reaches 65% for B2C sites.

Why Google requires a responsive site

Since March 2021, Google has used mobile-first indexing exclusively: it is the mobile version of your site that is analysed for rankings. If your site is not responsive, or if the mobile version offers a degraded experience with text too small, buttons too close together or hidden content, your Google rankings suffer directly.

Google's Core Web Vitals include metrics that penalise sites not optimised for mobile: LCP (Largest Contentful Paint) must be under 2.5 seconds, INP (Interaction to Next Paint) under 200ms, and CLS (Cumulative Layout Shift) under 0.1. A well-built responsive site meets these thresholds naturally.

The key ingredients of successful responsive design

Responsive typography uses relative units (rem, em, vw) rather than fixed pixels. A heading at 48px on desktop becomes 28px on mobile so it stays readable without zooming. Spacing (padding, margin) scales proportionally too.

Responsive images use the srcset attribute and the Next.js Image component to serve the right resolution for the device. An image 2000px wide on desktop would be needlessly heavy on mobile. The WebP or AVIF formats cut image weight by 30 to 50% compared with JPEG.

Mobile navigation replaces the horizontal menu with a hamburger menu or a bottom bar. Buttons and tappable areas should measure at least 44 by 44 pixels (Apple's recommendation) so they are easy to use with a finger.

Mobile forms need particular care: input fields large enough, the right keyboard for each field type (numeric for a phone number, email for an email address), auto-complete switched on, and a submit button that can be reached without excessive scrolling.

The impact on the conversion rate

A site that is not responsive drives away 61% of mobile users, who never come back. The mobile bounce rate is on average 10 to 20% higher than on desktop, and that gap widens considerably on sites that are not optimised. Conversely, a smooth mobile experience can lift mobile conversions by 30 to 50%.

Responsive site or mobile app

For most businesses, a responsive site is enough. A native mobile app (iOS or Android) is only justified if you offer advanced features such as real-time location, critical push notifications or an offline mode. PWAs (progressive web apps) offer an interesting middle ground: they combine the advantages of the web, with no installation, and those of native apps, with an offline mode and an icon on the home screen.

Understanding breakpoints

The technical heart of responsive design is the breakpoints, the screen widths at which the layout changes. The most common values are 640px (small phones), 768px (tablets in portrait), 1024px (tablets in landscape and small laptops) and 1280px (large screens). At each breakpoint, the grid can move from a single column on mobile to two or three columns on desktop, the font size grows and the margins widen. Tailwind CSS, the framework we use, handles these breakpoints natively, which guarantees a smooth transition between formats with no fragile code and no heavy maintenance.

The most common responsive mistakes

Even with the best intentions, certain faults crop up again and again on poorly built sites. Here are the most common ones to watch for:

- Text that is too small, forcing the user to zoom in on mobile - Buttons too close together, which causes accidental taps - Images that overflow the screen or fail to resize - Wide tables that are unreadable on a phone because there is no horizontal scrolling - Pop-up windows that cannot be closed on mobile - A navigation menu that hides the content or stays out of reach - Form fields that trigger the wrong keyboard

These faults are invisible to anyone testing only on a computer, which is why it is so important to check systematically on a real phone.

How to test your site's responsiveness

Testing across screen sizes needs no paid tools. Chrome's responsive mode (press F12, then the mobile icon) simulates dozens of devices. Google's PageSpeed Insights tool scores your mobile performance and flags Core Web Vitals problems. But nothing replaces a test on a real smartphone: walk through your whole conversion journey, from the first screen to submitting the form or paying. Check the readability, how easy it is to type, the loading speed on 4G, and that nothing shifts visually as the page loads. A five-minute test on your own phone often reveals more problems than a long theoretical analysis.

Responsive design and accessibility: two complementary requirements

Good responsive design goes hand in hand with accessibility, meaning your site can be used by everyone, including older people and people with disabilities. The two disciplines share the same good practice: enough contrast between the text and the background, comfortable font sizes, tappable areas that are big enough, and navigation that works without a mouse. On mobile these requirements become even more critical, because the screen is small and the site is often used on the move, in poor light. Building a site that is both responsive and accessible widens your audience, lowers your bounce rate and protects you legally, as digital accessibility becomes a legal obligation for a growing number of businesses in France.

At ConvertiLab, every site we build is 100% responsive and optimised mobile-first. We test on around ten different devices to guarantee a perfect experience on every screen.