What Is Responsive Web Design? A Plain Definition

In short

Responsive design is one website, one set of code, that rearranges its layout to fit whatever screen it is shown on.
It works through three techniques: fluid layouts measured in percentages, breakpoints where the layout changes, and images that scale.
You can check a site in thirty seconds by dragging a browser window narrower and watching what happens.
Responsive is the floor. Mobile-friendly adds tap targets, speed and thumb reach, and that is where most sites still fail.
The common failures are a fixed-width element, an untested breakpoint, or a template that was responsive until someone edited it.

The definition

In 2010 the typical business website on a phone looked like a postage stamp. The whole desktop page was shrunk to fit a three-inch screen, and the visitor zoomed in, dragged around, zoomed out, and gave up. The site had been designed for one screen, and the world had suddenly acquired hundreds of others.

Responsive web design is the answer that won. It is a single website, with a single set of code and a single address, that measures the screen it is being shown on and rearranges its layout to fit. Three columns on a wide monitor become one column on a phone. A menu across the top becomes a button. A photo that filled a third of the desktop screen fills the whole width of the phone. The words are the same. The page is the same. Only the arrangement changes, and it changes on its own.

The alternative it replaced was the separate mobile site, the "m-dot" site, a second, smaller website at m.yourbusiness.com that phones were redirected to. Two sites meant two sets of content to keep in sync, two things to break, and a search engine that had to guess which one to show. Responsive design made that go away, and it is now the assumption behind every modern site, every search engine and every page builder. If a site built after about 2015 is not responsive, something went wrong.

One site, every screen. The layout bends. The content does not.

How it works: three techniques

Responsive design is not a product or a plugin. It is a way of writing the layout so that it responds to the width of the screen. Three techniques do most of the work, and knowing their names lets you follow a conversation with a developer.

1
Fluid layouts.
Widths are written as percentages of the screen rather than as fixed pixel counts. A column that is 33% wide is a third of any screen. A column that is 400 pixels wide is fine on a laptop and wider than the whole phone.
2
Breakpoints.
Rules that say: below this width, change the layout. Below about 1,024 pixels, drop from three columns to two. Below about 768, drop to one and turn the menu into a button. The page checks its own width and applies the right set of rules. These widths are conventions, not laws; a good developer sets them where the design actually breaks.
3
Flexible images.
Images are told never to be wider than the box they sit in, and the browser is offered several sizes of the same image so a phone downloads a small one and a monitor downloads a large one. This is also the technique that most affects speed, and the reason the Core Web Vitals guide spends so long on images.

What typically changes at each width

Screen	Typical width	What the layout does
Phone, portrait	320–480 px	One column, stacked sections, menu behind a button, phone number as a tappable bar
Phone, landscape / small tablet	480–768 px	Still one column for text; images and cards may sit two across
Tablet / small laptop	768–1,024 px	Two columns, menu often still collapsed, sidebars move below content
Laptop / desktop	1,024–1,440 px	Full layout, visible menu, three or four columns where the design calls for it
Wide monitor	1,440 px and up	Content capped at a readable width and centered, rather than stretched edge to edge

Ranges are conventional. A well-built site sets its breakpoints where its own design needs them, not at round numbers.

One more piece makes the others work: a single line in the page's code, the viewport tag, that tells a phone to render the page at its real width instead of pretending to be a desktop and shrinking. Its absence is why some old sites still show the postage stamp.

How to check whether a site is responsive

The thirty-second test

On a laptop, open the site and drag the browser window narrower, slowly, from full width to as narrow as it goes. A responsive site reflows in steps. A non-responsive one either shrinks as a whole or grows a horizontal scrollbar.
At the narrowest width, look for anything cut off on the right: a table, an image, a form, a map. If you can scroll sideways, something has a fixed width.
Open the site on a real phone. Text should be readable without zooming. If you instinctively pinch, it failed.
Tap the menu. It should open as a list you can tap with a thumb, not a row of tiny links.
Turn the phone sideways. The layout should adapt again without breaking.
Run the free site audit, which checks the viewport tag, tap target sizes and text legibility alongside speed.

What mobile-friendly adds beyond responsive

Here is where most sites that "pass" still fail. Responsive means the layout fits the screen. Mobile-friendly means the site is good to use on a phone, which is a higher bar, and the two are confused constantly by people selling templates.

