A website can look excellent in two screenshots and awkward everywhere between them. A wide desktop design and a narrow phone design leave a lot of ordinary browsing conditions unexamined. I review the space between those views before deciding where the layout should change.
My practical rule is to let the content expose the breakpoint. When navigation crowds the logo, columns become difficult to read or buttons no longer fit their labels comfortably, the layout needs another arrangement.
Resize slowly and watch what fails first
I begin with representative content rather than the neatest possible demonstration. That means a long heading, a product with a substantial name, realistic navigation and a card without an image. Then I gradually narrow the browser and note the first visible problem.
The number itself is less interesting than the reason. “Move these columns into one when the text becomes cramped” is a useful design decision. “This width belongs to a tablet” can become misleading as soon as somebody rotates a device or opens a side panel.
Different components can need different transitions. A simple two-column text section may remain comfortable after a busy header has already switched to its compact form. Forcing every part of a page to change together can create unnecessary empty space or late, awkward rearrangements.
Use the difficult text
Real content is often longer than the text used during design. I try a heading that wraps to three lines, a button with a clear but lengthy label and a navigation item that includes an extra word. Translation or a later editorial change can expose the same weakness.
I avoid fixing the symptom by making every font smaller. That may squeeze the text into the box while making it harder to read. Stacking controls, allowing labels to wrap or reducing decorative spacing can be more useful changes.
A row of cards deserves the same scrutiny. When three columns become too narrow, two useful columns are better than three compressed ones. When a single column becomes excessively wide, a sensible content width keeps the reading experience comfortable without requiring another device category.
Check zoom as a normal way of browsing
I increase browser zoom and repeat important tasks. The page needs to cope when the person asks for larger content, including menus, form labels and notices. I look for clipped controls, overlapping text and horizontal movement that makes reading unnecessarily difficult.
A sticky header deserves particular attention because it can occupy a large part of the remaining viewport. A control that was convenient at normal zoom may become an obstacle when content grows. I check whether the page still offers enough visible working space to complete a form or read a section.
Keep the decision record small
For each layout change, I record what prompted it, the new arrangement and the content used to check it. A screenshot at the failure point and one just after the change can explain more than a long list of device names.
I then repeat the key tasks at a narrow view, a wide view and several intermediate widths. A real phone adds useful evidence about touch, keyboard and scrolling behaviour that browser resizing cannot fully reproduce. The aim is a page that stays usable as the available space changes, rather than a set of attractive fixed-size compositions.