Home / Guides
Website advice without the sales pitch

Mobile Design Is More Than Making the Desktop Page Narrower

A responsive site should reconsider how people navigate, read and complete tasks on a smaller screen. Simply stacking desktop columns is only the beginning.

Practical web advice

Navigation has to work after scrolling

Sticky navigation can be useful on long pages, but test dropdowns after the header becomes fixed. Menus that work only at the top of the page are surprisingly common.

Touch devices do not have desktop hover in the same way a mouse does. Dropdowns need an explicit tap behaviour and visible state.

Test this

Open every dropdown on a phone-sized viewport, scroll halfway down the page and try again. Also confirm the menu closes or remains understandable after selecting a destination.

Practical web advice

Protect readable content width

Long paragraphs should have a comfortable line length. Full-width text across a large monitor is hard to read, while excessive side padding can make a phone feel cramped.

Cards and comparison tables need special attention. If a table cannot fit, consider horizontal scrolling, stacked cards or a simplified mobile presentation.

Avoid sideways scroll

A single oversized image, fixed-width table or long unbroken URL can make the entire page scroll horizontally. Check the whole page, not just the hero.

Practical web advice

Forms should be easy to complete with a thumb

Labels need to remain visible, fields should use appropriate input types and buttons should be large enough to tap comfortably. Keep required information proportionate to the request.

Validation messages should explain what needs fixing without clearing the user's other entries.

Conversion tip

On mobile, a telephone link can be useful, but do not make calling the only option. Some visitors prefer a form or online booking, especially outside business hours.

Practical web advice

Test real content, not placeholder blocks

Designs often look perfect with two-line sample headings and fail when real service names wrap to three lines. Use actual titles, FAQs and button labels during responsive testing.

Check common widths rather than designing for one specific phone model. Responsive behaviour should remain stable between breakpoints.