What mobile-first actually means here

“Mobile-first” is one of those phrases that survived long enough to stop meaning anything. In practice it usually describes a desktop design that has been made to fit a narrower screen without falling apart.

That is responsive, and responsive is fine. It is not the same thing.

Taking it literally means the phone layout is the design you draw first, and the desktop version is what happens when that design is given more room. The order matters, because it changes which compromises you make and who absorbs them.

Here is what followed from it on this site.

Nothing important lives in a hover

Hover does not exist on a touchscreen. Any information revealed only by hovering is information a phone user cannot reach.

So hover here is strictly a garnish: a card lifts a few pixels, an arrow slides, a border changes colour. Remove every hover state on the site and no content disappears and no action becomes unavailable.

The one desktop dropdown — game categories in the header — opens on hover for pointer users and on click for everyone, is keyboard operable, and closes on Escape. On touch, the same links are in the drawer as a plain expanded list. The hover version is a convenience layered on top, never the only route.

Touch targets are 48px, not 44

The common accessibility guidance is a 44px minimum. Every interactive element here is at least 48.

The extra four pixels are not pedantry. 44 is a floor for a target in isolation; real interfaces put targets next to each other, and near a screen edge, on a moving bus, with one thumb. The difference between 44 and 48 is the difference between usually hitting it and always hitting it.

This is why the filter pills on the games page are chunkier than they strictly need to be, and why the footer’s link lists have generous vertical padding that looks like wasted space in a desktop screenshot. It is not wasted on a phone.

Type scales fluidly, not in jumps

Every font size on the site is a clamp() between a small-screen value and a large-screen value, interpolated against viewport width.

The alternative — fixed sizes that change at breakpoints — means there is always some width where the type is wrong: too large just before a breakpoint, too small just after. Devices do not come in four sizes. A fluid scale means there is no width at which the typography was not considered, including the awkward ones like 390px and 414px that sit between the sizes people actually design for.

The 320px rule

Every layout is checked at 320px, which is narrower than any current phone.

It is a deliberately unreasonable test, and that is why it is useful: a layout that survives 320px has no hidden minimum width, no element that only fits because a typical phone happens to be wide enough. Card grids use minmax(min(100%, 17rem), 1fr) rather than a bare minmax(17rem, 1fr) — the min(100%, …) is what stops a 17rem minimum from forcing a horizontal scrollbar on a 20rem screen.

overflow-x: hidden on the body is a backstop, not a solution. If it is doing any work, something above it is broken.

Decoration scales down before content does

When a device cannot afford everything, the order in which things are dropped should be decided in advance.

On a phone: the homepage WebGL scene does not load at all, one of the three background gradient orbs is removed, the remaining blur radius is reduced, and the header’s secondary CTA is hidden below 420px because the menu button already covers it.

None of those removals cost any information. The headline, the description, the buttons, the games, the prices of nothing — all still there. We wrote separately about how the 3D decides whether to load, because that decision has five separate conditions and deserved its own explanation.

Portrait is the primary orientation

The game detail pages put the artwork above the copy on narrow screens and beside it on wide ones — a CSS order flip, not a duplicated block.

On a phone, arriving at a wall of text with the image somewhere below the fold reads as a document. Arriving at the artwork and then reading about it reads as a game page. Same markup, different order, and it is the phone version that determined which one is the default.

What this costs

Being honest about the trade: this approach makes some desktop layouts more conservative than they would otherwise be. Wide screens here get more whitespace and fewer dense multi-column arrangements than a desktop-first design would produce. A few pages could carry more information above the fold on a 27-inch monitor.

That is a real cost and we accept it, because the alternative cost — a phone experience that is a compressed version of something designed for a screen ten times the size — is paid by far more people, far more often.

How to check it yourself

Open any page on your phone and try three things: reach every navigation item with one thumb, complete the contact form without zooming, and filter the games library down to a single category. If any of those is awkward, the claim in the title is not being honoured and we would genuinely like to hear about it.