Open your website on a phone, then on a laptop, then on a wide desktop monitor. If it was built properly, you’re looking at the same site each time, rearranged to suit the screen. That’s responsive web design, and it has been the standard way to build websites for well over a decade.
Standard doesn’t mean it’s always done well. Plenty of sites technically respond and are still awkward to use on a phone. Knowing a little about how it works makes it much easier to tell the difference, and to ask for the right things.
What responsive web design means
Responsive web design is an approach where a single website, with one set of pages and one address, adjusts its layout to the size of the screen it’s viewed on. Columns stack, images resize, menus collapse, text reflows.
Before this became normal, businesses often had a separate mobile site at a different address. That meant two sites to update and two chances for the content to drift apart. A responsive build removes that problem.
How it works, without the jargon
Three ideas do most of the work:
- Flexible layouts. Sections are sized in proportions, not fixed widths. A three column row is “a third each” and not “400 pixels each”, so it can shrink and grow.
- Flexible images. Pictures scale to fit their container, and a well built site sends smaller image files to smaller screens so phones aren’t downloading desktop sized photos.
- Breakpoints. These are the widths at which the layout changes. Above a certain width, three columns sit side by side. Below it, they stack into one. Behind the scenes these rules are written in CSS, the language that controls how a web page looks.
Why it matters to your business
Your customers are on phones. For most business websites, a large share of visits, and often the majority, come from mobile. Check your own analytics for the exact split.
Google looks at the mobile version. Google uses mobile-first indexing, which means it mainly uses the mobile version of a page when deciding how to index and rank it. If content is missing or hidden on mobile, that’s the version being judged.
One site is cheaper to run. One set of content to update, one site to maintain and secure.
Enquiries depend on it. A form that’s fiddly on a phone, or a phone number you can’t tap, costs you leads from people who were ready to get in touch.
What good responsive web design looks like
Use this as a checklist on your own phone:
- Text is readable without pinching to zoom.
- Nothing scrolls sideways.
- Buttons and links are big enough, and far enough apart, to tap with a thumb.
- The menu is easy to open and close, and you can reach every page from it.
- Forms are short, and bring up the right keyboard: numbers for a phone field, an @ key for email.
- The phone number starts a call when tapped.
- Images are sharp but load quickly.
- The most important content comes first when columns stack. On mobile, order is everything.
- Nothing essential has been hidden to save space.
Where responsive builds go wrong
Designed for desktop, squeezed for mobile. The site was planned on a big screen and the phone layout is whatever happened when it shrank. You can tell because the stacking order makes no sense.
Only tested at three sizes. It looks fine on the designer’s phone and laptop, and breaks at the sizes in between, such as a tablet held sideways or a small laptop.
Heavy pages. The layout adapts but the phone still downloads huge images and scripts. It looks right and loads slowly.
Tables and embedded content. Price tables, maps, videos and booking widgets from other providers are frequent causes of sideways scrolling.
Pop-ups. A pop-up that’s a minor nuisance on desktop can cover the whole screen on a phone, with a close button too small to hit.
Responsive means the layout adapts. Whether it’s any good on a phone is a separate question, and the one that counts.
What to ask your developer
- Will I see mobile designs, or only desktop ones?
- Which devices and screen sizes will the site be tested on before launch?
- How are images handled for small screens?
- Is all the content available on mobile, or is some hidden?
- Can I test it on my own phone before I sign it off?
The last one matters most. Emulators and browser tools are useful, but nothing replaces holding the site in your hand.
If your current site falls short
Sometimes the fix is a set of targeted changes to the layout rules. Sometimes the site was built in a way that makes a rebuild the more sensible route. Every site we produce through website design and development is planned for phones from the start, and where the requirements are unusual, bespoke websites cover the builds that off the shelf layouts can’t.
