Case study Web design · Development · UX · SEO

IQ Fence

Website, configurator and local SEO for a fencing company.

A trilingual website for a fence installer in Szczecin, with a seven-step configurator that turns a vague price question into a complete, structured enquiry.

Visit the live site (opens in a new tab)
Client
IQ Fence
Sector
Fences and gates, installation
Languages
PL · EN · DE
Scope
Design, development, SEO
Scale
60+ URLs in the sitemap
IQ Fence homepage on desktop — the headline about fences with installation in Szczecin, a photo of an installed fence and two call-to-action buttons.
First screen — location in the headline, two routes to an enquiry and a trust row.
IQ Fence homepage on a phone, in a single-column layout.

At a glance: Challenge, Solution, Delivered outcome

Challenge
A fence's price depends on many variables, so a generic contact form produces incomplete enquiries and endless follow-up questions.
Solution
A configurator guides the visitor through seven decisions, validates input as they go and shows indicative figures, then sends everything as a single enquiry.
Delivered outcome
A complete site in three languages, with the configurator, a blog built from source files and a structure designed for local SEO.

My role

  • Information architecture and site structure
  • Interface design and component system
  • Front-end (HTML, CSS, JavaScript)
  • Enquiry configurator — logic, validation, drafts
  • PHP form handling
  • PHP blog generator
  • Technical and content SEO

Stack

  • HTML
  • CSS
  • Bootstrap 5.3
  • Vanilla JavaScript
  • PHP
  • Apache
  • Schema.org
  • Google Consent Mode

Context

A fencing company that needed more than a brochure site

IQ Fence designs, supplies and installs panel, palisade and aluminium fences and gates in and around Szczecin, Poland. It is a sub-brand of IQ Solar.

The site has one job — to take a visitor from first impression to a specific enquiry. Every page offers two routes, a configurator estimate or a free on-site measurement. It runs in Polish, English and German, because part of the audience lives along the Polish–German border.

Challenge

"How much will it cost?" has no simple answer

A fence's price depends on type, model, colour, length, height, foundation, gates and accessories. A plain contact form therefore leads to several rounds of messages before the company can even prepare a quote.

The goal was to reverse that order — gather the full picture before the enquiry arrives, without overwhelming a customer who is often buying a fence for the first time.

  • Each enquiry should contain everything needed to prepare a quote.
  • Visitors should not need trade vocabulary to get through.
  • The configurator structures an enquiry — it is not a guaranteed-price calculator.

Configurator architecture

Seven steps, one decision at a time

The configurator splits the purchase into seven steps — order type, fence type, model and colour, dimensions, foundation, gates and accessories, and a summary with contact details. A progress bar shows where the visitor is and how much is left.

Large choice cards and hints such as "Most popular" or "Not sure" take the pressure off picking correctly. Options only appear when they are needed — gates, wickets and accessories open behind a toggle.

Step one of the configurator — a choice between full installation and product only, with a seven-step progress bar.
Step 1 — order type. The progress bar shows the whole journey from the start. Enlarge

Choice logic

Options that follow what the visitor has already chosen

Once a fence type is chosen, the configurator loads only the matching models and filters the RAL colour palette for that product, so visitors cannot assemble a combination the company does not sell.

A colour outside the palette is still possible. The configurator then immediately flags a surcharge of about 10% and a longer lead time — roughly 7 working days — before the visitor moves on.

Recording Steps 1–4 on desktop. Recording edited and sped up.

Validation and estimates

Errors caught immediately, figures shown immediately

Dimensions are checked as they are typed. A run that is too short — under 5 metres — gets a clear message straight away instead of an error after submission.

From length, height and gate width, the configurator estimates the number of spans, posts and the fence area live. These are indicative figures that help the visitor grasp the scale; the final quote is still confirmed by an on-site measurement.

The dimensions step with filled fields (42 m, 150 cm, a 4 m gate, 2 corners) and an estimate panel — 16 spans, 19 posts, 57 m².
Estimates calculated live — indicative, not a price. Enlarge
The fence length field with a value of 3 m highlighted in red and a message about the 5 m minimum.
Inline validation — 5 m minimum. Enlarge

The enquiry

Everything in one structured enquiry

The final step gathers the whole configuration into a readable summary and adds contact details. The company receives a single e-mail enquiry with everything needed to prepare a quote.

The draft is saved in the browser, so a visitor who stops halfway does not start over. A small PHP back end handles the form — no database involved.

Step 7 of the configurator — the "Your configuration" summary listing order type, fence type, model and colour.
Step 7 — the summary before sending. Enlarge

Mobile

Full functionality on a phone

On a phone the layout collapses into a single column and buttons go full width. The configurator keeps every step and option — choice cards, the RAL palette and dimension fields are sized for thumbs.

Recording The configurator on a phone. Recording edited and sped up.
The configuration summary on a phone.

Content and SEO

A structure for local search, and a blog built as a system

Every page targets a specific local intent through its title, description and a single H1. Product pages carry FAQs, the site publishes a pricing page, and a service-area section lists the towns covered.

I wrote a PHP blog generator that builds posts in three languages from source files, along with the post index, the sitemap, a projects section on the homepage and WebP image variants. Posts describe real installations.

Underneath — structured data, hreflang for three languages, a sitemap with more than 60 URLs, readable Polish slugs and 301 redirects from old URLs.

  • Structured data: HomeAndConstructionBusiness, Service, FAQPage, BreadcrumbList, BlogPosting
  • hreflang for PL / EN / DE and a single canonical HTTPS domain
  • Cookie banner with Google Consent Mode
The palisade fence product page — a full-bleed photo with a headline and a description of the system.
A product page — one intent, one H1.
The section about a fencing company in Szczecin and the surrounding area, with a list of towns covered.
A blog post describing a fence installation for a residential development, with a photo of the building.

Technology and quality

A lightweight stack that runs on ordinary hosting

The site is static HTML with Bootstrap 5.3, vanilla JavaScript and PHP. It runs on ordinary Apache hosting with no framework and no database — easy to maintain and hard to break.

In a Lighthouse lab test on 27 October 2026, the desktop homepage scored 100 for performance and the configurator 99. SEO scored 100 in every run.

Measurements

Measured on · Lighthouse, lab test

Performance — homepage (desktop)
100
Performance — configurator (desktop)
99
SEO — every run
100

Single lab runs, not field data from real traffic.

Contact

Have a website in mind? Let's talk.

Send me a few lines about the project — what the business does, what the site should achieve and when you need it. I reply personally.

Send me an email

Opens your email app.

Open file