Skip to content
A portfolio gallery, not a wall of text
Website and structure

Mobile first: your landscaping website on a phone

Most landscaping enquiries start on a phone in the evening. What that means for your number, forms, tap targets and loading time — and what waiting costs you.

14 min read Mobile NutzungLadezeitAnfrageformularTelefonnummerGalabau-Website

The job for a new terrace rarely begins where you would expect it. Not in the office, not at a desk, not during business hours. It begins in the evening, once the children are in bed, when someone sits on the sofa with a phone in hand and looks through the window at an area that has not been what it should be for years. That is the moment when people search, compare and decide whether anyone will be called tomorrow. The screen where this happens is about the size of a palm, the connection runs over mobile data or a tired home network, and patience is short because two other local firms are open in neighbouring tabs. Anyone judging their landscaping website on the office computer sees none of this: there the connection is fast, the type is easy to read, the form fits on screen and the phone number sits in the top right. On a phone that same number is sometimes an image, the form has eleven fields, and the home page pulls in a photograph at full camera size. This article sets out what follows in practice: which parts belong to the small screen first, what waiting time costs, and how to check both on your own phone without any tools.

The evening enquiry happens on a phoneTap 05123 9579000 to callHeader image at web sizeSend enquirySHORT FORMNamePhone numberTown and tradeSubmitFour places decide the evening1Number as a dial linkOne tap starts the call. No copying digits,no transposed numbers, no going back.2Large tap targetsButtons sized for a thumb rather than a mouse pointer,with space between them.3Short formFour required fields: name, phone, town, trade.Photo and description stay optional.4Light imagesResize photographs before uploading them.A heavy header image costs you the evening enquiry.

Key takeaways

  • Most landscaping enquiries do not start at a desk but on a phone in the evening: the prospect is on the sofa, has the area in mind and opens three local firms one after another.
  • A phone number that can be tapped saves the caller from copying digits and saves you the calls that never arrive because of a transposed number; numbers set inside graphics are effectively unusable on mobile.
  • The biggest brake on landscaping websites is photographs at camera size: a single unprocessed image often weighs more than an entire page and costs several seconds of waiting on mobile data.
  • Four required fields — name, phone number, town and trade — are enough for an enquiry you can assess; every further required field costs you drop-offs on a handheld screen without improving the enquiry.
  • The most reliable test is your own phone away from the company network: load the home page on mobile data, tap the number, fill in the form one-handed — the bottlenecks show up within a quarter of an hour.

Where the enquiry actually begins

In landscape gardening the working day of the business and the working day of the customer run in opposite directions. While the crew is out on site, the prospect is at work too. He becomes free once your business has finished for the day. That is exactly when the search starts, and it starts on whichever device happens to be within reach. That is rarely the computer in the study; it is the phone on the arm of the sofa.

This situation has three properties that matter more for how a website is built than any question of styling. First, attention is divided: the television is on, someone is talking, the phone buzzes. Second, usually only one hand is free, often the weaker one. Third, comparison is cheap. Going back to the results list and opening the next website costs two movements of a finger, and if something appears faster there, the prospect is gone without ever experiencing it as a decision.

From this follows an uncomfortable conclusion: the version of your website that carries most buying decisions is the one you look at least often yourself. Owners check their site on a computer because that is where the bookkeeping lives anyway. The prospect checks it on a screen a tenth of the size, over a connection switching between two masts. Treating both views as the same thing means improving the wrong one.

Mobile first is not mobile only

This is not about neglecting the desktop view. It is about the order in which you design. Building a page for the palm of a hand first forces an early decision about what really belongs at the top — service, service area, phone number, route to an enquiry. That decision improves the desktop page as well. The reverse route does not work: a page designed for a large screen can be squeezed together, but the ranking of its content stays wrong.

What a slow page build costs

Waiting on a website does not behave like waiting in a queue. In a queue you stay because you have already invested. On a website the visitor has invested nothing; he tapped an address and is waiting for a first sign of life. If the screen stays blank, the result is not annoyance but a quiet exit. And that exit stays invisible: it appears in no inbox, no call reveals it, an enquiry is simply missing that you never knew about.

It is made worse by the fact that waiting time on mobile does not build up in a straight line. A page made of many separate parts — images, fonts, maps, embedded review widgets — has to request each one, and over mobile data every request costs time for setting up the connection on top of the data itself. On an office machine with fibre this goes unnoticed. On the edge of a village with two bars of signal it adds up to seconds of blank screen.

