Pull out your phone and open your business website. Tap the menu. Try to read the text without zooming. Find the phone number and try to tap it. Fill in the contact form with your thumbs.
If any of those tasks felt awkward, your site was built for desktop and adapted for mobile as an afterthought. Over 60% of web traffic comes from mobile devices. Google has used mobile-first indexing for all websites since mid-2024. Your mobile site is the version Google ranks.
Desktop-first vs mobile-first
A desktop-first website starts with a wide screen layout. Navigation spans the top. Content sits in two or three columns. Images fill large containers. The designer then shrinks the layout for smaller screens, hiding elements, stacking columns, and reducing font sizes until it fits a phone.
The result is a compromised layout. Elements designed for a mouse and a 27-inch monitor get squeezed onto a 6-inch screen with a thumb as the input device. Buttons that were spaced for a cursor sit too close together for a fingertip. Text sized for a desktop becomes unreadable without zooming.
A mobile-first website starts with the smallest screen. The designer builds the layout for a phone first. One column. Tappable buttons. Readable text. A menu that works with a thumb. Then the layout expands for tablet and desktop, adding columns, increasing spacing, and using the extra space.
The mobile version is the foundation. The desktop version is the enhancement.
Google's mobile-first indexing
Google's crawler visits your website as a mobile device. It sees the mobile version of your pages. It ranks you based on what it finds there.
If your desktop site has detailed service descriptions but your mobile site hides them behind a "read more" button that loads content via JavaScript, Google may not index that content. If your desktop site loads in 1.5 seconds but your mobile site loads in 6 seconds because of uncompressed images, Google scores your speed on the mobile load time.
A site that looks good on desktop but performs poorly on mobile will rank poorly. Google made this change in 2024. Websites that have not adapted are competing with a handicap.
What mobile visitors expect
76% of people who search for a local service on their phone visit a business within 24 hours. These are high-intent visitors. They searched for "electrician near me" or "plumber Peterborough" because they need someone now.
They tap your search result. Your site loads. They need three things: confirmation that you offer the service they need, a phone number they can tap to call, and a sense that your business is professional and trustworthy.
If the text is too small, they pinch to zoom. If the menu does not open, they go back. If the phone number is buried at the bottom of the page, they tap the next search result. You had three seconds to deliver those three things.
Building mobile-first
Mobile-first design starts with a wireframe for a 375-pixel-wide screen. The content hierarchy is decided on the smallest canvas. The most important element goes at the top. The call to action sits where a thumb can reach it.
Typography is set for readability on a phone. Body text at 16 to 18 pixels. Headings scaled for a small screen. Line height at 1.5 to 1.7 so paragraphs do not feel cramped.
Touch targets are sized for fingers. Buttons at minimum 44 pixels tall. Form fields large enough to tap without accidental presses on adjacent elements. Links spaced so a thumb does not activate two at once.
Images are served at the size the screen needs. A phone does not need a 3000-pixel-wide hero image. Next.js with the next/image component serves a 640-pixel version to mobile and a larger version to desktop. The visitor downloads less data and the page loads faster.
Responsive breakpoints add complexity for larger screens. At 640 pixels, a single column becomes two. At 1024 pixels, the navigation moves from a hamburger menu to a horizontal bar. At 1280 pixels, the content width caps at a maximum to prevent lines of text from stretching too wide.
Testing
We test at four breakpoints. Mobile at 375 pixels. Tablet at 768 pixels. Desktop at 1024 pixels. Large at 1280 pixels and above. Each breakpoint gets tested for layout, typography, touch targets, and load performance.
Chrome DevTools simulates different screen sizes. We test on actual devices too. An iPhone and an Android phone with Chrome. Layout bugs that do not appear in a desktop simulator show up on real hardware.
Lighthouse audits confirm the performance scores match expectations. PageSpeed Insights runs the test from Google's servers to account for network conditions outside a local development environment.
The cost of getting it wrong
Mobile bounce rates run about 10 percentage points higher than desktop. A slow or broken mobile experience pushes that gap wider. A trade business losing 5 potential customers a month to a poor mobile site loses 60 a year.
Those 60 visitors searched for your service, found your listing, tapped your link, and left. They needed a plumber. They found one. It was not you.