Skip to content

Mobile · review only

Solutions by Industry on a phone

The approved page stacks five industries on a phone. The proposal exposes the first two and puts the remaining three behind one control, so the page opens short and stays complete. Scroll inside either frame; both are the real pages at 390px.

Comparison

Existing

Current

All five industries stacked. Everything is reachable, but the page is long and the last industries sit a long way down.

Proposed

Compact

The first two are exposed; the remaining three sit behind one control. One tap reveals them all — there is no per-item expanding.

How it works

It is not a new interaction. It reuses the disclosure pe.js already binds — data-pe-disclosure with aria-expanded and aria-controls, the panel carrying hidden — which is the same mechanism the mobile drawer uses. Both pages get the identical pattern, so the site does not grow two expand/collapse behaviours.

Accessibility: a real <button>, reachable and operable from the keyboard, with aria-expanded reflecting state and aria-controls pointing at the group. The control is 52px tall and full width, past the 44px touch target. The label changes between "View more" and "View fewer" through CSS, so assistive technology reads the state from aria-expanded rather than from a rewritten string.

Desktop and tablet are untouched. From 768px the control is removed and the group is forced visible, so the approved layout renders exactly as it does today. Nothing above 768 changes.

Clicks: one. The whole remainder opens together rather than item by item.

Motion: the revealed items fade in over 420ms; there is no height animation, which on five long articles would fight reading. Reduced motion gets them instantly.