Websites
Mobile-First Means Designing for One Thumb
Most local business traffic arrives on a phone held in one hand, often outdoors and in a hurry. Mobile-first design starts there and adapts the desktop from it.
Open your analytics and check the device split. For most local service businesses, mobile makes up somewhere between 55% and 75% of sessions, and more outside business hours.
Now think about how the site got reviewed before launch. Almost certainly on a desktop, in an office, by somebody at a large monitor with fast internet. The minority experience got all the scrutiny, and the majority got a responsive stylesheet.
What mobile-first means
Working on a phone is the minimum. Mobile-first means you design and make your decisions on the phone layout, and the desktop layout adapts from it.
Constraints force you to prioritise. A desktop lets you put six things above the fold and put off deciding which one matters. A phone gives you roughly one headline, one line of text and one button. Picking those is the design work, and doing it first improves the desktop version too.
A phone screen makes you decide what matters most.
The context around the screen
Screen size is the obvious difference. The situation the person is in matters more.
- 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. People abandon phone sessions mid-task constantly. Long forms lose people who fully intended to finish.
- Variable connection. Rural cellular across much of our service area is slow. A 6MB page is a 20-second wait.
- Often urgent. Somebody searching for a plumber at nine at night wants a phone number. The brand story can wait.
The things that matter most, in order
The phone number, tappable, visible immediately
For a local service business, the phone number is the most valuable element on the site. Put it in the header on every page as a real tel: link, so tapping it dials. An image of the number won’t dial, and neither will text people have to select and copy.
One clear action per screen
Call, or fill in the form. Present those two options clearly. A screen offering six equally weighted choices gets fewer of all six.
Tap targets big enough to hit
Make them around 44 pixels at minimum, with space between them. Menu items eight pixels apart cause mis-taps, and on a phone a mis-tap 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 fields in. Ask for the fewest fields you can live with, since each optional field costs you completions.
Text you can read without pinching
Body text should be 16 pixels at minimum. Anything smaller triggers zoom on some devices, and the zoom breaks the layout the designer was trying to protect.
What to stop doing
- Popups on mobile. They cover a small screen completely, the close button is tiny, and Google penalises intrusive interstitials. The newsletter signup isn’t worth it.
- Anything that depends on hover. Touchscreens have no hover, so menus that open on hover don’t work.
- Carousels. Hardly anybody swipes past the first slide, so slides two through five hold content you wrote that nobody reads.
- Autoplaying video. It eats data on a metered connection and blares in a quiet room.
- Fixed banners eating the screen. A sticky header plus a cookie bar plus a promo strip can take up a third of a phone screen before any content appears.
It’s the first thing we check in a website audit, because that’s where most of the traffic is, and it’s had the least attention.