Design around the smallest meaningful state: one hand, reduced height, interrupted attention, and information that remains legible while the game is moving.
Start with the available rectangle
A phone viewport is not simply narrow; its usable height changes as browser controls, keyboards, and system overlays appear. Important actions and status information need to survive those shifts.
Test the shortest realistic viewport early. If the design only works when every interface element is hidden, the mobile layout is not finished.
Protect the decision layer
Movement and celebration can fill the screen, but the player still needs to understand the current state. Stake, action, result, and recovery controls should remain visually distinct from decorative motion.
Use scale and timing to create energy while keeping the decision layer stable. A strong mobile experience feels animated without making the interface chase the artwork.
- Keep primary controls inside comfortable reach
- Use type sizes that survive bright environments
- Avoid placing essential meaning in color alone
- Check landscape only when the product intends to support it
Design for interruption and return
Real sessions pause. A call arrives, the browser backgrounds, or the player switches context. Returning should reveal the present state without replaying confusion.
Test backgrounding, resizing, reconnecting, and reduced-motion preferences as normal states. These are not polish items; they shape whether the experience feels dependable.
