18 augustus 2026

Overzicht

EVH Renovatie plaatst ramen, deuren en buiten schrijnwerk in Putte, België. Hun klanten zijn eigenaars van woningen binnen een straal van ongeveer dertig kilometer die kiezen tussen drie lokale installateurs, en die die keuze 's avonds op hun telefoon maken, in het Nederlands. De site heeft één taak: van die zoektocht een offerteaanvraag maken. Ik heb ze van begin tot eind ontworpen en gebouwd.

UX-onderzoek

Het onderzoek hier is geen oefening in stakeholderinterviews, het is een specifieke aankoopbeslissing begrijpen.

• De zoekopdracht is lokaal en specifiek. Niemand zoekt op "renovatie". Ze zoeken op een product en een plaats — screens, rolluiken, een veranda, horren — wat betekent dat één pagina per dienst, elk apart rankbaar, beter werkt dan één dienstenpagina met ankers.
• Vertrouwen is visueel en onmiddellijk. Een eigenaar die installateurs vergelijkt, zoekt bewijs van afwerkingskwaliteit. Foto's van uitgevoerd werk doen meer dan welke hoeveelheid copy ook, dus het portfolio is een hoofdpagina in plaats van een voetnoot.
• Het telefoonnummer is de conversie. Veel klanten vullen helemaal geen formulier in; ze bellen. Daarom staat het nummer permanent in de header van elke pagina, aantikbaar.
• De twee vragen zijn verschillend. "Ik heb een vraag" en "Ik wil een prijs voor deze specifieke klus" vragen andere velden. Beide door één formulier duwen verliest de tweede, en dat is net de waardevolle.

UI-richting

• Fotografie draagt de pagina. Een full-bleed hero van echt geplaatst werk, ter plaatse gefotografeerd, met de tekst erover. Het product is het vakmanschap, dus het beeld is het argument.
• Een warm, industrieel palet: antraciet en één bouw-oranje voor acties. Ingehouden genoeg om professioneel te lezen, warm genoeg om niet corporate aan te voelen.
• Helder, zelfverzekerd Nederlands. Ramen & deuren op maat. Geen slogans, geen vulling. Een klant van een installateur wil in de eerste zin weten wat je doet en waar je het doet.
• Mobile-first, want het verkeer is dat. Grote tapdoelen, een header die het telefoonnummer bereikbaar houdt, en formulieren die kort genoeg zijn om rechtstaand in te vullen.

Kernfuncties

• Negen dienstenpagina's — ramen, deuren, vliesgevels, veranda's, screens, rolluiken, voegwerk en horren — elk een echte pagina met eigen metadata en structured data, geen tab.
• Filterbaar portfolio: afgewerkte projecten gefilterd per categorie, elk met een foto en een korte beschrijving van het werk.
• Een contactpagina met twee modi: een tab voor algemene vragen en een volledige tab voor offerteaanvragen die de dienst, de locatie en de details vastlegt die een installateur nodig heeft om een klus te prijzen zonder tweede telefoontje.
• Contactgegevens als content: adres, telefoon, e-mail en openingsuren op de plek waar een klant ze zoekt, niet weggestopt achter een formulier.
• Een selfservice-backend: inzendingen komen terecht in een database die de klant zelf kan lezen, naast de portfolioprojecten en getuigenissen, zodat de content van de site van hen is om aan te passen.

Architectuur

Een React-site die als statische HTML shipt. De site is gebouwd met Vite en React, maar shipt niet als een client-gerenderde single-page app. Een post-buildstap server-rendert elk van de twaalf routes en schrijft per route een statisch HTML-bestand, met de volledige head — title, meta, canonical, Open Graph en alle structured data — en de volledig gerenderde body. De client hydrateert daarna dezelfde markup. Dat is precies om de reden belangrijk waarom de site bestaat. Een crawler of een social scraper zonder JavaScript ziet nog steeds correcte metadata en echte content, en een eigenaar op een telefoon met mobiele data ziet de pagina meteen in plaats van een spinner. Voor een bedrijf waarvan het hele acquisitiekanaal lokaal zoeken is, zou een lege shell naar een crawler sturen de duurste beslissing zijn die er bestond. Een backend die de klant zelf bezit. De content en formulierinzendingen draaien op PocketBase, een self-hosted backend die shipt als één binary met een eigen admininterface. Collections voor contacten, dienstaanvragen, portfolioprojecten en getuigenissen zijn geversioneerd als migraties. Voor een KMO past dat beter dan een gehost contentmanagementplatform: geen kosten per gebruiker, geen vendoraccount om te beheren, en het geheel is een bestand dat van hen is. Hosting. De statische build deployt naar Netlify. Gehashte assets krijgen een immutable cache van één jaar, geldige routes serveren hun eigen prerendered bestand, en onbekende URL's vallen terug op de app shell. Een pagina die buiten gebruik gaat, redirect permanent in plaats van een 404 te geven, want een dode link die ooit rankte, is een verspilde asset.

Gebruikte technologieën

• Frontend: React met Vite, React Router, Tailwind CSS, Radix UI-primitieven met class-variance-authority, Framer Motion voor ingehouden transities, Lucide-iconen.
• SEO: react-helmet voor metadata per route, een eigen server-render- en prerenderpipeline, JSON-LD structured data, en een gegenereerde machineleesbare sitesamenvatting.
• Backend: PocketBase, self-hosted, met geversioneerde collectiemigraties en geconfigureerde ratelimits.
• Afbeeldingen: Sharp voor beeldverwerking tijdens de build.
• Hosting: Netlify, met expliciete cacheheaders en redirectregels.

Uitdagingen en lessen

Een single-page app is de verkeerde standaard voor een lokaal bedrijf. De moderne reflex is een client-gerenderde app shippen en er een meta-tagbibliotheek bij te nemen. Voor een site waarvan de klanten via een Google-zoekopdracht op hun telefoon binnenkomen, ruil je daarmee de twee dingen in die het meest tellen: wat de crawler ziet en hoe snel de eerste paint is. De prerenderstap bouwen was het werk met de meeste hefboom in het project, en niets ervan is zichtbaar. Negen bijna identieke pagina's vragen een contentmodel, niet negen bestanden. Diensten delen een structuur en verschillen in inhoud. Ze vanuit één datamodule aansturen houdt ze consistent en maakt van een tiende dienst een datawijziging in plaats van een nieuwe pagina om te onderhouden. Kies de backend waar de klant mee kan leven. PocketBase is niet de krachtigste optie die er is. Het is één binary, met een adminpaneel dat een installateur echt kan gebruiken, en geen maandelijkse factuur die over een jaar in een ongemakkelijk gesprek verandert. De tool afstemmen op wie ze achteraf onderhoudt, is deel van het design.

Resultaat

Een snelle, volledig statische Nederlandstalige site waarin elke dienst een eigen rankbare pagina heeft, het uitgevoerde werk vooraan staat, het telefoonnummer altijd één tik verwijderd is, en een offerteaanvraag binnenkomt met genoeg detail om de klus te prijzen. De klant bezit de content en de inbox, en de site laadt sneller dan een eigenaar op mobiele data zijn geduld verliest.