Responsive web design explained: benefits and examples

Your website looks good on a computer, but on a phone you have to zoom and swipe sideways? Then it lacks responsive web design. Here is the definition, the most important benefits and a checklist to optimise your website for mobile.

Responsive web design: the definition

Responsive web design means that a website automatically adapts to the screen size. There is only one website with one address. The layout rearranges itself depending on the device: columns stack on a phone, images get smaller, the menu folds into a button. Technically this is done with flexible grids and so-called media queries in CSS. In the past there was often a separate mobile version under its own address such as m.example.com. That is no longer common today.

Why it matters for Google

Since 5 July 2024, Google crawls websites only with the smartphone Googlebot (source: developers.google.com/search/blog, June 2024). So the mobile version of your site is what gets evaluated. Content that is missing or unreachable on a phone cannot be taken into account. Then there is visitor behaviour: especially for local searches, many enquiries come from smartphones, and anyone who has to struggle with an unsuitable page leaves quickly.

The benefits of responsive web design

• One website for all devices, only one set of content to maintain.
• Better usability on phones and tablets, and therefore more calls and enquiries.
• A basis for good rankings on Google.
• Shorter load times when images are loaded to fit the screen size.
• Better accessibility, because text can be enlarged without the page falling apart.

Examples: what changes on a phone

• The main menu becomes a menu button.
• Multi-column sections stack on top of each other.
• The phone number becomes a button that calls directly.
• Images are loaded at a lower resolution.
• Form fields use a font size of at least 16 pixels. Otherwise the iPhone zooms in automatically when you tap them.

Optimising your website for mobile: checklist

• The source code contains the viewport setting for mobile devices.
• Nothing can be moved sideways, no element is wider than the screen.
• Text is readable without zooming.
• Buttons and links are large enough to tap and have space between them.
• No large overlays that cover the content when the page opens. Google explicitly names such intrusive pop-ups as a problem for the user experience.
• Images in modern formats such as WebP or AVIF and in a suitable size.
• The page loads quickly even with weak reception.

How to test your site

Open it on your own phone and try to request an appointment. On a computer, press F12 in Chrome to switch on the device view and simulate different phones. PageSpeed Insights (pagespeed.web.dev) shows load time and mobile issues. The free website check on this site also tests whether the mobile setting is present.

Frequently asked questions

What is the difference between responsive and an app?

A responsive website runs in the browser and needs no installation. An app has to be downloaded from the app store. For most local businesses a good responsive website is completely sufficient.

Can an old website be made responsive afterwards?

Sometimes, with a new theme or adjusted CSS. For very old sites a rebuild is often cheaper and cleaner than patching.