Redesigning a phone game screen with container queries (and a hint that takes no space)
Alt text: The phone trading screen before (1.36) and after (1.37) Cá Viên Chiên runs in the browser and is mostly played on phones. After a month of adding features, the trading screen had become crowded, so I ran an audit at 375 px. The numbers weren't kind: What At 375 px HUD labels (Day / Money / Rating) 10 px Morning tabs 11 px, 55 × 40 HUD buttons 32 × 32 (30 × 30 at 320) Heat buttons Low /…
The trading screen of a phone game called Cá Viên Chiên underwent a redesign to improve usability on smaller screens. After a month of feature additions, the screen became cluttered, prompting a thorough audit at a width of 375 pixels. The audit revealed several issues: HUD labels, morning tabs, and heat buttons were too small, and there were instances of labels being clipped due to insufficient space.
The constraint faced was that the screen already utilized every pixel of the 375 × 820 phone display, leaving no room for expansion.
To address these issues, the redesign focused on optimizing text sizes, touch targets, and button layouts. The HUD labels were increased to 10 px, morning tabs were adjusted to 0 texts and 0 tap areas, and heat buttons were converted from horizontal rows to vertically aligned squares with varying flame sizes. Additionally, small buttons were given larger tap areas without altering their appearance.
The redesign process involved measuring various elements to ensure compliance with accessibility standards, such as a minimum of 12 px for text and 44 × 44 px for touch targets.
One challenge encountered was aligning icons within buttons. Initially, the solution involved hiding text that needed to be visually hidden, but this approach proved ineffective as it still occupied grid space. The resolution was to use an absolutely positioned, out-of-flow `.sr-only` element along with a tightly cropped SVG viewBox to achieve precise alignment.
Another issue addressed was the placement of a hint message. Initially, it was a separate row beneath customers, which disrupted the layout when removed. The solution involved measuring the gap between the hint and customers while keeping the hint hidden. The hint was then positioned absolutely, centered between the two, using CSS flex properties to allocate the freed space to the customers. This approach ensured that the hint was displayed only when necessary, without consuming additional screen real estate.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
