Responsive design is usually explained as a layout that reflows to fit a screen. That is the technical part and the easy part. The harder question is what the person holding that screen is actually doing: because for a trade, it is rarely sitting comfortably indoors.
Picture the visitor properly
Your mobile visitor is frequently standing next to the thing that has broken. Outside, or in a basement, or in a loft. Holding the phone in one hand because the other is holding a torch or a lid. In bright sun or poor light. Possibly at night, probably annoyed, and on whatever signal the property has.
Almost every mobile design decision reads differently once that is the picture rather than a commuter on a train.
One hand means the bottom of the screen
A phone held in one hand is operated by that hand’s thumb, which reaches the bottom and middle of the screen comfortably and the top corners poorly.
Which is where most sites put the menu and the phone number. A persistent call button along the bottom edge is unfashionable and lands exactly where the thumb already is. For a trade it is usually the single highest-value mobile element on the site.
Tap targets, for imprecise taps
Someone in a hurry, one-handed, possibly with cold or dirty hands, taps imprecisely. Targets that are adequate under laboratory conditions are not adequate here.
Give the important controls generous size and, just as importantly, generous separation. Two links close together produce mis-taps, and a mis-tap on a phone means a page load, a wait, and a return, on a bad connection that is enough to lose someone.
Sunlight destroys subtle contrast
A phone screen outdoors on a bright day, often auto-dimmed to save battery, loses everything low-contrast. Pale grey text on white, a muted accent colour, a thin light typeface: all of it disappears.
This is the same reason accessibility guidance asks for strong contrast, and it is worth doing for that reason too, but even setting that aside, your customer is standing in a yard and cannot read your phone number.
Assume a poor connection
Signal at a property is whatever it is, and basements and rural addresses are worse. A site that depends on several megabytes of photography before it becomes usable is a site that does not load for the customer with an urgent problem.
The practical target is that the phone number and the basics appear quickly, before the decorative parts arrive. What the page eventually weighs matters less than how soon it becomes useful.
Nothing important behind a hover
Hover does not exist on a touchscreen. Menus that reveal on hover, tooltips carrying real information, effects that expose a phone number when a cursor passes over: each of these either breaks or behaves unpredictably.
Anything a visitor needs must be reachable by tapping.
Forms have a keyboard in the way
When the on-screen keyboard appears it covers roughly half the screen, so a form that looked short on a desktop becomes a small window scrolled through blind.
Keep forms very short on mobile, and set the fields to summon the right keyboard: a numeric pad for a phone number rather than the full alphabet. Small detail, noticeably less friction.
Test it where it will be used
Resizing a desktop browser window proves the layout reflows. It does not tell you whether the site works.
Take your actual phone outside, in daylight, and try to find your phone number and call yourself using one hand. Then do it with the phone on a slow connection. Most contractor sites fail one of those two, and neither failure is visible from a desk.
Frequently asked questions
Is responsive the same as mobile-friendly?
No. Reflowing to fit the screen is the minimum. Whether it is usable one-handed, outdoors, on a poor connection is a separate question that reflow does not answer.
Where should the phone number go on mobile?
Within thumb reach, which means the bottom of the screen rather than the top corner. A persistent bar along the bottom edge works better than anything in the header.
How fast does a contractor site need to be?
Fast enough to become useful on a weak signal at a property. Judge how quickly the number and the essentials appear, not the total page weight.
What is the most common mobile mistake?
Content hidden behind a hover, and low-contrast text that vanishes in daylight. Both look fine on the designer’s monitor and fail in a customer’s yard.
Where to start
Go outside with your phone in one hand and try to call your own business from your website. Whatever slows you down is what is slowing down a customer standing next to a failed water heater.
Real Time Marketing has worked with home service contractors since 2016: plumbing, HVAC, roofing, electrical and other trades, nationwide, from our office in Bradenton, Florida. Agreements are month-to-month. See our website design or book a strategy call.
