For most business websites, the majority of first visits now happen on a phone. Yet the site is usually designed, reviewed and approved on a laptop, and the phone version is checked last, if at all, by shrinking a browser window.

Shrinking a window is useful but it is not the same as holding a phone. This checklist covers what to test on a real device before launch, and why each item matters.

Start with the setup

Check the viewport tag. Every page needs <meta name="viewport" content="width=device-width, initial-scale=1"> in its head. Without it, phones show a shrunk desktop page. If you see tiny text and a zoomed-out layout, this is why.

Use real devices. Test on at least one iPhone and one Android phone, ideally an older mid-range one, because that is closer to what many visitors use. Browser emulation is a good first filter, but it does not reproduce touch, the on-screen keyboard or real performance.

Layout

  • Nothing scrolls sideways. A single element wider than the screen, often an image or a table, breaks the experience. If you can drag the page left and right, find the culprit.
  • The first screen does its job. The headline and the main action should be visible without scrolling. Check on a small phone, not just a large one.
  • Content order makes sense in one column. When columns stack, the sequence of content changes. Make sure the most important thing still comes first.
  • Spacing holds up. Margins that look generous on a laptop can leave cramped text on a narrow screen, and the reverse.

Text

  • Body text is at least 16 pixels. Smaller text forces pinch zoom.
  • Lines are a sensible length. Around 40 to 75 characters is comfortable.
  • Headings do not break badly. Long words and long headings can overflow or wrap awkwardly. Test with the longest title you have.
  • Contrast survives sunlight. Pale grey text that looks elegant indoors disappears outdoors. Aim for the same contrast standard as on a desktop, and add margin for glare.

Taps

  • Targets are large enough. Aim for about 44 pixels square for buttons and links, with space between them.
  • Nothing important depends on hover. There is no hover on a phone, so menus and tooltips that only appear on hover are unreachable.
  • Fixed elements do not cover content. Sticky headers, cookie banners and chat widgets can swallow a quarter of a small screen. Check they can be dismissed and do not hide buttons.

Forms

Forms are where phones fail most often.

  • Use the right input types. An email field should open the email keyboard, a phone field the number pad. Set type, inputmode and autocomplete appropriately so the phone can suggest saved details.
  • Input text is at least 16 pixels. On iPhones, a smaller font size makes the page zoom in whenever a field is focused, and it often does not zoom back.
  • The keyboard does not hide the field. Tap into the last field on a short screen and check you can still see what you are typing and the submit button.
  • Errors are visible. An error shown above the form, off-screen, looks like nothing happened.

Images and media

  • Serve images at sensible sizes. A 3,000 pixel wide photo on a phone wastes data and time. Use responsive image sizes or a service that resizes them.
  • Reserve space for images. Give images width and height so the page does not jump as they load.
  • Videos do not autoplay with sound, and do not download a large file over mobile data before being asked.

Speed

Test on a throttled connection, not your office wifi. In Chrome's developer tools you can slow the network and processor to approximate a mid-range phone. Check that the main content appears within about two and a half seconds, that the page does not shift as it loads, and that buttons respond promptly when tapped.

Common traps

  • Full-height sections that use the wrong height. On phones, the browser bars appear and disappear, so a section sized to the screen can be cut off. Modern CSS units such as dvh handle this better than vh.
  • Menus that cannot be closed or that trap keyboard focus.
  • Pop-ups that cover the whole screen. Search engines treat intrusive pop-ups on mobile as a problem too.
  • Phone numbers and addresses that are not links. Make them tappable.

A fast version

If you only have ten minutes, open the site on your own phone and do this: read the first screen, tap the main action, open the menu, fill in and submit the contact form, rotate the screen, then load the site on mobile data instead of wifi. Write down everything that annoys you. Those notes are your fix list.