Mobile-First. What Most Small-Business Sites Get Wrong
Most small-business websites are still designed on a big screen and then squeezed onto a phone. The things mobile visitors need first (a clear headline, proof and a tappable call-to-action) end up buried, while oversized hero images and hidden menus get in the way. On the small-business sites we work with, mobile is now 60–70% of traffic.
Why does mobile deserve to come first?
Because that's where your visitors are, and their attention runs out fast. In NNGroup's eye-tracking work, people spent 57% of their viewing time above the fold and 74% within the first two screenfuls (NNGroup, 2018, 120 participants, 130,000+ fixations). Attention dropped with every section further down. That study used desktop monitors. Mobile users scroll more because they have to, but the drop-off is likely just as steep.
So put whatever persuades near the top. Lead with a short headline and a clear next step, and put proof such as logos, reviews or a real testimonial high up instead of saving it for the bottom of the page. On a phone, "below the fold" often means "never seen".
What is the single most common mistake?
A full-screen hero image with nothing visible beneath it. It looks impressive, but when a hero fills the whole screen with no hint of content below, visitors assume the page has ended. Usability researchers call this a "false floor". In one test, 6 of 8 people didn't realise they could scroll past the hero at all (NNGroup, n=8).
Lead with text and a button rather than an image, and let the next section peek above the fold so people can see there's more.
Are hamburger menus a problem?
Often, yes, if they hide things people need. Putting your whole menu behind a hamburger icon measurably lowers how much of your site people discover. In an NNGroup study (179 participants, 6 sites), hidden navigation was used by only 27% of desktop users, against 48–50% when navigation was visible. On mobile, hidden navigation was used 57% of the time, against 86% for a combination of visible links and a hamburger (NNGroup).
Our rule: with four or fewer key links, keep them visible. Use a hamburger only when there are too many items to show.
How big should buttons and links be?
Big enough to hit with a thumb on the first try. The recommended minimum tap target is 44×44 CSS pixels (Apple's Human Interface Guidelines and WCAG 2.2 AAA). Google suggests 48×48, with at least 8px between targets (web.dev). In physical terms, the floor is roughly 1cm × 1cm (NNGroup, based on Parhi et al., 2006). Corners need a little more room, around 12mm, because thumbs reach them less accurately (Hoober, 2017, 1,333 observations).
Tap targets below ~1cm and cramped footer links are two of the most common mobile faults we see. Both are easy to fix.
We size buttons, links and form fields to these targets from the start, so nobody has to zoom in or tap twice.
Why do mobile contact forms lose people?
Because they're built like desktop forms. The fixes are well documented:
- One column, always. A single-column form is completed about 15.4 seconds faster than a multi-column layout (Smashing Magazine / CXL).
- Ask for less. Keep lead forms to four fields or fewer. Most checkout flows could cut their fields by 20–60% (Baymard Institute).
- Set inputs to at least 16px. Smaller text makes iOS Safari zoom in every time someone taps a field, and the form feels broken.
- Validate as people go. Inline validation after each field, instead of only on submit, raised success rates by 22% in Wroblewski's 2009 study.
- Use the right keyboard. Set
type="email"andtype="tel"where they belong, and includeautocompleteattributes. Google found that autofill cut completion time by around 30%.
For a local service business, put a tappable phone number next to the form: a proper tel: link styled as a button. Google/Ipsos research found roughly 70% of mobile searchers have called a business straight from search results.
Where should proof and pricing go?
High up, and stacked. Social proof belongs within the first two or three screenfuls, since the first two get 74% of viewing time in NNGroup's desktop study. In CXL eye-tracking research, testimonials with a real photo were remembered significantly better than text-only quotes, and recognisable client logos had the strongest recall of any proof type. We could only partly verify those findings, so we treat them as directional. Stack pricing in full-width cards, with one plan per card. A horizontal table forces people to rotate their phone (Baymard).
FAQ
What does "mobile-first" mean? Designing for the phone screen first, then expanding the layout for desktop. In practice, the text-first hero, visible navigation, thumb-sized buttons and single-column form are all decided before the wide layout.
How much of my traffic is really on mobile? On the small-business sites we build, it's typically 60–70%, and for many local businesses it's higher. Check your own analytics, but assume most visitors will only ever see your phone layout.
What is the fastest mobile fix I can make today? Two things: stop a full-screen hero image from hiding everything below it, and make every button and link at least 44×44px. Both are quick, and they fix two of the most common faults.
Do longer pages hurt on mobile? Not by themselves. There's no evidence that people dislike long pages. The bigger problem is a "false floor" that stops them scrolling. People will keep going if each section gives them a reason to.
The sites we build start from the phone layout: a text-first hero, visible navigation, tap targets of at least 44×44px and one-column forms. For a second opinion on which of these your current site needs first, book a call.