Zooming to Two Hundred Percent

The most common adjustment nobody tests

Enlarging a page is the ordinary response to text being too small, and a large number of people do it on every site they visit.

It is not a specialist accessibility setting at all; it is two keystrokes that nearly everybody over about forty-five discovers eventually.

So a site that breaks at higher zoom is breaking for a wide and growing share of its visitors.

Almost nobody ever tests it, because designers and developers work at a hundred per cent on large monitors.

The test

• Press control and plus twice, or command on a Mac.
• Read the page from top to bottom.
• Check nothing is cut off.
• Check no sideways scrolling appears.
• Open the menu at that size.
• Complete the form.

The fourth is the definitive one. Content should reflow into a narrower column rather than requiring you to scroll left and right to read each line, which is what makes a page unusable rather than merely awkward.

What usually breaks

Predictably, and in the same few places.

Fixed-height containers, where text overflows and is clipped rather than pushing the box taller.

Navigation that overlaps itself or disappears entirely.

A sticky header that grows until it occupies most of the screen.

Two columns that stay side by side and squeeze rather than stacking.

And buttons whose labels no longer fit inside them.

All five are visible in the first thirty seconds of looking.

A worked example

A business zoomed their own site to two hundred per cent for the first time.

The header grew to fill three quarters of the screen and stayed there, since it was set to stick to the top.

Reading the page meant scrolling through a small strip below it.

Their developer changed the header to stop sticking at higher zoom levels, which took about fifteen minutes.

They also found their telephone number was inside a fixed-width box and had been cut in half.

Neither problem was visible at normal size and both had existed since the site was built.

Zoom and text-only enlargement differ

Worth knowing, since they are separate settings.

Page zoom enlarges everything together, which is what most people use and what the test above covers.

Some browsers also enlarge only the text, leaving layout boxes at their original size, which breaks sites more aggressively.

A site handling page zoom well usually handles the other reasonably, so testing the common one first is the right order.

Do not go looking for the second until the first one passes.

Fixing page zoom generally fixes most of the text-only case anyway, so the order is doing the work rather than avoiding it.

The mobile layout usually saves you

Which is the encouraging part.

A site built to work on a phone already knows how to arrange itself in a narrow column, and high zoom on a desktop produces a similar situation.

So a properly responsive site frequently passes this test without anybody having thought about it.

The sites that fail are the ones with fixed widths, fixed heights, or a desktop layout that was never made flexible.

That means this test is also a useful check on how well the site actually works on a phone.

Check the phone version too

Since people enlarge text there as well.

Phones have a system setting for larger text, and a good share of people have it turned up.

A site that ignores it, or breaks when it is on, fails for those people on every page.

Turn the setting up on your own phone and look at your site, then turn it back afterwards.

The setting sits under display or accessibility depending on the phone, and takes about twenty seconds to find.

That takes two minutes and tests a condition a large number of your visitors are permanently in.

Somebody who turned that setting up two years ago has no intention of turning it down for your site.

Do not disable zoom

Which some sites still do and which is worth checking for.

A setting exists that prevents pinching to zoom on a phone, and it was widely copied years ago to stop layouts being disturbed.

It removes the ability to enlarge anything, which is the one adjustment people most rely on.

Try pinching to zoom on your own site on a phone, and if nothing happens, ask for it to be enabled.

That is a one-line change and it is entirely indefensible to leave in place.

It also tells you what your text size should be

A useful side effect of running the test at all.

If your body text only becomes comfortable at a hundred and fifty per cent, it is too small by default and everybody is straining slightly rather than only some people.

The zoom test is the fastest way to notice that, because you are reading the page properly at each size rather than glancing at it.

Increasing the default body size by a couple of pixels is one of the cheapest improvements available and helps every visitor.

Sixteen pixels is a sensible minimum for body text, and a good deal of small business content still sits below it for no reason anybody actually chose.

The counter-case

Perfection at every zoom level is unrealistic.

Some minor awkwardness at four hundred per cent is acceptable, and chasing it produces diminishing returns quickly.

Complex tables and interactive tools also genuinely struggle at high zoom in ways that are hard to solve without simplifying them.

And a site that is already fine at two hundred per cent has met the requirement without any further work.

Test it, record the result, and move on to something that failed.

Zoom to two hundred per cent, read the page, complete the form, check pinch-to-zoom works, and fix what is cut off.

The two minutes

1. Press control and plus twice.
2. Read the page through.
3. Look for sideways scrolling.
4. Open the menu.
5. Complete the form.
6. Try pinching to zoom on a phone.
7. Turn up the phone text size.

Step three is the pass or fail, since text reflowing into a narrow column is usable and text requiring you to scroll left and right for every line is not.

The related question of default size is covered in text somebody can read without zooming.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.