Home/Blog/Mobile-first

Mobile-first construction websites: why most firms still get this wrong.

67% of contractor website traffic is on a phone. Most contractor sites were designed on a 27-inch monitor, by somebody who's never used the site on a 6-inch phone in bright sunlight. The disconnect is expensive.

Phone first. Always.

The data: where contractor traffic actually comes from

Aggregated across 30+ contractor analytics accounts we've audited:

67%Mobile traffic share
23%Desktop
10%Tablet
2.4 secAvg. mobile LCP target

And mobile is concentrated in the highest-intent traffic - the homeowner researching at 8pm on the couch, the property manager calling between site visits, the emergency caller standing in a flooded basement. Mobile isn't where the casuals visit. It's where the buyers visit.

Where most contractor sites fail on mobile

The pattern is consistent. The site looks beautiful on the designer's monitor. On the phone, it falls apart:

  • Hero text too small because it was sized for 1920px and shrank.
  • Phone number invisible - buried in a hamburger menu instead of always-visible.
  • CTAs below the fold by the time the page renders mobile.
  • Forms unusable - input fields too tight, no proper input types, autocomplete broken.
  • Images way too heavy - 4MB hero images on a 4G connection.
  • Tap targets too small - buttons sized for cursor precision, not thumb taps.
  • Fixed-width tables that overflow and require horizontal scroll.
  • Modal popups that can't be dismissed on small screens.

The mobile-first fixes that actually move the needle

Mobile-first means designing the mobile layout first, then scaling up - not designing desktop and squishing it down. The non-negotiables:

  1. Phone number persistent in the header on mobile. Tappable. Outside the hamburger menu.
  2. Single primary CTA per viewport. Not three. The thumb finds one big button - not three small ones.
  3. Tap targets minimum 44×44 pixels. Apple's guideline; Google says similar. Don't go smaller.
  4. Fonts: 16px body minimum. Smaller and iOS triggers zoom-on-focus, ruining UX.
  5. Image optimization: WebP, responsive srcset, lazy load. Hero images under 200KB on mobile.
  6. Forms with correct input types (tel, email, number) so the right keyboard pops up. Autocomplete attributes set.
  7. Sticky bottom CTA bar on long pages. "Call us" button always reachable with the thumb.
  8. Test on a real phone, in real conditions. Bright sunlight. 4G. One-handed.

How to test yours in 5 minutes

Open your site on your phone right now. Walk outside. Try these:

  • Can you find your phone number without scrolling?
  • Can you submit the contact form one-handed?
  • Does the hero text fit without horizontal scrolling?
  • Does the page load in under 3 seconds on cellular?
  • Are tap targets reachable with your thumb on a 6.7-inch phone?

Any "no" is a fix. Most sites have at least three.

Want us to audit your mobile experience?

Book a 30-minute call. We'll open your site on real phones, run the tests, and send a written audit with the highest-leverage mobile fixes.

Book Mobile Audit