One website, every screen. Drag a real page from phone width to laptop width and watch it rearrange itself, then learn what makes that work.
Your customers see your website on a 6-inch phone, a 10-inch tablet and a 15-inch laptop, sometimes all in the same day. A responsive website is one page that rearranges itself to fit each of those screens, instead of a separate “mobile site” or a desktop page shrunk until nobody can read it.
The easiest way to understand it is to watch it happen.
Drag the page
Below is a small bakery website. Drag the slider, or pick a device. Nothing is swapped out. It’s the same page, with the same content, laying itself out differently as it gets wider.
Fresh bread, baked every morning.
Order before 10 PM, pick up from 8 AM.
Order nowWhat just happened
Columns collapsed into one. On a laptop, the headline and the photo sit side by side and the products go three to a row. On a phone there is only room for one thing at a time, so everything stacks in reading order.
The menu folded away. Four links don’t fit across a phone, so they hide behind a menu button. On a wide screen there is room, so they come back into the bar.
Text changed size. The headline is big on a laptop and smaller on a phone, so it still fits in a line or two.
Nothing scrolled sideways. That’s the rule a responsive page never breaks. Sideways scrolling on a phone is the clearest sign a site was built for desktop only.
How it’s built
Designers pick a few breakpoints: widths where the layout changes. The bakery above has two, around 576 and 768 pixels. Between them the page stretches smoothly.
The code says things like “when there’s at least this much room, put these side by side”. Modern CSS can even ask how much room a single section has rather than the whole screen, which is what makes the bakery mock-up work inside this article.
Design for the phone first
More and more visits start on a phone, so we design the phone layout first and then add to it as the screen gets bigger. It keeps the important things first and the page light. Things to check on your own site:
- Can you read every word without zooming?
- Are buttons big enough to tap with a thumb (about 44 pixels or more)?
- Does anything scroll sideways?
- Do phone numbers start a call when tapped?
- Does the page load quickly on mobile data? (Try our page weight playground.)
Every site we build is responsive from the first sketch. If yours fails any of the checks above, let’s talk.