Quick answer
Mobile-first design means building the phone layout first: single-column content, minimum 44-pixel tap targets, 16-pixel body text, a sticky call button within thumb reach, short forms and images sized for mobile bandwidth. The desktop layout then expands from a proven foundation.
Design for the thumb
Primary actions belong in the lower half of the screen where thumbs naturally rest. A sticky call or quote bar that appears as the user scrolls consistently increases enquiries for service businesses.
Type and spacing
Body text below 16 pixels forces pinch-zooming. Generous line height and shorter paragraphs make long pages readable on a small screen.
Forms people will finish
Use the correct input types so phones show the right keyboard, keep fields to a minimum, and never ask for information you do not need to give a quote.
- type="tel" and type="email" for the right keyboards
- Labels above fields, not placeholder-only
- Visible error messages next to the field
- A confirmation message that says what happens next
Test on real devices
Browser emulators miss slow networks, awkward thumb reach and how a sticky bar interacts with browser chrome. Test on an actual mid-range Android phone before launch.
Frequently asked questions
- What percentage of local searches are on mobile?
- For UK trades and local services, 70–85% of website visits typically come from mobile devices.
- Should I have a separate mobile site?
- No. A single responsive site is easier to maintain and avoids duplicate content and canonical issues.
Related pages
Free website review
Send us your website and we will tell you what is holding it back — speed, structure, content or conversion.