A site can reflow perfectly into one column and still be miserable on a phone. The phone number is text you cannot tap. The buttons are 30 pixels tall and 4 pixels apart, so every third tap hits the wrong one. The form has eleven fields and a date picker designed for a mouse. The most important button is at the top of the screen where a thumb cannot reach it on a large phone. The page took six seconds to load because it sent the phone the same 3 MB hero image it sends the monitor. Every one of those is a mobile-friendliness failure on a fully responsive site.

Responsive is a property of the layout. Mobile-friendly is a property of the experience, and it is built from choices the layout does not make for you: tap targets of at least 44 pixels, phone numbers as links, forms cut to the fields that matter, the main action within thumb reach, and a page weight a cellular connection can handle. Speed is the biggest of these, and the speed guide is the place to start. The mobile website guide is the how-to for the rest, and the mobile design best practices spoke is the checklist. This guide stops at the definition on purpose; those two go on from here.

44 px

Minimum tap target size a thumb can hit reliably

1 col

Layout a phone should get below about 768 pixels

2 s

Where a phone visitor's patience starts to run out

Common ways responsive sites break

Most responsive failures are not design decisions. They are small mistakes that nobody tested on a phone. The templates sold as "fully responsive" were responsive on the day they shipped; three years of edits later, they often are not. Here are the ones that show up most.

What you see on a phone	What usually caused it
Sideways scrolling, content cut off on the right	One element with a fixed pixel width: a table, an embedded map, an image pasted at full size
Text too small to read without zooming	The viewport tag is missing, or a font size was set in pixels for a desktop
A giant hero image with a tiny headline	The desktop layout was scaled instead of rearranged; no breakpoint for the hero
Buttons overlapping or stacked oddly	A breakpoint that was never checked after an edit
Menu that will not open, or opens behind content	A script conflict, often from a plugin update
Pop-up that cannot be closed	The close button sits outside the phone's screen
Slow load, then a layout jump	Images without dimensions, so the page reflows as each one arrives

All of these are repairable without a redesign, and most take a developer an hour or two once found. The mobile responsive fixes service handles exactly this list at a fixed price, and the layout repair service covers the rest. If a site has more than a few of them, the honest question becomes whether the template underneath is worth patching, which the redesign guide helps you answer.

Free · takes a minute

Find out what your site is actually doing.

A free audit scores your site on speed, mobile, SEO and security, and lists the fixes in order of what they are worth. Delivered as a PDF to your inbox.

Run the free audit Or just ask a person

Go deeper

Free · No obligation

Want a plain-language answer to a technical question?

Tell us what you have been told, or what you are paying for, and a developer will explain it in words you can repeat to your partner. Free, no jargon, no pitch.

Which of these sounds like you? (pick any)

Questions people ask

Straight answers

It is a single website whose layout rearranges itself to fit the screen it is shown on. Columns stack on a phone, the menu collapses into a button, and images scale to the width available. The content and address are the same on every device; only the arrangement changes.

Responsive describes the layout: it fits any screen. Mobile-friendly describes the experience: buttons big enough to tap, phone numbers that dial, short forms, fast loading, and the main action within thumb reach. A site can be responsive and still be poor to use on a phone. Every good site is both.

Drag your browser window narrower on a laptop and watch. A responsive site reflows into fewer columns in steps and never scrolls sideways. Then open it on a phone: text should be readable without zooming and the menu should open as a tappable list. A free site audit will check the technical markers as well.

It is the assumption behind every modern site and every search engine, so yes. Google indexes the mobile version of a page first, and more than half of visits to most business sites come from phones. A site that is not responsive is not really on the web as customers use it.

Yes. Google uses the mobile version of a page as the primary one for ranking, so a page that is unreadable on a phone is unreadable to Google. A single responsive site also avoids the duplicate-content problems that separate mobile sites created. The design and SEO guide covers the rest of the connection.

Often, if the site was built with reasonably clean code. A developer adds the viewport tag, converts fixed widths to flexible ones, adds breakpoints and fixes the images. If the site is a tangle of old tables and inline styles, rebuilding is usually faster and cheaper than untangling, and it gets you speed at the same time.

Where to go from here

What Is Responsive Web Design?