K2.01.1continuous layout under window resizedesignresearch

Windows can be resized freely, so layout must stay usable at every size

Aliases: free resize · liquid window layout · continuous usability

What it is

A desktop window has no official design width. Anyone can drag an edge to an arbitrary pixel, and every stop along that edge is legal. Continuous usability means the layout still lets the current task finish at every width and height: controls remain findable, text remains readable, the primary action is not clipped. Passing a handful of common resolutions is not the claim. Every frame during the drag has to remain a working interface.

This entry is only about the in-between sizes. The two extremes of very narrow and very wide windows are a separate problem, as is whether size is remembered after quit.

Why it happens

The window manager hands size to the user, not to the mockup. Toolbars, sidebars, columns, and status bars compete for the same client area; dragging rewrites all of their constraints at once. If the layout recomputes only at a few breakpoints, the gaps clip, overlap, or overflow without a way to scroll—the user moves a continuous edge, the app answers with discrete steps.

Failure is not only “too narrow.” A horizontal scrollbar covering the main button halfway through a drag, a sidebar crushing the content pane to a slit, a table whose locked columns push the needed one off-canvas: all are the same mistake. The app treated one width as the default world and every other width as an exception. Desktop has no default world. The previous app, a snapped split, and the user’s font scaling all rewrite the client area before layout runs.

Studying it

Combine field studies of window management with controlled resize tasks. Observational work in the Hutchings and Stasko line records which sizes real desktops actually take and how often people drag. In the lab, pin the same task to several random widths and compare layout strategies—reflow, clip, uniform scale, internal scroll.

Independent variables: window width and height, layout strategy, whether internal scrolling is allowed. Dependent variables: task completion, count of clipped or overlapping essential controls, time to the primary action, a judgment of “still usable.”

Do not accept only 1280 and 1920. The holes on the continuous axis are exactly where people stop. Lab prompts that say “please drag to this width” inflate resize frequency; in the field many people rarely drag, but when they do, breakage is immediate.

Where it stops holding

Fullscreen games, slideshow modes, and fixed-aspect authoring viewports take their size from the content, not the user; continuous resize is not the goal. Tiling window managers snap to a small set of slots, discretizing the axis, but the slot catalog is still large enough that one width is not enough. A web app sits inside browser chrome, so the real client area is narrower than the “common width” the layout assumed. A touch-notebook in tablet posture may lock the window maximized and hide the constraint; desktop posture brings it back.

Applying it

  • Put primary-path controls in a region that can shrink; do not pin them to absolute coordinates. The essential action must remain findable or scrollable at every width.
  • Keep the stretches between breakpoints working: no unscrollable clipping, overlapping panels, or a submit control pushed off-canvas while the user is still dragging.
  • Verify by dragging from a smallest reasonable width to the largest, stopping every 80–100 pixels, and completing one primary task. Any stop where the main action is missing or reachable only by horizontal scroll has failed continuous usability.

Related

  • Within the group: K2.01.2 Extremely narrow and extremely wide windows both need handling · K2.01.3 Window state must be restored after a restart
  • Adjacent: F2.10 Responsive breakpoints · F2.11 Fluid and adaptive layout · K2.02 Multiple Displays
  • Search terms: continuous window resize · liquid layout · window management

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/K2.01.1