Skip to main content

Search your workspace

Research search stays in this browseresc to close

BenchmarkWatcher blog

Benchmarks on a small screen

The benchmark list should be the main thing you see. On a phone, a toolbar full of saved-view tools took too much space before the observations began. The workspace now puts browsing first.

· Product update

Search, filter, read

Search, Filter and the observation range stay close to the list. A compact selector changes the saved view. More holds occasional actions such as creating a view, changing its properties, sorting and exporting. Featured observations expand on request on phones, so the first benchmark value is visible sooner.

Advanced controls open in a sheet with a clear title and close action. Dismissing it keeps the selected filters and brings the list back into focus. On phones, observations use readable rows with their reported value, unit and date rather than a squeezed desktop table.

Room for the source history

A compact window shows the list or its detail view. On a wider desktop, both can remain visible, and resizing the detail pane keeps enough room to browse the list. The wider layout restores your preferred pane width.

The detail summary groups the value, observation date and cadence. Timeline charts show a small date-and-value tooltip beside the selected point. Hover or tap a line to inspect it; the arrow keys move between observations, and up or down chooses a line in a comparison. Original reporting periods remain visible.

Keyboard focus, Escape and browser Back work with the sheets and details. Saved views, watchlists and presentation preferences remain in this browser; changing the layout does not change the source observations.

The chart belongs near the observation

On a full benchmark page, the observation summary sits to the left of the chart on desktop. A phone shows the chart first and places the summary below it, so the history is visible before a long source description.

Plot style and value display use radio switches with a clear selected state. Their short transitions respect reduced motion. The visual explorer groups history, distribution and calendar views in a focused chooser. Chart settings separate the tab navigation from the scrollable controls, keeping the first setting visible.

The table keeps search, filtering and the observation range close to the results. Columns and Export say what they do, applied filters stay visible, and sorting describes the selected order.

The patterns behind the change

The layout follows established guidance on toolbar overflow, adaptive list-and-detail layouts, and accessible modal dialogs. The controls stay available while the observations get more space.

Advanced controls follow progressive disclosure. Settings tabs follow the W3C keyboard pattern, while chart modes use native radio semantics for mutually exclusive choices. These patterns guide the implementation; checks on the rendered phone and desktop journeys decide whether the result works.

Explore benchmarks →