The expensive part is not the lost time but the moment at which it is lost. The exit happens before the first word about your work. Your paving quality, your references, your service area, your availability — none of it was ever read. A business can be the strongest in the region and still lose out because nobody resized a photograph for the website.

  • An exit caused by waiting produces no feedback: an enquiry is missing, but nobody complains about it.
  • On mobile it is not only the amount of data that counts, but also the number of separately loaded parts.
  • The first visible element decides: if nothing appears within a few seconds, the competing firm is one tap away.
  • Checking your own site only on the office network measures the office connection, not the prospect's.
  • Loading time hits the home page and the portfolio gallery hardest, because that is where the images sit.

Of all the improvements you can make to a trade website, this is both the smallest and the most effective: the phone number has to be tappable. Technically it is then not text but a link that opens the dialler. The prospect taps once, sees the number in the keypad and confirms. Between the thought of calling and your phone ringing there are two movements.

Without that link the number gets copied by hand, and copying is where calls are lost. The prospect memorises the digits, leaves the page, opens the keypad, mistypes, comes back, looks for the number again. In practice a share of these attempts breaks down at the second group of digits. Worse still is a number embedded in a graphic — in the header image or a designed banner. It cannot be tapped, selected or copied.

The dial link belongs together with a statement of when somebody actually answers. A number without times promises constant availability that a business with a crew outside cannot keep. Naming two honest windows instead shifts the expectation without losing the enquiry: the prospect still calls, leaves a message and knows when to expect a call back. Both together — tappable number and honest times — belong on every page, not only on the contact page.

Phone number in the header of every page
<a href="tel:+4951239579000" class="phone">
  05123 9579000
</a>
<span class="hours">
  Call-backs on working days 12:00-12:30 and 17:00-18:00
</span>

<!-- Wrong, because it can be neither tapped nor copied: -->
<img src="/images/header-phone.png" alt="Telephone">

Tap targets for thumbs, not for mouse pointers

A mouse pointer is precise, a thumb is not. It hits an area rather than a point, and while tapping it covers exactly what it hits. Buttons that look elegant on a desktop therefore become a test of patience on mobile: the thin line of text linking to the service page, the menu symbol in the corner, the tightly stacked entries of a dropdown. What gets hit is the neighbouring element, and that leads somewhere else.

Two dimensions decide: the area itself and the distance to the next area. A button the width of a thumb with a few millimetres of air around it is hit reliably — standing up, one-handed, with working hands in winter. Without spacing even a large area helps little, because the neighbouring target begins immediately. Dropdowns for the trade, consent checkboxes and anything sitting side by side in a footer are affected most.

The second question is reach in the literal sense. A phone is held low, and the thumb comfortably covers the lower half of the screen. Anything glued to the very top requires regripping. That is why a slim bar fixed to the bottom edge with two targets — call and send an enquiry — works better on a trade website than any prominent button in the header.

Number in the header

Tappable, on every page, with your actual availability times in small type underneath. Not a graphic and not plain text.

Bar at the bottom edge

Two targets that travel with the page: call and send an enquiry. They sit where the thumb already is and do not cover the content.

Space between targets

Two tappable areas need air between them. Without it the thumb hits the neighbour, especially in dropdowns and checkboxes.

Form in a single column

Fields stacked, full width, labels visible above the field. Two fields side by side become two fields that are too narrow on mobile.

Images at web size

Photographs are resized before uploading. The gallery shows small previews and loads the large version only when one is tapped.

Times kept in view

Availability and response time sit next to the route to an enquiry, not three screen lengths further down in the footer.

The form in the palm of a hand

A form that looks compact on a desktop turns into a long scroll on a phone. Ten fields mean ten keyboard openings, ten zooms, ten moments with half the screen covered. Every required field is a hurdle where the process can break, and it breaks quietly, by tapping away. The rule for the small screen is therefore stricter than for the large one: required means only what is genuinely needed for a first assessment.

In landscaping that comes to four details: name, phone number, town and trade. The town determines whether the job falls inside your radius; the trade sorts the enquiry and sets its urgency. Everything else — description, preferred date, a photograph of the area, square metres — stays optional. Whoever fills it in shortens the site visit. Whoever cannot be bothered in the evening still sends the enquiry, and that is the point. How such an enquiry form can be structured without needing two clarifying calls afterwards is a subject of its own.

Then come the small things that sound technical and feel very practical. A field for a phone number should open the number keypad, not the letter keyboard. An email field should offer the at sign. The label belongs above the field rather than inside it as a placeholder, because a placeholder disappears while typing and then nobody remembers the question. And the submit button must not sit behind the opened keyboard. Points like these cost minutes to implement and enquiries when ignored.

  • Limit required fields to name, phone number, town and trade, and keep everything else optional.
  • One field per row, full width, label visible above the field rather than as a vanishing placeholder.
  • Open the number keypad for phone numbers and the matching keyboard for email addresses.
  • Offer the trade as a dropdown with entries tall enough that a thumb does not miss.
  • Allow an optional photo attachment straight from the camera so the area can be photographed on the spot.
  • Follow the submission with a confirmation naming your response time and a tappable phone number for impatient cases.
  • Show error messages directly at the field concerned, not collected at the top of the page.

