The Desktop Default Problem
Most web designers work on large monitors. Most users visit on small screens. This mismatch has been discussed for 15 years, and yet most agency websites — and client sites — are still designed desktop-first.
The evidence against this approach is overwhelming. Across our client portfolio, 71% of traffic is mobile. For most B2C and e-commerce clients, that figure is above 80%. And yet the average conversion rate on mobile is typically 40–60% lower than desktop.
That gap is almost entirely a design problem.
Principle 1: Reduce, Don't Adapt
The standard mobile approach: design for desktop, then make it "work" on mobile. Stack columns. Shrink text. Hide secondary elements.
The result is a site that works on mobile but wasn't designed for it. Users can feel the difference.
Mobile-first means starting from the constraint: 375px wide, thumb reachable, one-handed, probably distracted. What is the single most important thing this page needs to do? Design that first. Then add to it for larger screens.
Every element on a mobile screen should justify its presence. If it's not contributing to the conversion action, it's competing with it.
Principle 2: Thumb Zones Are Real
The primary interaction zone on a smartphone is the bottom third of the screen, reachable without shifting grip. The dead zone is the top third.
Most designers put the primary CTA in the middle or top of the hero. Most users never tap it. Put the primary CTA at the bottom of the viewport on mobile. Put navigation in a bottom sheet, not a top hamburger menu. Design for where thumbs actually are.
For e-commerce clients, we moved the "Add to Cart" button from a fixed position at the top to a sticky bar at the bottom. Average mobile conversion rate: up 23%.
Principle 3: Legibility Is a Conversion Metric
On desktop, 14px body text is acceptable. On mobile, it's a friction point. Users who have to work to read your copy don't convert.
Our standards for mobile:
- Body text: minimum 16px, ideally 17–18px
- Line height: 1.6 minimum
- Max line length: 70 characters (about 32–35ch on a 375px screen with standard margins)
- Contrast ratio: WCAG AA minimum, AA+ preferred
These aren't just accessibility standards. They're conversion standards.
Principle 4: Forms Are the Final Boss
Every extra field in a form costs conversions. On mobile, the cost is higher because typing on a virtual keyboard is genuinely unpleasant.
For every form we design, we ask: what is the minimum information we need to achieve the conversion goal? Every field beyond that is a tax on the user.
For lead generation forms: name + email + one optional qualifier. For checkout flows: ship to address, payment, done. Progressive data collection (ask for more after the initial conversion) consistently outperforms trying to get everything upfront.
The Performance Connection
Mobile design and performance are inseparable. A beautifully designed mobile site on a slow connection is a bad mobile experience.
Our performance targets for mobile:
- LCP: under 2.5 seconds on a 4G connection
- CLS: under 0.1
- FID/INP: under 200ms
These require decisions at the design phase, not the optimisation phase. Large hero images that look stunning on desktop destroy mobile performance. Design for mobile performance from the start, not as an afterthought.