This tool will change how you test your websites

Most visitors to a small-business site arrive on a phone. Yet most sites are designed, reviewed and approved on a 27-inch desktop screen. That is where cut-off banners, off-screen buttons and untappable menus are born.

The problem with Chrome's responsive mode

Chrome's developer tools already let you simulate a mobile screen. It is fine for checking a width, but you lose the real proportions: the address bar, the thumb zone, the notch. And switching devices means reopening a menu every time.

What a device-simulation extension does

An extension like Mobile Simulator shows your site inside a frame that reproduces the device: recent iPhone, Galaxy, iPad, and fifty-odd others. You move from one model to the next in a click, rotate the screen, take a screenshot.

In practice, it is good for three things:

• checking a redesign on the five most common devices in a few minutes
• showing a client what their page will look like on their own phone, before publishing
• producing clean screenshots for a presentation or a quote

What it does not replace

A simulation is still a simulation. It reproduces the screen size, not the hardware. Three things escape it:

Real speed. Your computer loads the page on fibre. A customer on 4G in a basement does not. For that, you need a performance test or a real phone on mobile data.

Touch. A button can look clickable in the frame and turn out to be too small for a thumb.

Mobile browser quirks. Safari on iOS has behaviours of its own that simulating inside Chrome does not always reproduce.

The routine to adopt before every launch

1. Check the home page and the contact page at three sizes: small phone, large phone, tablet.
2. Test the menu and the form — they are the first things to break.
3. Open the page on your own phone, on mobile data, for the speed test.

Ten minutes of checking avoids the week where nobody can reach you because the "Contact us" button sits off the edge of the screen on iPhone.