What a responsive website is and how to check if yours is one

A responsive website changes its layout to fit the screen it's shown on. On a laptop you might see three columns side by side. On a phone the same content stacks into one column, the menu folds into a button, and the text stays readable without zooming. It's the same site, at the same address, with the same content, arranged for each screen.

Why it matters more than it used to

In September 2026, phones accounted for almost 59% of web page views worldwide, according to StatCounter, against about 39% for computers and under 2% for tablets. Your own split may be different, and tools like Google Analytics show it for your site, but across the web as a whole, phones are now the majority.

Google looks at the phone version first, too. Its documentation says it uses "the mobile version of a site's content, crawled with the smartphone agent, for indexing and ranking". The switch was completed in July 2024, and Google said then that a site whose content can't be reached on a mobile device at all would no longer be indexed. Of the ways to build for phones, it recommends responsive design, "because it's the easiest design pattern to implement and maintain".

Before responsive design became normal, many businesses ran a separate mobile site, often at an address like m.example.com, with its own pages to keep up to date. A responsive site has one set of pages, one address to share and one place to edit.

How it works, briefly

Three things do most of the work. The first is a single line in the page's code, the viewport tag, which tells the phone's browser to use the real width of the screen. Without it, mobile browsers lay the page out as if the screen were much wider, often 980 pixels, and then shrink the result to fit. That's why some old sites appear tiny and you have to pinch to read them.

The second is a flexible layout, with widths set as a share of the screen instead of a fixed number of pixels, so a column can take a third of a laptop screen and the full width of a phone. The third is media queries: rules in the site's styles that change the layout at certain screen widths. Images follow the same idea. They shrink with the space around them instead of spilling out of it, and a well-built site sends smaller files to smaller screens.

Responsive works in the other direction as well. On a very wide monitor, a page that stretches its text across the whole screen is hard to read, because the eye loses its place between the end of one line and the start of the next. Good sites cap the width of the text and let the background fill the rest.

How to check your own site

Start with the simplest test. On a computer, open your site and slowly drag the edge of the browser window to make it narrower. A responsive site rearranges itself as you go. If parts get cut off, a sideways scrollbar appears or the text is squeezed into a thin strip, something isn't adapting.

For a closer look, use the device mode built into Chrome. Press F12 to open the developer tools, then click the small phone and tablet icon at the top, or press Ctrl+Shift+M (Cmd+Shift+M on a Mac). You can choose common phone models or type in any width. Google calls it "a first-order approximation" of a real phone: the layout will be right, but it won't tell you how an older phone copes with the page.

So finish on real phones. Use your own and, if you can, borrow one that's older or has a smaller screen. Go through the pages people use most: the home page, a product or service page, the contact form and the checkout, if you have one.

Ideally, try both an iPhone and an Android phone. They use different browser engines, Safari's WebKit and Chrome's Blink, so a page can look fine on one and break on the other. Turn the phone sideways at least once, too. Some layouts that work upright fall apart in landscape.

Older articles may send you to Google's Mobile-Friendly Test. Google retired it in December 2023, together with the Mobile Usability report in Search Console. Lighthouse, built into Chrome, and PageSpeed Insights cover much of the same ground now.

What to look for on the phone

Sideways scrolling comes first. On a phone you should only ever need to scroll down. If the page slides sideways, something is wider than the screen, usually an image, a table or an embedded video.

Then the text. You should be able to read it without zooming. If you have to pinch, the text is too small or the page is missing the viewport tag.

Check that buttons and links are easy to hit with a thumb. The web accessibility guidelines, WCAG 2.2, set a minimum of 24 by 24 pixels for anything you tap, or enough empty space around smaller targets. Links crammed together in a footer or a menu are the usual problem.

Fill in your own contact form on the phone. Make sure the fields don't disappear behind the keyboard, that the email field brings up a keyboard with the @ sign, and that you can reach the send button.

Watch for pop-ups. A window that covers the whole page is far more annoying on a phone, where closing it means finding a tiny X. Google advises against overlays that hide the entire page and suggests banners instead, with an exception for ones the law requires, like age checks.

Finally, open the menu, tap through its items and close it again, and look at images and videos on the way. They should fit the screen without being stretched or cut off in odd places.

If it isn't responsive

If your site runs on a website builder or a content management system like WordPress, look at the theme or template first. Many current themes are responsive, and switching or updating yours may solve most of it.

Small problems, like one table or one image that's too wide, are usually quick to fix. If the whole site was built years ago for computers only, adapting it page by page can take longer than rebuilding the layout. That's a question for a developer, and the list of problems you found on your phone is the best thing to bring along.