A homeowner arriving on your site is answering one question before any other: can these people help me, here, now. Visual hierarchy is simply whether your page lets them answer it without hunting.
The three things that come before anything else
Most advice on hierarchy talks about leading with your value proposition. For a trade, the visitor is not evaluating a proposition. They are checking three facts, and they will leave if the facts are not there.
- What you do. The trade, in the words a customer uses. Not “mechanical solutions”.
- Where you do it. Somebody two towns over needs to know within a second whether to keep reading.
- How to reach you now. A tappable phone number, and if it matters for the job, whether you are open.
Everything else on the page: your history, your accreditations, your process, is read only by people who have already cleared those three. Putting it first spends the attention you needed for the basics.
What the F-pattern does and does not tell you
The F-pattern is the most quoted finding in web design, and it is quoted well past what it describes. It came from eye-tracking of text-dense pages on desktop screens: readers swept across the top, made a shorter sweep lower down, then ran down the left edge.
Most of your traffic is not that. It is a phone, held in one hand, showing a single column. There is no left rail to scan and no second horizontal sweep, because there is nothing to the right. On a narrow screen the reading pattern is simply top to bottom, which means the order of your sections is your hierarchy. A trust badge you placed in a right-hand column on desktop lands somewhere near the bottom on a phone, after everything else.
Design the vertical order first, on a phone, and let the desktop layout follow from it.
Size and weight do the work. Colour does less than you think
Contrast in size and weight is what makes something read as important, and it survives conditions colour does not.
Consider where your visitor actually is: standing in a yard looking at a failed unit, in bright sun, screen dimmed, possibly in a hurry. A pale accent colour that looked emphatic on a designer’s monitor disappears entirely. Around one man in twelve also has some form of colour vision deficiency, so anything signalled by colour alone is signalled to a fraction of your audience.
If an element matters, make it bigger or heavier, not merely a different hue. Use colour to confirm the emphasis rather than to create it.
One primary action per screen
The most common hierarchy failure on contractor sites is not clutter. It is five calls to action of identical weight: call, submit a form, live chat, book online, text us.
Offering everything equally is the same as offering no guidance. Pick the one you actually want, for most trades that is the phone call, give it the strongest treatment on the page, and let the others be visibly secondary. They can still be present. They should not compete.
Where the trust material belongs
Licence number, years in business, service area, insurance, reviews: this is what a homeowner checks before letting a stranger into the house, and it decides more bookings than the design of the header does.
But it is checked second, after they have established you might be relevant. That puts it below the opening block and above the fold’s worth of general copy: near the top of the page’s body, not buried on an about page nobody opens. The order matters more than the styling.
How to check it without a testing programme
You do not need traffic or statistics for this one. Show someone who has never seen the site the home page for five seconds, take it away, and ask two questions: what does this business do, and where does it work.
If they cannot answer both, the hierarchy has failed, and no amount of refinement below that point will fix it. Do this with three or four people and you will learn more than a split test could tell you, and on most contractor volume, a split test cannot tell you much anyway.
Frequently asked questions
Does the fold still matter?
Not as a hard line, since people scroll readily. It matters as an ordering problem: what you put first is what gets read, and on a phone that is a short list.
Should I design for desktop or mobile first?
Mobile, for almost every trade. It is where most of your visitors are, and the narrow column forces you to decide what genuinely comes first rather than spreading things across a wide layout.
How many calls to action should a page have?
One that dominates, with others available but clearly secondary. Several of equal weight is not choice, it is indecision, and it reduces the number of people who take any of them.
Is the F-pattern still relevant?
On text-dense desktop pages, somewhat. On the single-column mobile layouts most contractor traffic sees, it does not describe anything: reading runs straight down, so section order is what you are designing.
Where to start
Open your home page on a phone and screenshot the first screen without scrolling. If a stranger could not name your trade, your area and how to ring you from that image alone, that is the fix, and it comes before every other design change on your list.
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.
