Lumatic

Het doel

De aanpak

• Een eigen stijl: Eclips. Een rode zon achter een zwarte maan, een sterrenhemel met parallax en een scroll-verhaal dat eindigt bij het offerteformulier.
• Zo simpel mogelijk, zo onderhoudbaar mogelijk. PHP 8 zonder framework, zonder database, zonder externe diensten en zonder build-stap. Draait op elke gewone PHP-hosting.
• Foto’s via mappen. In plaats van een beheerpaneel met login zetten ze foto’s in een map; de site maakt er zelf snelle WebP-versies van. Minder aanvalsoppervlak en niets om bij te houden.
• Privacy zonder gedoe. Geen cookies, geen trackers en geen Google Fonts, dus geen cookiebanner. Offerteaanvragen gaan per e-mail en worden niet op de server bewaard.

Wat we bouwden

• Homepage met scroll-verhaal. Hero, over ons, diensten, een fotostrook, werkwijze, projecten en het offerteformulier.
• Vier dienstpagina’s. Operator, Laser, Verhuur en Audio, elk met een eigen pagina en een offerteknop die de juiste dienst al aanvinkt.
• Projecten en galerij. Een overzicht met filter per dienst en een pagina per project, automatisch opgebouwd uit fotomappen.
• Offerteformulier. Werkt met én zonder JavaScript, met foutmeldingen per veld en spambescherming zonder cookies of captcha (een verborgen veld, een tijdcontrole en een limiet per IP).
• Snel en vindbaar. Ongeveer 580 KB voor de hele site zonder foto’s, met titels, beschrijvingen, sitemap en gestructureerde data.
• Toegankelijk. Contrast van minimaal 4,5 op 1, zichtbare focus, grote klikdoelen, toetsenbordbediening en geen animaties bij “minder beweging”.

De lastigste uitdaging

Een lus in de header overschreef een variabele van de pagina, waardoor de laserpagina de tekst van Geluid toonde: header, footer en onderdelen delen dezelfde scope. Sindsdien hebben die onderdelen eigen variabelennamen.

Getest

De site is getest met 28 backendtests en 18 UI-tests in een headless browser.