Mobile-First Is Not a Style Choice

Open your analytics and look at the device split. For most local service businesses, mobile is somewhere between 55% and 75% of sessions, and higher outside business hours.

Now think about how the site was reviewed before it launched. Almost certainly on a desktop, in an office, by somebody sitting at a large monitor with fast internet. The minority experience got the scrutiny and the majority experience got a responsive stylesheet.

What mobile-first actually means

Not that the site works on a phone — that is the floor. It means the phone layout is the one you design and decide with, and the desktop layout is the adaptation.

The reason is that constraint forces prioritisation. On a desktop you can put six things above the fold and defer the decision about which matters. On a phone you get roughly one headline, one line of text, and one button. Choosing them is the design work, and doing it first makes the desktop version better too.

The phone screen is not a smaller canvas. It is an editor that will not let you avoid the decision.

The context, not just the screen

Screen size is the obvious difference and not the important one.

• One hand, one thumb. The reachable area is the bottom two-thirds. Navigation parked in the top corner is a stretch.
• Outdoors, in daylight. Low-contrast grey-on-grey text that looked elegant in a dark office is illegible in a parking lot.
• Interrupted. Phone sessions get abandoned mid-task constantly. Long forms lose people who fully intended to finish.
• Variable connection. Rural cellular across much of our service area is not fast. A 6MB page is a 20-second wait.
• Often urgent. Somebody searching for a plumber at nine at night wants a phone number, not a brand story.

The things that matter most, in order

The phone number, tappable, visible immediately

For a local service business this is the single highest-value element on the site. It belongs in the header on every page, as a real tel: link so tapping it dials. Not an image, not text you have to select and copy.

One clear action per screen

Call, or fill in the form. Two options, presented clearly. A screen offering six equally weighted choices produces fewer of all six.

Tap targets big enough to hit

Around 44 pixels minimum, with space between them. Menu items eight pixels apart cause mis-taps, and a mis-tap on a phone feels like the site is broken.

Forms that do not fight the keyboard

Use the right input types so the phone shows the number pad for a phone number and the email keyboard for an email address. Set autocomplete so the browser can fill it. Ask for the fewest fields you can live with — every optional field costs completions.

Text you can read without pinching

16 pixels minimum for body text. Anything smaller triggers zoom on some devices, which then breaks the layout the designer was protecting.

What to stop doing

• Popups on mobile. They cover a small screen entirely, the close button is tiny, and Google penalises intrusive interstitials. The newsletter is not worth it.
• Hover-dependent anything. There is no hover on a touchscreen. Menus that open on hover simply do not work.
• Carousels. Nearly nobody swipes past the first slide, which means slides two through five are content you wrote and nobody reads.
• Autoplaying video. Expensive on a metered connection and hostile in a quiet room.
• Fixed banners eating the screen. A sticky header plus a cookie bar plus a promo strip can consume a third of a phone screen before any content appears.

This is the first thing checked in a website audit, because it is where the largest share of traffic is and the smallest share of attention has gone.