99creatix Book a 15-minute fit call
Glossary · Web design & Shopify

responsive design

Also called mobile-friendly design

Reviewed 31 Oct 2026 By Madiha Fatima 4 min read Check it yourself: yes, free

4 min
Definition

Responsive design is a way of building a website so that one set of pages rearranges itself to fit whatever screen is looking at it: a phone, a tablet, a laptop or a wide monitor. Columns stack, menus collapse, images shrink and text stays readable, without a separate mobile site or a mobile app.

It has been the standard way to build for over a decade, and every modern theme on WordPress or Shopify is responsive by default. So when a proposal lists mobile-friendly or responsive as a feature, it is listing the floor. The real questions are how the site performs on a phone and whether it was designed for the phone first or shrunk down afterwards.

Short version: one site that fits every screen, and should be designed for the smallest first.
Why it matters for your business

Most of your visitors are on a phone.
Most sites are still checked on a desktop.

For nearly every small business, more visitors arrive on a phone than on a computer, and the ones on a phone are more likely to be ready to act: finding a dentist nearby, calling a plumber, checking a property on the way to view it. A site that is responsive in name but awkward in practice, with tiny text, buttons too close together and a menu that hides the phone number, loses exactly those people. Google also indexes the mobile version of your pages, so what the phone sees is what ranks.

Responsive is where the sales pitch stops and the work starts. Two sites can both pass a mobile-friendly test. One loads in a second and puts the booking button under the thumb; the other takes five seconds, shifts around as images arrive and needs a pinch to read. Core Web Vitals is how Google measures that difference, and how you can too, for free.

If you are commissioning a site, ask to see the phone version first, before the desktop one, and ask for it on a real phone rather than a mockup. If you are judging an existing site, pick it up and try to do the one thing a customer would.

Example

A real estate agency's listings
on a phone in a car park.

Responsive, technically

The agency's site passed every mobile test. On a phone, the listings page showed one property per screen with a large photo, then the price, then four lines of details, then a Request viewing button. A buyer parked outside a house scrolled through nine properties to find the one in front of them, then filled in a six-field form with their thumbs.

Mobile-friendly test: pass Screens to find one listing: nine Form fields to request a viewing: six
Designed for the phone

The redesign kept the same responsive theme and changed what was on it. A search by street at the top, listings as compact rows that expand on tap, the agent's number as a tap-to-call button fixed to the bottom of the screen and the viewing request cut to a name and a number. Same site, same screens, same pass on the test. The buyer in the car park now rings from the kerb.

Try it
  • Phone, narrow screen
  • Tablet, medium screen
  • Laptop, wide screen

One layout, three screens. Columns stack on the phone and sit side by side on the laptop. The number is a button on all three.

How to check it on your site

Four checks, and your own phone is the tool.

Tick each one as you go. 0 of 4 checked on your site.

  1. Pick up your phone and do the job

    Open your site on your phone from a Google search, not a bookmark, and do what a customer would: find the number, book, buy or ask. Count the taps and the pinches. If you had to zoom to read or missed a button, so does everyone.

  2. Resize the browser window

    On a computer, drag the browser window narrower until it is the width of a phone. Columns should stack and the menu should collapse into an icon. If a horizontal scrollbar appears or text runs off the edge, the layout is not responsive, whatever the proposal said. Chrome's device toolbar (right-click, Inspect, then the phone icon) does the same with named devices.

  3. Run the mobile tab in PageSpeed Insights

    Paste any page into PageSpeed Insights and read the mobile result first. The diagnostics name tap targets that are too small, text that is too small to read and content wider than the screen. Those are the responsive failures a pass on the layout test does not catch.

  4. Check the phone number works as a link

    On the phone, tap your number wherever it appears. It should open the dialler. If it is plain text or an image, the fix is a one-line change and the most valuable one on this list.

Related terms

Usually in the same sentence.

Read next

Where this shows up in practice.

Web design First impressions and attention

What a visitor decides in the first screen on a phone, and how to design for it.

 Conversion How people decide on a website

The phone-first version of persuasion: what has to be under the thumb.

 Service Web design & development

Every site is designed on the phone screen first and signed off on a real device.
Related service

Every site from web design and development is designed for the phone first and checked against Core Web Vitals before launch. Prices are on the price list, not on a call.

See the web design service
Reviewed by Madiha Fatima, founder of 99creatix

Every entry in this glossary is written and checked by the person who runs the agency, reviewed at least once a quarter and dated. Last reviewed 31 October 2026.

Spotted an error or a term we are missing? Tell us and it is fixed within the week.

Did this explain it?
Next step

Want your site checked
on a phone, by someone else?

Fifteen minutes and your web address. We will go through your site on a phone the way a customer would, show you where it loses them and tell you what the fix would cost, before you decide anything.

Book a 15-minute fit call Back to the glossary