What is responsive design?
A plain English guide to why your website needs to work perfectly on every screen - and what it costs you when it does not.
Check my websiteWhat does responsive web design actually mean?
Picture a paper document. If you print an A3 newsletter and try to read it on an A6 postcard, the text becomes tiny, columns get cut off, and images overlap. The document was designed for one size and one size only.
Early websites had the same problem. They were designed for desktop monitors, and when smartphones arrived, visiting them on a phone meant squinting at shrunken text, scrolling sideways to find buttons, and generally having a frustrating experience.
Responsive web design is the solution. A responsive website is built so that the layout fluidly adapts to whatever screen it is displayed on. On a large desktop, you might see three columns of content side by side. On a tablet, those same columns might rearrange into two. On a phone, they stack into a single column that fills the screen cleanly. The content is the same - but the presentation changes to suit the device.
The word "responsive" comes from the idea that the website responds to its environment. It is not a separate mobile version of the site - it is one website that behaves intelligently across all screens.
What does a non-responsive website look like?
You have probably experienced this. You search for a local business on your phone, tap the link, and arrive at a website that looks like it was designed for a monitor. You have to pinch to zoom in to read anything, tap tiny navigation links that your finger cannot hit accurately, and scroll in all directions to find information.
Within seconds, most people do exactly what you probably do - hit the back button and find someone else.
Non-responsive websites typically show one or more of these symptoms on a phone:
Text too small to read
The page loads at desktop proportions, making text so small you need to pinch and zoom just to read a sentence. Most visitors do not bother - they leave.
Horizontal scrolling
Content overflows past the edge of the screen, forcing visitors to scroll sideways. This is almost always a sign that the layout was designed for desktop and never adapted for mobile.
Buttons impossible to tap
Navigation links and call-to-action buttons designed for a mouse cursor are too small for a finger. Visitors tap the wrong thing, get frustrated, and give up.
Broken layouts
Images overflow their containers, columns overlap each other, or navigation menus collapse into an unusable mess. The page looks broken because, from a mobile perspective, it is.
Forms that do not work
Contact forms and enquiry forms are often the most important element on a business website. On a non-responsive site they can be cut off, impossible to scroll through, or have fields too small to type into on a touchscreen.
Phone numbers not clickable
On a properly built mobile site, a phone number is a tap-to-call link. On a non-responsive site, the number is just text - a visitor has to memorise it, switch to their dialler, and type it in manually. Most will not.
Why Google cares about mobile
In 2019, Google switched to what it calls mobile-first indexing. This means that when Google assesses your website to decide where to rank it in search results, it looks at the mobile version of your site - not the desktop version.
Before this change, Google primarily looked at the desktop version of websites when ranking them. That meant a business could have a poor mobile experience and still rank well. That is no longer the case.
If your website is difficult to use on a phone, Google sees that and ranks you accordingly. A well-built competitor with a smooth mobile experience will outrank you, even if your content is better.
The numbers: More than 60% of all Google searches now happen on a mobile device. For local searches - "plumber near me", "web designer Surrey" - that figure is even higher. If your website does not work on a phone, you are invisible to the majority of people searching for what you offer.
What makes a website truly responsive?
Lots of websites claim to be mobile-friendly, but there is a difference between a website that technically displays on a phone and one that is genuinely good to use on a phone. True responsive design covers all of the following:
Fluid layouts
The layout uses proportional widths rather than fixed pixel measurements, so it naturally contracts and expands to fit any screen size without breaking or overflowing.
Responsive images
Images scale down to fit smaller screens and, on modern sites, the browser automatically serves a smaller file to mobile visitors so they are not downloading a desktop-sized image on their data plan.
Mobile navigation
A desktop menu with six or seven items across the top of the page becomes a hamburger menu (the three-line icon) on mobile, keeping navigation clean and usable on small screens.
Touch-friendly elements
Buttons and links are large enough to tap accurately with a finger. Spacing between interactive elements prevents accidental taps. Forms are designed to trigger the correct keyboard on a phone - a number pad for phone fields, an email keyboard for email fields.
Fast on mobile connections
True mobile-friendliness includes performance. A site can be perfectly responsive in layout but still painfully slow on a 4G connection if images are not compressed and code is not optimised. Both matter.
Readable typography
Text is large enough to read without zooming (minimum 16px body text), line lengths do not stretch across the full width of a large screen, and there is enough spacing between lines that the content feels comfortable to read.
The real cost of getting it wrong
A non-responsive website is not just an inconvenience - it has a direct, measurable cost to your business.
Consider a local tradesperson whose website gets 200 visits a month from Google. If 65% of those visits are on mobile - which is typical for local searches - that is 130 potential customers arriving on a phone. If the mobile experience is poor and even half of those visitors leave immediately, that is 65 potential enquiries lost every single month. Not because the business is not good enough, but because the website did not work properly on the device they were using.
The same principle applies to every type of business. A restaurant whose booking form does not work on mobile loses reservations. A solicitor whose contact page is impossible to navigate on a phone loses prospective clients. An estate agent whose property listings require horizontal scrolling loses buyers.
The problem compounds with SEO. Those 65 visitors who left immediately - Google measures that. A high bounce rate (visitors arriving and immediately leaving) on mobile is a signal that your site is not meeting user expectations, and it feeds back into your rankings over time.
A quick test: Open your website on your phone right now. Read it as if you are a customer who has never seen it before. How does it feel? If anything is difficult, confusing, or frustrating - your customers are experiencing the same thing.
Frequently asked questions
Q: My website was built a few years ago - is it likely to be responsive?
A: It depends on when and how it was built. Responsive design became the standard around 2012-2015. Websites built before then are very likely to have mobile problems. Websites built after that may or may not be truly responsive depending on how carefully they were built. The only way to know for certain is to test it on a real phone and check Google's Mobile-Friendly Test tool at search.google.com/test/mobile-friendly.
Q: My web developer said my site is mobile-friendly. Should I trust that?
A: Test it yourself on your phone. Open it on the smallest phone you have and try to use it as a customer would. Try to find information, fill in a form, and make a call. If anything is awkward, it is not truly mobile-friendly regardless of what you were told. "Mobile-friendly" has a wide range of meanings - from "technically displays on a phone" to "genuinely excellent to use on a phone".
Q: Can I just have a separate mobile website?
A: This used to be common - businesses had a "m.example.com" version of their site for mobile users. It is now considered outdated and creates more problems than it solves. You end up maintaining two separate websites, search engines can get confused about which version to rank, and keeping both in sync when you update content is error-prone. A properly built responsive website is always the better solution.
Q: Does responsive design affect how my site looks on desktop?
A: Not negatively. A website built with responsive design looks equally good on desktop, tablet, and phone - that is the whole point. In fact, the discipline of designing for mobile first often results in a cleaner, faster, more focused desktop experience too. Removing unnecessary clutter for mobile typically improves the desktop version as well.
Q: My site uses WordPress - does that mean it is automatically responsive?
A: WordPress itself does not make a site responsive - the theme does. Most modern WordPress themes are built to be responsive, but the quality varies enormously. A poorly built theme might display on mobile without completely breaking, but still be slow, cramped, and difficult to use. Responsiveness is only as good as the care taken in building the theme and customising it. If you are looking for a WordPress developer in Surrey, every site I build is fully responsive and tested across multiple real devices before launch.
Q: How do I check if Google thinks my site is mobile-friendly?
A: Go to search.google.com/test/mobile-friendly, enter your website address, and Google will test it and tell you whether it considers your site mobile-friendly, along with specific issues if it finds any. This is Google's own tool - the same one it uses to assess your site for ranking purposes.
How I approach responsive web design
Every website I build is designed mobile-first - meaning the smallest screen is considered first, and the layout expands from there. This produces cleaner, faster sites than the reverse approach of building for desktop and shrinking down. Before any site goes live, I test it on real devices across a range of screen sizes, not just a browser simulator.
Responsive design and page speed are closely related - a site that loads slowly on mobile is not truly mobile-friendly regardless of its layout. You might also find my guide on Google Lighthouse and Core Web Vitals useful for understanding how Google measures both together.
Is your website working on mobile?
I will test your website across multiple devices and screen sizes and give you a straight answer about what is working, what is not, and what it would take to fix it.
Get a free review