What is responsive design?

What it means

Responsive design is a way of building web pages so the same page looks right on a phone, a tablet and a laptop. The layout stretches, shrinks and reflows to fit the screen in front of the visitor.

On a wide screen you might see three columns side by side. On a phone, those columns stack on top of each other, the menu folds into a button, and the text stays big enough to read without pinching.

The key word is “same.” You do not build a separate mobile site. You build one site that adapts.

How it works

A web page is made of HTML (the content) and CSS (the styling). Responsive design uses a few CSS tools so the styling changes with the screen size:

• Flexible layouts. Columns are sized in percentages or flexible units instead of fixed pixels, so they shrink with the screen.
• Breakpoints. These are screen widths where the layout changes, for example “below 768 pixels wide, stack the columns.” They are written as CSS rules called media queries.
• Flexible images. Images scale to fit their box. Good setups also send smaller image files to smaller screens, so phones do not download desktop-size photos.
• The viewport tag. One line in the page code tells phones to show the page at their real width instead of zooming out on a tiny desktop view.

Website builders handle most of this for you. Their templates come with breakpoints already set, and your job is to check and adjust the phone view before you publish.

Why it matters when you build a site

Your visitors are split almost evenly between phones and computers. StatCounter’s figures for the US in September 2026 show mobile at 49.1% of web page views, desktop at 48.47% and tablet at 2.42%. A site that only works well on a laptop lets down about half its audience.

Search matters too. Google announced in October 2023 that mobile-first indexing had “landed,” which means Google mainly crawls and indexes the mobile version of your site. If something is missing or broken on mobile, Google may not count it.

Speed is part of the picture. Google’s Core Web Vitals are measured separately for mobile and desktop. A “good” result means the largest element loads in 2.5 seconds or less, the page reacts to a tap in 200 ms or less, and layout shift stays at 0.1 or less. Oversized photos and layouts that jump around on a phone hurt those numbers.

Responsive layouts also help web accessibility. People who zoom in on text need a page that reflows instead of spilling off the side of the screen.

How the big builders handle it

• Squarespace. Template-led, so the responsive behavior comes from the template you pick. According to its pricing page, Basic includes a CSS editor for small style fixes, while JavaScript and the advanced code block need Core ($29 a month billed yearly, $39 billed monthly) or higher.
• Wix. A drag-and-drop editor with “1000’s of templates,” per its plans page. Its newer Harmony AI builder (January 2026) drafts a site from a prompt that you then edit visually, so check the phone view of whatever the AI produces.
• Webflow and Framer. Design-first tools aimed at designers who want pixel-level control. You shape the phone layout yourself more than you would on a template-led builder. Framer’s hosting includes image optimization and a global CDN, per its pricing page.
• WordPress (self-hosted). Your theme decides how the site responds. We build on WordPress every week, and the theme choice is the biggest single factor in how a site behaves on a phone. You also get full access to the CSS when something needs a fix.
• AI app builders. v0 generates Next.js code styled with Tailwind CSS, a CSS toolkit with built-in breakpoint classes. Lovable and Bolt also write real code. If the phone layout looks off, ask the AI to fix it, then check again on a real phone.

Common mistakes

• Only checking the desktop editor. Open the live site on your own phone before you share the link.
• Uploading photos straight from a camera. Huge files slow phones down even when the page looks fine on Wi-Fi.
• Cutting content from the mobile version. Google mostly indexes the mobile version, so text you remove there may not count.
• Tiny tap targets. Links and buttons packed close together are hard to hit with a thumb.
• Full-screen pop-ups. On a phone they cover everything and are hard to close.

Related terms

• Template vs theme: where your responsive layout comes from.
• Page builder: drag-and-drop tools that set breakpoints for you.
• SEO: why a good mobile version helps you get found.

Still choosing a platform? Our guide to choosing a website builder walks through the trade-offs.