Website Resizing Techniques

Unlike documents, where native applications handle resizing, web content requires careful consideration to remain usable when zoomed. Test resizing by using Cmd/Ctrl + and Cmd/Ctrl - to zoom in and out, confirming the page remains fully usable at all sizes up to 200% zoom.

Testing for Resize

When testing, verify the following at various zoom levels:

Text Increases Proportionally

Text should scale with zoom level without obstruction or prevention.

Content Remains Visible

All content must remain readable without overlapping, disappearing, or moving off screen.

Sample text showing content overlapping other content when resized. — When resized, these two text boxes overlap and prevent reading.

Controls Remain Functional

All interactive elements (buttons, forms, links) must remain accessible and usable. Player controls zoomed into 200% where some of the buttons overlap. Mobile Breakpoints Work Properly Resizing often triggers mobile layouts (e.g., navigation converting to a hamburger menu). Test these responsive designs for keyboard accessibility and usability.

Media player controls that overlap when zoomed. — Player controls zoomed into 200% where some of the buttons overlap.

Single-Direction Scrolling Only

At zoom, users should not need to scroll both horizontally and vertically. Exceptions include content that inherently requires two-dimensional scrolling, such as maps or large data tables.