Een nieuw product vindbaar vanaf dag één

We bouwden de site van nul in Astro, met GSAP en Lenis voor de beweging. Er was geen ontwerp om op voort te bouwen, alleen een export van de Franse site in het Engels en Frans, met zesentwintig productvideo's. Daaruit kwamen de inhoud en het beeld. De kleuren, de letters en de maten staan als vaste waarden in één bestand, zodat elke pagina dezelfde taal spreekt.

De homepage legt het product uit in zeven panelen, elk met een eigen productvideo, en in vier sferen: een warme middag, de avond, de barbecue en het terras van een zaak. Daarnaast een productpagina met de onderdelen en de specificaties, een pagina voor bedrijven met een offerteformulier, een pagina om te bestellen, en de vragen, de technische informatie en een pagina voor resellers.

Alle tekst staat in data en niet in de opmaak. Uit één bestand ontstaan zeven landingspagina's: drie voor wie een alternatief zoekt voor losse tuinspullen, verlichting of een oplaadpunt, en vier voor de tuin, hotels, restaurants en evenementen. Een nieuwe pagina is een blok tekst erbij.

Voor zoekmachines en AI-assistenten staat er per pagina structured data (product, aanbod, organisatie, kruimelpad en veelgestelde vragen), een sitemap, een llms.txt en een llms-full.txt die uit dezelfde data worden gemaakt, en een robots.txt die dertien AI-crawlers bij naam binnenlaat.

Op een groot scherm schuiven de zeven functies en de vier sferen zijwaarts voorbij terwijl je naar beneden scrolt; op een telefoon staan ze onder elkaar. Bovenaan draait een korte film van het product, opnieuw gecodeerd naar 720p zonder geluid: 3,2 MB als mp4 en 2,4 MB als webm, met een stilstaand beeld dat er meteen staat.

Op een telefoon laadt die film niet. Daar staat een vaste foto van de SunBase aan het zwembad, die in één keer zegt wat het is en de download scheelt. Wie op zijn toestel minder beweging heeft gevraagd, krijgt ook op een groot scherm alleen het stilstaande beeld.

De eerste versie telde 44 pagina's in twee talen. Daarna liepen er rondes met de klant, en die maakten de site kleiner en scherper. De vergelijkingspagina's gingen eruit, net als de hotelbrochures, waarvan de links niet werkten. Opbergruimte verdween als functie, want de lade is om te serveren. De gedachtestreepjes gingen uit alle teksten, en de koppen gingen van zwart naar halfvet, omdat ze te zwaar voelden.

Toen koos de klant voor alleen Nederlands, eerst voor nu en later voorgoed. Omdat alle tekst in data stond, was dat een opruimronde van ruim zeshonderd regels en geen verbouwing, en bleven er twintig pagina's over. En pre-order werd bestellen: het woord zei dat het product deze zomer misschien niet zou komen, terwijl de levering rond was. Het adres ging mee, van /pre-order naar /bestellen, met een doorverwijzing zodat gedeelde links bleven werken.

De webshop komt later, op Shopify. Tot die tijd wijzen alle bestelknoppen op de site, 21 in de build, naar een eigen bestelpagina met een formulier. Ze lopen allemaal via één functie, dus als de winkel opengaat zet één regel ze om naar de shop.

De formulieren openden eerst een mail in het mailprogramma van de bezoeker. Nu gaan ze naar een kleine afhandeling in PHP op de server, met een onzichtbaar veld tegen spam en een controle aan de serverkant, en daarna naar een bedankpagina. De mail zelf gaat over SMTP; die kant en de uitrol bouwde een tweede ontwikkelaar, die de hosting beheert. De site draait bij Hostmatters achter Cloudflare, en elke push naar de hoofdtak bouwt hem op GitHub en zet hem via FTPS live.