Images are the weight of the page

In almost every landscaping project the cause of a sluggish page build sits in the same place: the photographs. That is not carelessness but a consequence of the workflow. The shots are taken on site with a phone, sent to the office as a message and uploaded to the website from there. They then carry the camera's full resolution, often many times what any screen can display. On the page the difference is invisible — in the loading time it is not.

A portfolio gallery with a dozen unprocessed shots can therefore transfer more data than every other page of the site put together. On mobile data that means a wait during which the prospect turns back. The remedy is unspectacular and needs doing once: bring images down to a sensible width before uploading, compress them moderately, and build the gallery so that small previews appear first and the large version is fetched only on tap.

This is also the point where image quality and loading time stop contradicting each other. A good photograph still works when it is smaller; a poor one does not improve with resolution. A business such as Viktor Waldbauer Garten- und Landschaftsbau from Nordstemmen shows sand-set slabs, terraces, cisterns and complete garden installations — subjects that live on framing, light and viewing angle, not on file size. What matters in the photographs themselves is covered on the page about photos for your website.

AspectStraight from the cameraPrepared for the website
Image widthFull camera resolution, far beyond the display widthReduced to the width actually needed
File sizeSeveral megabytes per shot (project experience)A fraction of that, with no visible loss (project experience)
Gallery of twelve imagesA long wait over mobile dataPreviews at once, full version on tap
OrientationOften portrait, as shot on siteLandscape for the page width, portrait used deliberately
Effect on a phoneBlank screen, then everything at onceBuilds from the top down, readable from the first second
EffortNo effort when uploading, effort for the visitorPrepared once, faster for good

Type, contrast and the one free hand

After loading time, the second reason for people leaving is readability. At a computer the reader sits some seventy centimetres from a large screen; on the sofa the phone lies at an angle, light comes in from the side, and the reading glasses are in the kitchen. Fine grey type on a light background, restrained and tasteful in the draft, becomes work under these conditions. Anyone serving private gardens should assume that a substantial share of their clients is over fifty.

In practice that means a generous base type size, clear contrast between text and background, short paragraphs and subheadings that give the eye something to hold on to. Text laid over images is particularly awkward on mobile, because the visible crop changes with the screen width and the type then slides across a bright patch. A calm band of colour behind the text, or text placed below the image, is safer. These decisions cost nothing and take effect on every page at once.

If you cannot comfortably read your own website in daylight standing in a car park, the prospect cannot read it on the sofa in the evening either.

A principle for checking on mobile

The test on your own phone

Assessing this needs no measuring tools and no appointment with an agency. It needs a phone, a connection away from the company network and a quarter of an hour. The order matters: the test does not start on the home page but in the search, the way a prospect starts. And it does not end with looking, but with a submitted form.

While doing it, write down places rather than impressions. "Feels cluttered" helps nobody; "the number in the header does nothing when I tap it" is a task with a clear ending. Such a run usually produces five to ten concrete points, half of which can be dealt with in an afternoon. The rest becomes the basis for a conversation about structure or a relaunch — but then with evidence instead of a hunch.

Order of work: what to change first

The test run produces a list, and lists do not get worked through in spring. It pays to sort the points by effect per effort. Two things sit at the top, both doable in a morning: the tappable phone number with honest times, and resizing the images on the home page and in the portfolio gallery. Neither depends on the rest of the design, and both take effect on every page straight away.

The form comes next. Reduce the required fields, stack them, assign the right keyboards, add a confirmation with a response time. That is a job of a few hours and it visibly changes the number of enquiries that are started and actually sent, measurable in your own inbox. Only after that is it worth looking at tap targets, type sizes and contrast, because those changes reach into the design and want planning as a whole.

If the finding at the end is that the site is not built for small screens at all — because the menu cannot be operated on a phone, tables run off the side, or the home page is delivered as one large graphic — then patching costs more than rebuilding. A new website starts at 1,490 euros net, larger sites with several trade pages at 2,900 euros net; the breakdown is on the pricing page.

Two jobs before all others

If you change only two things this season, change these: make the phone number tappable and bring the images down to web size. The first removes the hurdle in front of the call, the second removes the wait in front of the first sentence about your work. Everything else — form fields, tap targets, type sizes — only takes effect once those two points are right, because they come before all the rest.
This article is based on data from our own project experience — from web projects for landscape gardening businesses and the patterns observed there in enquiries made from mobile devices. The orders of magnitude given are values from those projects rather than surveyed market figures, and they do not replace measurement in your own business.

Related Articles