Two reasons it matters
Search. For Google, the phone version of a page is the one that counts in search. Whatever your phone layout leaves out, Google may never see. Its guidance asks for the same content, headings and structured data on mobile as on desktop.
Customers. People looking for a plumber, a dentist or a lawyer often search on a phone and call straight from the results. A phone layout that hides the number or loads slowly sends them to the next business.
What mobile-first changes
- Wide layouts squeezed onto phones
- Key buttons pushed far down
- Hover menus that fail on touch
- Desktop images sent to phones
- Must-have content chosen first
- Call and book buttons in thumb reach
- Menus built for taps
- Light images, larger ones for desktops
Design for thumbs
Touch targets need room. WCAG 2.2 sets a minimum target size for buttons and links, and comfortable targets are larger still. Place the main actions where a thumb reaches easily, and keep tap targets apart so people do not hit the wrong one.
Good example. A veterinary clinic's phone layout shows the clinic name, hours today, a call button and a book button on the first screen.
Bad example. The same clinic's phone layout opens with a large puppy photo. The phone number sits at the bottom of a long page.
Test like a customer
- Find the phone number and call with one thumb.
- Fill in the contact form on a phone keyboard.
- Load the site on mobile data, not office Wi-Fi.
- Read a service page in bright daylight.
Read what responsive web design is. Our web design team designs every page for phones first, then for larger screens.