Mobile-first websites for plumbing firms

Why the phone layout comes first

Ofcom's Online Nation 2025 report found that smartphones account for the majority of the time UK adults spend online, around 75 per cent for men and 79 per cent for women.^[1][2] For a trade that people look for when something breaks at home, the share of phone visits is often higher still, because the customer is standing next to the problem.

A site that was designed on a large monitor and then squeezed onto a phone usually shows it. The call button drops below the fold, menus need two hands, text shrinks to fit and forms stretch into long scrolling lists. Designing for the phone first reverses that. Every decision starts with the question of how it works under a thumb.

What changes when you design for the phone first

Speed on a weak signal

A customer standing in a basement or a loft often has a poor connection. Every extra script, font file and oversized image adds seconds. Google's Core Web Vitals give useful targets: the main content should load within 2.5 seconds, the page should respond to a tap within 200 milliseconds and the layout should not jump around, keeping layout shift at 0.1 or less, measured at the 75th percentile of real visits.^[3]

We meet those targets by keeping the build simple. Pages are hand-coded HTML and CSS with a small amount of JavaScript. Fonts are self-hosted and limited to the weights we actually use. Images are compressed and sized. There are no chat widgets, pop-ups or tracking scripts loading before the content. The speed guide explains each of these choices in more depth.

Accessible by default

Designing for small screens and designing for accessibility overlap a great deal. We build to the W3C's Web Content Accessibility Guidelines 2.2 at level AA.^[4] WCAG 2.2 added a criterion on minimum target size for buttons and links, which helps anyone using a phone with one hand, not only people with motor impairments.

In practice that means strong colour contrast so text reads in bright daylight, visible focus outlines for keyboard users, form errors that are announced to screen readers and explained in words rather than red borders alone, and pages that still make sense when the text is enlarged. These choices help older customers in particular, and anyone reading a phone in poor light.

Testing on real phones

Browser tools that imitate a phone are useful, but they do not show everything. Before launch we test every key page on real devices: at least one recent iPhone, one Android phone and one older, smaller Android handset. We check the call button dials, forms submit and show clear errors, menus open and close, and nothing overflows the screen sideways. We also test with screen readers on both platforms.

If you already have a site, we can run the same tests on it and give you a written list of problems before you decide on any work.

Is this a separate service?

Every site we build is mobile-first. We list it as its own service because some firms already have a site they are happy with on desktop but that performs badly on phones. In those cases we can rebuild the templates for mobile without rewriting all the content, which is usually quicker and cheaper than a full redesign.

Questions about mobile-first builds