How responsive layout is done: screens, mockups and testing

What changes on different screens, why one desktop mockup is not enough for complex scenarios and how to check the result.

Responsive layout lets one page rearrange its elements to fit the width of the window. On a phone, several columns can become one, the menu changes shape and images are cropped differently. The goal is not to shrink the desktop page to phone size. People should still be able to read, choose and send a form comfortably.

The question for a project is not whether it will be responsive, but which actions and content must survive on a narrow screen and who decides on the complex rearrangements.

Rebuild the composition, don't hide the meaning

On a wide screen, text and a photo can sit side by side. On a narrow one they stack, keeping a clear order. The button must stay visible and the form usable without zooming.

A decorative element can sometimes go. But hiding a service description, a price or an important condition just to shorten the mobile page is risky. Google recommends keeping the main content of the mobile version equivalent to desktop.

Breakpoints are not tied to phone models

The developer sets rules for how the composition changes when space runs out. These moments are called breakpoints. They are chosen where a specific block stops working well, not only at popular device sizes.

Between the finished desktop and mobile mockups lie countless intermediate widths. So you check not two screenshots but how the page behaves as the window narrows gradually. A detailed technical explanation is in the MDN documentation.

Without a mobile mockup, the developer makes some decisions

Having no separate phone design does not mean the site stays desktop-only. A developer can adapt standard grids, navigation and cards by general rules. But an unusual hero screen, complex animation or a custom catalogue need a more precise decision.

Before estimating, agree on which mobile states the designer draws and where the developer follows agreed principles. More on this in the article on the mobile version.

Accept responsive work by actions

Check more than the absence of horizontal scrolling. Open the menu, fill in the form, compare long cards, look at a table, increase the system text size. The task should be doable on a phone without hidden buttons or accidental overlaps.

Usability is not a universal percentage of extra enquiries. You can test it on your own scenarios and measure it after launch. Good responsive layout does not guarantee search rankings, but it helps people and search engines get a complete mobile page.