The mobile version

How to design a site's mobile behaviour: a separate mockup, agreed rules or the designer's involvement during development.

The mobile version does not have to be a shrunken copy of desktop. On a narrow screen, the order of blocks, the navigation, the space for text and the way complex elements work all change. The visitor's task stays the same: find information, choose an offer or contact the company.

Decisions for the phone can be handed over in different ways. The choice depends on how complex the interface is and how precisely the result needs to be controlled.

A separate mockup is needed where the composition changes

If the hero screen relies on complex graphics, the catalogue has unusual filters or the interaction differs from desktop, a mobile mockup helps agree on the order and states in advance. It is enough to show the key pages and repeating elements, not to draw hundreds of identical cards.

What matters are the open menu, forms with errors, long names and other cases that rarely make it into a polished demo frame. Where the mobile frame sits in the file and its exact pixel width matter less than clear behaviour.

A typical page can be adapted by rules

For an ordinary card grid or text page, drawing every state separately can be unnecessary. The developer applies agreed responsive layout rules and checks the page at different widths.

But "make it work on a phone somehow" is not a rule. You need to define what can be rearranged, what stays visible and how a person reaches the main action. If this is not described, the risk of different interpretations ends up in acceptance.

The designer helps with in-between cases

Sometimes one desktop and one mobile reference are enough, but a complex block behaves unexpectedly in between. Then the designer joins during development and refines the composition on the working page. This does not replace a full mobile mockup where the scenario is different from the start.

Define the scope of this involvement and the cost of new decisions before development starts. Extra charges should not surface after the team has already understood the task differently.

Check usability, not frame width

At acceptance, open the menu, fill in a form, browse the catalogue and read a long page on a phone. Then change the window width: problems often appear not at the reference size of the mockup but between breakpoints.

A good mobile version keeps the important content and lets people complete an action without zooming. How the team got there, with a separate mockup or agreed rules, is secondary.