Mobile-first means you design the phone experience first and then add to it for larger screens, rather than the other way round. It forces useful discipline: with limited space, you have to decide what truly matters. The result is usually a simpler, clearer site on every device.

Decide the key task on mobile

Start by asking what a phone visitor most likely wants. For a local trade it may be a call or a quote request. For a consultancy it may be reading a case study and then getting in touch. Put that action within easy reach, for example with a clear button near the top and again after the main content. Think about whether a tap-to-call link would help your audience.

Keep navigation simple

A mobile menu should be easy to open, easy to close and short enough to scan without effort. Limit top-level items and use plain labels. Our guide to website navigation for service businesses covers how to choose and order them.

Design for thumbs, not cursors

Fingers are less precise than mouse pointers. Give buttons and links enough size and spacing to tap without mistakes, and keep important controls away from awkward screen edges. The WCAG 2.2 quick reference includes guidance on target size that is worth reading. Text should be readable without zooming, with comfortable line length and strong contrast.

Make forms easy to finish

Forms are where mobile visitors most often give up. Use one column, clear labels that stay visible, and the correct keyboard for each field, such as a numeric pad for phone numbers and an email keyboard for addresses. Offer autofill where possible. Our article on improving website forms goes into more detail.

Keep pages light and fast

Phones often have weaker connections and less processing power than the laptop you design on. Compress images, serve sensible sizes, and be careful with autoplay video, sliders and heavy third-party scripts. Measure with PageSpeed Insights, and read our overview of Core Web Vitals to understand the numbers it reports.

Test on real devices

Browser emulators are handy but miss real-world problems such as slow connections, notches, on-screen keyboards covering fields and awkward scrolling. Check your key journeys on at least one recent iPhone, one Android phone and a smaller older device if you can. A mobile review should be part of any website redesign, not an afterthought.

• Text readable without pinching or zooming

• Menu easy to open, close and understand

• Forms use the right keyboard type for each field

• Images and video load quickly on mobile data

• No content hidden behind banners or pop-ups