What “responsive” means
A responsive website adapts its layout to the size of the screen it’s viewed on. Instead of building separate sites for mobile and desktop, one site rearranges itself: columns stack, images resize and navigation changes to suit the space available.
The building blocks
- Flexible layouts: widths set in proportions rather than fixed pixels, so the layout stretches and shrinks smoothly.
- Breakpoints: points at which the layout changes, for example from one column on a phone to three on a desktop.
- Flexible images: pictures that scale within their containers, served at the right size for each screen so phones don’t download desktop-sized files.
- Readable type: text sizes and line lengths that stay comfortable on every screen.
Design mobile first
Starting with the smallest screen forces clear priorities: what does a visitor most need, and in what order? It’s then much easier to add space and detail as the screen grows than to squeeze a desktop design onto a phone.
Design for fingers as well as mice
On touch screens there’s no hover and no precise cursor. Buttons and links need to be large enough to tap comfortably (around 44 pixels square is a good minimum) with enough space between them to avoid mis-taps.
Keep it fast
Mobile visitors are often on slower connections. Compressed images, modern formats and only loading what each page needs make a real difference to how quickly a site feels, and to whether people stay.
Why it matters for search
Google uses the mobile version of a website to decide how to rank it. A site that works poorly on phones is likely to be found less often, as well as frustrating the people who do find it.
Test on real devices
Browser tools are useful, but nothing replaces trying a site on real phones and tablets, with real thumbs, in real conditions.
Every website we design is responsive from the start. Read more about our website design, or get in touch.