Craft CMS website voor Focus Beroeps Academie

De bestaande website van Focus Beroepsacademie draaide op Craft CMS 2, een versie die nauwelijks nog werd ondersteund en alleen cruciale security-updates ontving. Het systeem gaf deprecation-meldingen, was lastig onderhoudbaar en de website voldeed niet aan de eisen voor digitale toegankelijkheid (WCAG).

De opdracht bestond uit drie pijlers:

• een volledige rebuild in Craft CMS 4
• de website digitaal toegankelijk maken
• gerichte UX- en contentoptimalisaties, met speciale aandacht voor de pagina’s Voor leerlingen en Voor ouders

Hosting bleef in handen van Accessible Minds, maar werd ondergebracht op een nieuwe, moderne serveromgeving bij onze hostingpartner Rootnet.

Huidige situatie en uitdagingen

Bij de start zagen we onder andere:

• een verouderde Craft 2-installatie met technische risico’s
• beperkte ondersteuning vanuit het CMS
• een design dat niet voldeed aan WCAG-richtlijnen (contrast, focus, hoverstates)
• onlogische lees- en scansnelheid: teksten waren breed, elementen stonden dicht op elkaar
• rommelige footer en componenten die te weinig rust boden
• te weinig tekst per pagina, met gevolgen voor SEO en vindbaarheid

Daarnaast bleek uit UX-sessies dat de inhoud van de pagina’s Voor leerlingen en Voor ouders niet logisch was opgebouwd. Informatie was verdeeld over meerdere plekken en overlapte elkaar onnodig, waardoor bezoekers moesten zoeken in plaats van worden geleid.

UX Discovery en contentstrategie

Voor de redesign van de website zijn meerdere UX discovery sessies gehouden. Vanuit die sessies zijn onder meer voortgekomen:

• flowcharts voor de belangrijkste gebruikersstromen
• wireframes voor de nieuwe pagina-indeling
• een eerste contentinventarisatie voor verschillende doelgroepen

Tijdens het reviewen van de wireframes werd duidelijk dat vooral de pagina’s Voor leerlingen en Voor ouders scherper moesten worden afgebakend.

Op basis van UX-inzichten, best practices bij andere middelbare scholen en analyses van bestaande portalen, stelden we een heldere contentverdeling voor:

Leerlingen

• Ziek melden
• Rooster
• Schoolregels
• Doorstromen naar het MBO
• Examens en stage lopen
• Lesstof, cijfers en reglementen
• Schoolleiding (korte introductie, vanuit leerlingperspectief)

Ouders

• Aanmelden kind
• Vakantieregeling
• Ouderbijdrage
• Lesstof/cijfers/reglementen (vanuit ouderperspectief)
• Schoolleiding
• Ouderraad
• Privacy

Daarnaast adviseerden we:

• minimaal 300 woorden per pagina, met duidelijke koppen en korte alinea’s
• de belangrijkste onderwerpen (zoals ziek melden, rooster, vakantieregeling, aanmelden) bovenaan te plaatsen
• relevante informatie uit de portalen where mogelijk ook op de website te tonen
• een FAQ-component in te zetten voor vragen die anders los blijven zweven

Zo werden Voor leerlingen en Voor ouders elk een logisch startpunt, in plaats van een verzamelplek van losse linkjes.

UX design en digitale toegankelijkheid

De website kreeg geen volledig nieuw merk, maar wél een UX-gedreven visuele optimalisatie op basis van het aangeleverde huisstijlhandboek. Daarbij lag de focus vooral op:

Scanbaarheid en leesbaarheid

• logischer leesvolgordes binnen componenten
• kortere tekstregels (geen te brede containers)
• meer ruimte tussen blokken en elementen

Consistentie in knoppen en interacties

• één herkenbare knopstijl
• duidelijke hiërarchie tussen primaire en secundaire acties

Digitale toegankelijkheid (WCAG)

• juiste kleurcontrasten
• duidelijke focus-indicatoren voor toetsenbordgebruikers
• logische hover- en active-states
• toegankelijkere formulieren en navigatie

Ook de footer en andere drukke onderdelen zijn opnieuw opgebouwd met meer rust, structuur en focus op wat echt belangrijk is.

Technische rebuild in Craft CMS 4

In plaats van een complexe upgrade van Craft 2 naar 4, kozen we voor een volledige rebuild:

• de website is opnieuw opgezet in Craft CMS 4
• alle bestaande componenten zijn tegen het licht gehouden en hergebruikt of verbeterd
• content is gecontroleerd gemigreerd naar de nieuwe omgeving
• alle componenten zijn flexibel opgezet, zodat Focus in de toekomst zelf pagina’s kan opbouwen
• er is ruimte gehouden voor verdere UX- en contentoptimalisaties

Na oplevering op de acceptatieomgeving:

• heeft Focus feedback kunnen geven op zowel structuur als design
• is de website geplaatst op een nieuwe, veilige server bij Rootnet
• zijn de DNS-instellingen aangepast en is de site live gezet
• is een duidelijke handleiding geleverd voor redacteuren
• is een koppeling met Google Analytics ingericht voor monitoring en optimalisatie

De oplossing

We ontwikkelden voor Focus Beroepsacademie:

1. Een volledig vernieuwde website in Craft CMS 4
2. Een helder onderscheid én betere opbouw van de pagina’s Voor leerlingen en Voor ouders
3. Een visueel opgeschoond ontwerp met meer rust, ruimte en logische leesstructuur
4. Digitale toegankelijkheid als uitgangspunt voor componenten, kleurgebruik en interactie
5. Een flexibele componentenbibliotheek waarmee Focus zelf pagina’s kan beheren en uitbouwen