When I built my free online game "Growing City" (https://rastushiy-gorod.ru), it only existed as a desktop version. The MVP was put together in three days, and at that point it was more important to test the core game mechanics than to worry about adapting it for smartphones. But once it came time to promote the game, one thing became obvious: the lack of a proper mobile version was the project's weakest spot. Most users come from their phones, and playing on mobile was simply uncomfortable. So I decided not to limit myself to cosmetic fixes and to completely rebuild the interface.
Why you can't just shrink the desktop version
The first option seemed obvious: take the existing interface and adapt it with media queries. It quickly became clear that this wouldn't produce a game for phones, but a shrunken copy of the desktop site. Everything technically fits on the screen, but it's inconvenient to use: elements are too small, there's too much information, and important actions constantly require zooming or extra taps.
Instead, I rebuilt the very structure of the screen. Now the interface consists of independent blocks: the header, game progress, the card market, the player list, the action panel, and a bottom sheet. Each block adjusts itself to the available space rather than depending on the size of the whole screen.
I also dropped the endless set of breakpoints for different phone models. Instead of dozens of conditions like "if the width is 390 pixels, do this," there are now a few logical interface states and adaptive typography that scales smoothly between them.
It sounds fairly simple. In practice, it took several iterations before the system really started working reliably.
Why I had to remove the pretty icons
At the same time, I wanted to make card advantages more visual. I added small icons that were supposed to explain card effects: where bonuses apply, who they affect, how they impact money, and what happens after a card is played. I thought it would become a small visual language that would let players read information faster. But after the first tests it turned out that almost no one understood these icons.
The only exception was the money bag — it had long been used in the interface, so players recognized its meaning without fail. All the other icons only slowed the game down. During a match no one wants to figure out symbols — a player needs to make a decision quickly. In the end I removed most of the icons.
Instead, I rewrote the effect descriptions. I didn't just shorten the text — I reworded each description so it could be read completely in a second, with no cut-off phrases or hidden continuations.
One bug I had to fix four times
The most stubborn one was a bug with the market cards. First, empty space appeared under the grid; after fixing that, the cards unexpectedly collapsed to nearly zero height. Then the problem came back again.
At some point I stopped trusting messages like "done" and started looking only at concrete values: the container height, the content height, and the difference between them. Once real numbers replaced descriptions, the cause showed up almost immediately. Sometimes the best way to find a bug is to stop discussing it in words and look at the data.
What came out of it
Now "Growing City" is comfortable to play from a phone. There's a separate mobile layout, the bottom sheet works with familiar gestures, and the city-building progress is always in front of you rather than hidden behind extra taps.
Of course, the interface work can't be considered finished. Any browser game keeps changing after the first users show up. But now it really is a mobile version of the game, not just a squeezed desktop page.
On the same day, I also managed to deal with the site being blocked for some users at the provider level. That story turned out to be unexpectedly interesting — I'll tell it in the next article.
If you have a couple of minutes, I'd be glad if you tried the free online game "Growing City" (https://rastushiy-gorod.ru) on your phone and wrote what works well and what still needs improvement. I really do read every piece of feedback — it's thanks to comments like these that the game gets better.
Top comments (0)