How to Check a Website on Your Phone Before Launch

To check a website on your phone before launch, open the preview link on at least one Android phone and one iPhone, ideally including an older model, and use it the way a customer would: read a page, open the menu, fill in a form, rotate the screen and load a few pages on mobile data rather than Wi-Fi. Note anything that is hard to tap, hard to read or slow, take a screenshot, and send it to the designer with the phone model and browser. That routine catches most of the problems a desktop review misses.

Why the phone check deserves its own session

Designers often work on large screens and then shrink the layout down. Mobile-first design flips that: the small screen is planned first, and extra space on bigger screens is treated as a bonus. Even when a site is built this way, real fingers, real network conditions and real keyboards behave differently from a resized browser window. Set aside time for this check rather than glancing at the site on your phone between meetings.

Thumbs, not cursors: testing tap targets

Hold the phone in one hand and work through the site with your thumb only. Watch for:

• Buttons or links so close together that you hit the wrong one.
• Small icons, such as a close button on a pop-up, that need several attempts.
• Links inside paragraphs that are only a single short word wide.
• Anything that only reacts to hovering, which a touch screen cannot do.

If you find yourself zooming in to press something, write it down. A customer will usually give up instead.

Can you read it without zooming?

Text should be readable at arm's length without pinching. Check body text, captions under images, prices and small print in the footer. Look at contrast as well: light grey text on white can look elegant on a bright monitor and almost vanish on a phone outdoors. Turn your screen brightness down and try again; that is closer to how many people browse on a bus or in daylight.

Menus, forms and the on-screen keyboard

Open and close the menu on every main page. It should open fully, scroll if it is long, and close with an obvious button. Then try each form, because forms are where phone visitors most often stop.

Field	What to look for
Phone number	A number keypad appears, not the full keyboard
Email	The keyboard shows the @ sign and does not capitalise the first letter
Date	A date picker opens and is easy to use with one thumb
Any field	The keyboard does not cover the field you are typing in or the send button
Error messages	They appear next to the problem field and are visible without scrolling

Submit at least one form for real and confirm the message arrives where it should. Also check that autofill from the phone puts the right details in the right boxes.

Images and loading on mobile data

Switch Wi-Fi off and load the homepage and a heavy page, such as a gallery, on mobile data. Notice how long the screen stays blank and whether the page jumps around as images arrive, pushing text you were about to tap. Large photos that look sharp on a desktop are often far bigger than a phone needs. If you are testing while travelling, the advice on keeping mobile data costs under control abroad is worth reading first, because image-heavy previews can use more data than expected.

Turn the phone sideways

Rotate to landscape on a few pages. Fixed headers can take up most of the screen in this position, pop-ups may become impossible to close, and videos should switch to a sensible size. Rotate back and confirm the page returns to normal without reloading.

Real devices or the browser's device view?

Desktop browsers include a device view that resizes the page to phone dimensions. It is quick and useful for spotting layout breaks, but it does not reproduce touch, the real keyboard, a slow connection or how an older phone handles heavy pages. Use it for a first pass, then confirm everything on actual phones. Borrow devices from friends or colleagues if needed: one recent Android phone, one iPhone and one phone several years old make a reasonable set. Test in the default browser on each, since that is what most people use when they tap a link in a message.

The site worked yesterday and now one phone shows a blank page. What should I check?

Clear that browser's cache or open the link in a private tab, then update the browser. Old cached files are a common cause after a designer makes changes. The same logic appears in this guide to fixing apps that keep shutting down: try the simplest cause first and change one thing at a time.

Do I need to test every page?

Test every type of page, such as the homepage, a service page, an article, a product page, the contact page and any checkout or booking steps. Pages built from the same layout usually behave alike.

Reporting what you find

A clear report saves rounds of back-and-forth. For each problem, include:

1. The page address.
2. The phone model, system version and browser.
3. What you did, step by step, and what you expected.
4. What happened instead, with a screenshot or short screen recording.
5. Whether you were on Wi-Fi or mobile data, and in portrait or landscape.

Group the list by urgency: anything that stops a purchase or an enquiry comes first, cosmetic issues last. Agencies tend to welcome this format; an Auckland website design company building a site for a local shop, for example, can act on a report like this much faster than on a message saying the site looks odd on mobile.

Once fixes are in, repeat the check on the same phones before the site goes live. A second pass usually takes less time than the first, and it confirms that a fix on one screen has not broken another.