Mobile-first design is a term that gets thrown around a lot in web development. For small business owners, it means one practical thing: when a customer pulls up your site on their phone, do they see what they need and can they take action within 5 seconds? Here are the six things that determine the answer.
1. Font size: minimum 16px for body text
This sounds basic. It is basic. And 60% of business websites violate it. Text that's smaller than 16px on mobile requires zooming in to read comfortably. Once a user zooms in, they can only see part of the page at a time, the layout often breaks, and they lose their orientation on the page. Most quit.
Body text at 16px. Headlines at 24px minimum. Navigation labels at 14px minimum. These aren't design preferences — they're functional requirements for a mobile site that works for real humans.
2. Tap targets: minimum 44x44 pixels
A "tap target" is anything the user needs to tap: buttons, links, navigation items, phone numbers, form fields. Apple's Human Interface Guidelines and Google both specify 44x44 pixels as the minimum tap target size. A link that's 20x12 pixels — like a tiny "Contact Us" in your footer — will be missed, tapped incorrectly, or frustrating to use for anyone with normal-sized thumbs.
Your primary call-to-action button (call, book, get a quote) should be at least 48px tall, full-width on mobile, and positioned where a thumb can reach it comfortably without adjusting grip.
3. Page speed: under 3 seconds on 4G
53% of mobile users abandon a page that takes more than 3 seconds to load. On a 4G connection (not your WiFi), most contractor websites load in 6-12 seconds. That means you're losing more than half of potential leads before they've seen your first word.
The two main culprits are unoptimized images and slow hosting. Compress every image to under 200KB, use WebP format, and host on a CDN. Those two changes alone typically cut load time in half. Tools to test: Google PageSpeed Insights, GTmetrix.
4. Click-to-call placement: visible without scrolling
For any business that handles urgent work — service-based work after a storm — the phone number must be visible without scrolling on mobile. A sticky header with your phone number visible at all times is ideal. Minimum acceptable: large tappable phone number in your hero section above the fold.
A customer with a burst pipe or no power isn't going to scroll around looking for your number. They're going to hit the back button and call whoever shows up next. Your number needs to be one tap from the moment they land on your site.
5. Form length: 3 fields maximum on mobile
Typing on a phone is friction. Every field in your contact form is a hurdle. A 6-field form on mobile has roughly half the completion rate of a 3-field form. The three fields you need: name, phone number, brief description of issue. Cut everything else. Get the call, ask questions on the phone.
6. Load order: critical content renders first
This is a technical one but it matters. Mobile browsers render pages progressively — they display content as it downloads rather than waiting for everything. A well-built site is structured so the most important content (your headline, phone number, CTA button) renders in the first 500ms, before images and scripts finish loading. A poorly structured site loads a 3MB hero image first, making the user stare at a white screen while the actually-useful content loads behind it.
The technical term is "Critical Rendering Path" optimization. In practice, it means: put your most important content first in the HTML, defer loading of non-critical scripts, and lazy-load images that are below the fold.
The quick test
Put your phone on mobile data (not WiFi). Open your site. Time how long until you can tap your phone number. If it's more than 3 seconds, or if you have to scroll to find the number, both problems are fixable and worth fixing before you spend another dollar on ads.