Skip to content
Website glossary· Planning and building a site

What is responsive design?

Responsive design is building one website whose layout adapts to the screen it’s viewed on, from a small phone to a wide monitor.

Why it matters for a small business site

Your visitors arrive on phones, tablets and laptops, and a page that needs pinching and zooming on a phone is hard to use. Google also mainly looks at the mobile version of a page when deciding how it ranks (mobile-first indexing).

How to check yours

  1. Open the site on your own phone and do the main task: find a price, book, call.
  2. In Chrome, open DevTools and use the device toolbar to try several widths, down to 320 pixels.
  3. Watch for sideways scrolling, tiny text, and buttons too close together to tap.

What good looks like

Columns that stack on narrow screens, images that scale, text you can read without zooming, a menu that folds into a button, and nothing wider than the screen.

Common mistakes

  • Designing only on a desktop and checking the phone version last.
  • Hiding important content on phones instead of rearranging it.
  • Fixed-width elements, like tables or embeds, that force sideways scrolling.
  • Tap targets so small or close together that people hit the wrong one.
Put it into practice

Try it on a design of your own

SketchXFlow lays every page out phone-first, from a 320px screen up to a wide desktop, with no sideways scrolling. Try it with the brief below.

Try:
Not a page?LogoEmailVideo
Designs shared by the communitySee what people made — with the prompt behind each one →Featured onThe Design Tools