How to make a website mobile friendly: 10 practical fixes

What “mobile friendly” actually means

A page is mobile friendly when someone on a phone can read it, move around it and do what they came for (call you, book, buy, find your address) without pinching, zooming or scrolling sideways. Many visitors to small-business sites arrive on a phone, often in a hurry, so the phone view is frequently the first impression, not an afterthought.

Search engines also look at the mobile version of a page when deciding how to rank it, so a site that’s awkward on phones can be held back in results too.

1. Set the viewport

The viewport tag tells phones to show the page at the device’s real width instead of shrinking a desktop-sized page to fit. Without it, a phone shows a tiny version of the whole page and visitors have to zoom.

In the head of each page, there should be a viewport meta tag with the settings width=device-width, initial-scale=1. Most modern builders and themes add it for you; if your site is hand-made or old, check the page source. Don’t add settings that stop people zooming; some visitors need to.

2. Use a responsive layout

A responsive layout rearranges itself to fit the screen. On a wide screen you might have three columns; on a phone, those become one column stacked top to bottom.

• Use flexible widths (percentages, or layouts that wrap) rather than fixed pixel widths.
• Use CSS media queries to change the layout at sensible widths.
• Design for the smallest screen first, then add columns as space allows. It’s easier than squeezing a desktop design down.
• Watch for anything with a fixed width wider than a phone: tables, embedded videos, code snippets, long words and wide images. These cause sideways scrolling.

3. Make text readable without zooming

• Keep body text at around 16 pixels or larger. Smaller text forces zooming.
• Keep lines a comfortable length; on a phone that happens naturally, but avoid tiny side margins that push text to the very edge.
• Give lines enough spacing (line height around 1.5 for body text is a common starting point).
• Make sure text contrasts strongly with its background, because phones are often used outdoors in bright light.

Form fields are worth special attention: on some phones, tapping a field with text smaller than 16 pixels makes the browser zoom in, which is jarring.

4. Make buttons and links easy to tap

Fingers are much less precise than a mouse pointer. Common design guidelines suggest tap targets of roughly 44 to 48 pixels in height and width, with space between them so people don’t hit the wrong one.

• Make buttons full-width or close to it on phones.
• Space out links in menus and footers.
• Don’t rely on hover effects; there’s no hover on a touchscreen.
• Make phone numbers tappable so they open the dialler, and addresses tappable so they open a map.

5. Fit images to the screen

• Images should never be wider than their container. Setting a maximum width of 100% on images stops them breaking the layout.
• Serve smaller image files to smaller screens, using responsive image settings (several sizes of the same picture, with the browser choosing the best).
• Compress images and use modern formats where your setup allows; a large photo straight from a camera can be many times bigger than it needs to be.
• Check that important parts of a picture, like faces or text in a banner, aren’t cut off when the image is cropped for a narrow screen.

6. Simplify navigation

A desktop menu with eight items doesn’t fit across a phone. Common solutions:

• a menu button that opens the full list,
• the two or three most important links kept visible, with the rest in the menu,
• a clear call to action (Call, Book, Get a quote) that stays easy to reach.

Keep the menu short. If a page isn’t worth a place in the phone menu, ask whether it’s worth having at all.

7. Make forms easy on a phone

• Ask for as little as possible.
• Use the right field types, so phones show the number pad for phone numbers and the email keyboard for email addresses.
• Put labels above fields, not inside them, so they don’t disappear when someone starts typing.
• Make the submit button large and obvious.
• Show errors next to the field that needs fixing, in plain words.

8. Keep it fast

Phones are often on slower or patchy connections. A page that feels fine on office Wi-Fi can crawl on a train.

• Compress and resize images (see step 5).
• Remove scripts, fonts and embeds you don’t need.
• Load videos and maps only when they’re needed, or link to them instead of embedding.
• Test with your browser’s network throttling turned on to see the page as a slow connection would.

9. Don’t cover the page

Pop-ups, cookie banners, chat bubbles and sticky headers take up a lot more of a phone screen than a desktop one.

• Keep sticky headers short.
• Make banners easy to dismiss with a large close button.
• Avoid pop-ups that appear as soon as the page opens and hide the content people came for.

10. Test on real phones

A narrow browser window or your browser’s device mode is a good first check, and it’s quick. But it isn’t the same as a real phone. Real devices show problems the simulators miss: how the menu feels under a thumb, how text looks in sunlight, whether the on-screen keyboard covers a form, how the page behaves on a slow connection.

A simple routine:

1. Check every changed page in your browser’s device mode at a few widths.
2. Publish to a private staging link.
3. Open that link on at least one iPhone and one Android phone, in portrait and landscape.
4. Tap through the menu, the main buttons and any form.
5. Fix, and check again.

There’s more on why that middle step matters in why check a staging version before you publish.

A mobile-friendly checklist

• Viewport set to the device width, and zooming allowed.
• No sideways scrolling on any page.
• Layout reflows to one column on phones.
• Body text around 16 pixels or larger, with good contrast.
• Buttons and links large and well spaced.
• Phone numbers and addresses tappable.
• Images fit the screen and aren’t oversized.
• Short, clear navigation with a visible call to action.
• Forms use the right keyboards and have big buttons.
• Nothing covers the content when the page opens.
• Tested on real phones, not just a narrow window.

Checking phone layouts in Devdwell

In Devdwell, the live preview beside your site can be switched between desktop, tablet and phone sizes while you edit, so you see the phone layout as you change it. Then you can publish to a private staging link and open it on your own phone before anything goes live. See editing and publishing.

Questions