Our website looks bad on a phone

Check your website on a phone

1. Open it on your own phone

   Use mobile data, not office Wi-Fi, and look at the home page and one inner page.

2. Try to read without zooming

   Body text should be readable at arm's length. If you must pinch to zoom, the text is too small.

3. Scroll down, then sideways

   The page should move only up and down. Sideways movement means something is wider than the screen.

4. Tap every button and link

   Each one should be easy to hit with a thumb and not too close to the next. Google's guidance is at least 48 by 48 pixels with space around it.

5. Use a second phone

   An older or smaller phone shows problems a new one hides.

Why does my website look bad on mobile?

• No mobile layout. The page is a shrunken copy of the computer version, so everything is tiny.
• Text that is too small. Body text below about 16 pixels is hard to read on a phone.
• Fixed-width pieces. A table, banner, video or form wider than the screen forces sideways scrolling.
• Tiny or crowded buttons. Links packed together lead to mis-taps.
• A menu that does not collapse. A long computer menu takes over the screen.
• Heavy images. Photos that are slow to load on mobile data. See slow websites.

Fixes in order of effect

• Make the layout fit any screen width, with no sideways scrolling
• Set readable text sizes and enough space between lines
• Make buttons and links large enough for a thumb, with space between them
• Collapse the menu into one tap and keep call and WhatsApp buttons in reach
• Resize images for phones, then test on real phones and show you the result

If the site was built as a computer-only page, the lasting fix is usually a website redesign rather than patching each page.