Building a trade website for phones first

The short version

Design for a small screen first. Put a tappable phone number and a quote link at the top of every page. Use text at least 16 pixels high with plenty of line spacing. Make buttons and links easy to hit, at least 24 by 24 CSS pixels and preferably larger. Resize photos for phones. Keep the content the same on phone and desktop.

Why phones come first

Google's documentation says it uses the mobile version of a site's content, crawled with its smartphone agent, for indexing and ranking. If your phone layout leaves out content, structured data or image alt text that the desktop layout has, Google sees less of your site.

There is a practical reason too. Building and trade enquiries are made from all sorts of places: a homeowner in the room that needs work, someone on a lunch break, a property manager between inspections. A desktop-first site squeezed onto a phone can bury the two things those people need: a way to call and a way to ask for a price.

The top of every page

On a phone, the first screen should show:

• your business name or logo, small
• a short line saying what you do and where
• a phone number that dials when tapped
• a button that leads to the quote form

A menu button can hide the rest of the navigation. Avoid large hero images that push everything else below the fold on a phone; a photo can come second.

Text you can read without zooming

Use body text of at least 16 CSS pixels, a line height around 1.5 and enough contrast between text and background. WCAG 2.2 sets a contrast ratio of at least 4.5 to 1 for normal text at level AA. Pale grey text on white fails that and is hard to read outdoors.

Keep lines of text short enough to scan, break long pages up with headings and use lists for steps or inclusions.

Things big enough to tap

WCAG 2.2 added success criterion 2.5.8, Target Size (Minimum), at level AA. Pointer targets should be at least 24 by 24 CSS pixels, with exceptions such as links inside a sentence or targets with enough space around them.

Treat 24 pixels as the minimum, not the goal. The main buttons on a contractor site, call, quote and menu, should be closer to the size of a fingertip, around 44 to 48 pixels high, with space between them so nobody taps the wrong one.

Forms on a phone

• Use the right input type so phones show the right keyboard: tel for phone numbers, email for email addresses.
• Put labels above fields, not beside them, so they stay visible on narrow screens.
• Keep the number of required fields small; every field is typing with a thumb.
• Make the submit button full width.

The quote request form guide covers labels, errors and the privacy notice in more detail.

Photos that load fast

Project photos are the heaviest part of a contractor site. On a phone connection, a page full of full-size photos can take a long time to show anything useful.

Web.dev describes Largest Contentful Paint as the time taken for the largest image or text block in view to appear, and sets a good LCP at 2.5 seconds or less, measured at the 75th percentile of page loads across mobile and desktop. On a project page, the lead photo is a likely candidate. To keep it fast:

• resize photos to the size they display at, with a smaller version for phones
• compress them and use modern formats with a fallback
• give every image a width and height so the page does not jump while loading
• load photos further down the page only when they are about to scroll into view
• never lazy-load the lead image at the top of the page

Menus and navigation

Keep the main menu short: services, projects, about and contact cover the essentials. On a phone, a menu button that opens a simple list works well. Make sure it can be opened and closed with a keyboard, that the button says what it does to screen readers and that focus moves sensibly.

Same content, phone and desktop

Google's guidance is to keep the primary content of the mobile version equivalent to desktop. Hiding text in tabs or accordions on a phone is fine; removing it is not. The same goes for structured data and image alt text, which should be the same on both.

How to test

1. Open every page on your own phone, not just a narrowed desktop browser.
2. Try to call, open the menu and send the quote form using one thumb.
3. Turn the phone sideways and check nothing breaks.
4. Increase the phone's text size and check the page still works.
5. Try the site on a slower connection, such as away from wifi.
6. Run a page through Google's PageSpeed Insights to see field data if your site has enough visitors.