A responsive website only exists in one version. But the layout reacts to the width of the screen. On a computer, three columns sit side by side; on a phone, they stack on top of each other. Images get smaller and the menu folds up into an icon. Technically, this is handled by media queries in the CSS, meaning rules along the lines of ‘from this width upwards, show the layout like this’.
Good websites today are built ‘mobile first’. That means the phone view is planned first, and the larger screens after that. It forces you to focus on what really matters. On a small screen, there's no room for anything superfluous.
For a business, this is no minor detail. Lots of people search on their phones while out and about for opening hours, a phone number or directions. Google also uses the mobile version of a website for indexing and ranking. So anything that's missing or doesn't work well on a phone hurts you in search too.
Here's what to look out for:
- Readable text without zooming and with enough line spacing.
- Large tap targets: Buttons and links need space between them so nobody taps the wrong one.
- No sideways scrolling: Nothing should stick out past the edge of the screen, not even tables.
- Important things first: Phone number, address and enquiry button are quick to reach.
- Test on real devices: The preview in your browser is no substitute for testing on an actual phone.
We plan every website for phones first, and only then for large screens.
A bakery in Sursee has an older website that was only built for computers. On a phone, the whole page appears tiny. Anyone wanting to order a Sunday plaited loaf has to zoom in and scroll sideways. The form is almost impossible to hit. After switching to a responsive layout, the opening hours and phone number sit right at the top on a phone. One tap on the number starts a call. The order form fits the width of the screen and has large fields. On a computer, the page still looks tidy, with images and text side by side.