WWAP
Een nieuwe website voor stichting WWAP, van een grondige audit van de oude site tot een snelle, toegankelijke opbouw met Astro en Svelte 5.
De vraag
De oude website van stichting WWAP was traag, rommelig op mobiel en voldeed niet aan de toegankelijkheidseisen. Daardoor konden bezoekers, en ook zoekmachines, de site minder goed gebruiken. De vraag was niet om dit op te lappen, maar om een nieuw platform neer te zetten dat wél aan de WCAG-richtlijnen voldoet.
Mijn rol
Vanuit bydr.studio doe ik het hele traject: van de audit van de oude site tot het ontwerp en de opbouw van de nieuwe frontend.
De audit
Ik begon met een Lighthouse-audit van de oude site: Performance 62, Toegankelijkheid 85 en SEO 92.
Daarna zocht ik de oorzaken uit, zoals afbeeldingen van 5 MB, ontbrekende labels voor schermlezers en losse CSS-bestanden die het laden van de pagina blokkeerden. Op mobiel, tablet en desktop vond ik elf concrete problemen, waaronder wisselende typografie, knoppen die te klein zijn om goed aan te tikken en een navigatie die op tablet ontbrak.
Alles kwam samen in een adviesrapport met gerichte oplossingen.
Ontwerp & ontwikkeling
Op basis van de audit koos ik voor Astro met Svelte 5. Astro levert lichte, snelle pagina’s; Svelte 5 gebruik ik alleen voor de onderdelen die interactief moeten zijn. De content komt uit Sanity, zodat de stichting zelf teksten kan aanpassen.
Vanaf de eerste regel code let ik op wat in de audit misging:
- Overzichtelijke code: een CSS-opzet met custom properties en componenten volgens atomic design.
- Geen verspringende pagina: fonts staan lokaal en worden vooraf geladen.
- Toegankelijk: knoppen die groot genoeg zijn om aan te tikken, en labels voor schermlezers.
Ik plan het werk in issues op GitHub. Op dit moment bouw ik de header en de footer.
Het resultaat
De site is nog in ontwikkeling en te volgen op GitHub. Het doel: minstens Performance 96, Toegankelijkheid 93 en SEO 100, en een site die voldoet aan de Europese regels voor digitale toegankelijkheid.
Wat ik leerde
Een oude site blijven repareren kost vaak meer energie dan het probleem bij de kern aanpakken. Door een nieuwe basis te leggen met tools die bij het doel passen, heb ik vanaf de eerste regel code grip op snelheid en toegankelijkheid. En een audit is pas waardevol als je de fouten vertaalt naar wat ze de opdrachtgever kosten: een trage site of slechte navigatie op mobiel kost je uiteindelijk bezoekers.