Short answer: Responsive web design means building a site so its layout fits any screen: one column on a phone, more on a computer. It rests on four pieces: the viewport tag, flexible layouts, images that shrink and media queries for the bigger changes.
What responsive web design is
MDN traces the term to Ethan Marcotte, who in 2010 described fluid grids, fluid images and media queries working together. web.dev puts it as a layout that changes to suit the device being used.
Its example is simple: one column on a phone, two on a tablet and three or four on a computer. Because screen sizes keep multiplying, web.dev says a site should adapt to any existing or future size.
If you plan a new site, our website wireframe guide shows how to sketch the phone version next to the desktop one.
The four pieces
| Piece | What it does | What web.dev recommends |
|---|---|---|
| Viewport tag | Makes the page match the phone’s width | width=device-width, initial-scale=1, and nothing that blocks zooming |
| Flexible layout | Lets rows and columns rearrange | Flexbox, grid or multicol instead of a fixed width |
| Images | Keep pictures inside the screen | A maximum width of 100%, plus width and height attributes |
| Media queries | Change the layout at chosen widths | Breakpoints chosen by the content, not by devices |
From web.dev’s “Responsive web design basics”, read November 3, 2026.
Leave the tag out and, web.dev explains, a phone lays the page out about 980 pixels wide, depending on the device, and then scales it down. The text gets too small to read without zooming.
How to choose breakpoints
A breakpoint is the width where a media query changes the layout. web.dev advises against setting them by device classes, products, brands or operating systems: the content should decide. Our WCAG reflow guide explains why your layout should also hold at 320 pixels wide.
Its method is to design for a small screen first, then widen it until the design starts to break. For text, it cites the classic advice of 70 to 80 characters per line, about 8 to 10 words in English.
It also warns against hiding content for the sole reason that it doesn’t fit on a small screen.
How to make your site responsive
- Put the viewport tag (width=device-width, initial-scale=1) in the head, and leave zoom alone.
- Build the small-screen layout first.
- Widen the window until something looks wrong, and add a breakpoint there.
- Use flexbox or grid for rows and columns, not fixed widths.
- Give images a maximum width of 100%, plus width and height attributes so the browser saves their space.
- Keep long text near 70 to 80 characters per line on wide screens.
- Review your breakpoints with Chrome DevTools in device mode, then on a real phone.
Our mobile-friendly test guide covers how to check pages now that Google’s own test is gone.
Our own breakpoints
On November 3, 2026, we opened our site in a browser at several widths to see where its layout changes.
The tables in our guides use the same 600-pixel breakpoint as web.dev’s example. At 600 pixels wide, each row turns into a card with its labels; at 601, it’s a table again.
The header has its own breakpoint, set by its content. The full menu needs room, so at 1,140 pixels and below the header shows a Menu button, and from 1,141 it shows every link. Our hamburger menu guide covers when that button makes sense.
Checks before you publish
- Every page has the viewport tag, and zooming works.
- No page scrolls sideways on a phone.
- No image spills past the edge of the screen.
- Each breakpoint exists because the content needed it.
- Nothing important is hidden on small screens.
- The pages were checked on a real phone.
RememberLet the content set the breakpoints: start small, widen the screen and change the layout only where it breaks.
If you want a site that adapts to every screen, our web design service can build it with you.
Quick answers about responsive web design
What is responsive web design?
It’s a way of building a site so its layout changes to fit the screen it’s viewed on. MDN traces the term to Ethan Marcotte in 2010: fluid grids, fluid images and media queries.
What breakpoints should I use?
The ones your content needs. web.dev advises against breakpoints based on device classes, products or brands. Design for a small screen first, widen it, and add a breakpoint where the layout starts to look wrong.
What is a media query?
A filter on CSS styles. web.dev describes media queries as filters that change styles based on the device, such as its width, height, orientation or whether it uses a touchscreen.
Why does my site scroll sideways on a phone?
Usually something spills past the edge of the screen, often an image with a fixed width. web.dev recommends giving images a maximum width of 100% so they shrink into the space available.
How do I check a responsive design?
Resize the browser, or use device mode in Chrome DevTools, which can show your media queries as colored bars above the page. Then check the real pages on a phone too.
Sources
Read on November 3, 2026. web.dev: Responsive web design basics. MDN Web Docs: Responsive web design. Our own case: our home page and one guide in a browser at several widths, November 3, 2026.