Wat is dit?
Een testversie van energiehubs.nl om te beoordelen of de inhoud meer ruimte moet krijgen. Je wisselt per pagina tussen de huidige breedte (8 kolommen) en het voorstel (10 kolommen). Het is een momentopname van 12 oktober 2026, niet de live site.
Wat is er gemeten?
- Huidig: 902px, dat is 8 van 12 kolommen. De site heeft geen letterlijk kolomraster in de code. De breedte komt uit één ontwerptoken,
--container-4: 902px. In de CSS staat een referentiebreedte van 1360px; met 12 kolommen en 16px tussenruimte komt 8 kolommen op 902px uit. Dat is afgeleid, het Figma-ontwerp kan het bevestigen.
- Voorstel: 1130px, dat is 10 kolommen. 228px breder, ofwel 25% meer ruimte.
- Getest op 28 pagina's op 1440px schermbreedte: alles laadt, geen horizontale scroll, en de container volgt het raster (knop Raster).
Wat moet de websitebouwer aanpassen?
De wijziging is klein: het token naar 1130px, plus vier plekken waar 902 los is ingetypt.
- Token
--container-4 op .radix-themes: 902px → 1130px.
- Het blok Actueel op de homepage (
actual-hero_container, max-width: 902px).
- De carrousel met praktijkervaringen (
--slide-size: calc(902 / 1360 * 100cqw)).
- De stappagina's van het stappenplan (inline
--max-width-md: 902px en --max-width: 950px).
- Het
sizes-attribuut van de hero-afbeeldingen ((max-width: 901px) 100vw, 902px), anders laden ze in te lage resolutie.
Waar moet je op letten bij het beoordelen?
- Lange regels in lopende tekst. Op artikel-, begrip- en stappagina's gaat de tekst van ongeveer 85–95 naar 105–120 tekens per regel. Voor leesbaarheid geldt meestal 90 als bovengrens. Een tussenvorm is de container op 10 kolommen en de lopende tekst op 8.
- Lijstkaarten profiteren niet. Op de toolspagina, en waarschijnlijk op andere pagina's met dezelfde kaarten, blijft de kaarttekst op 545px begrensd. Daar komt rechts alleen witruimte bij.
- Het verschil zie je pas op een breed scherm. Onder ongeveer 1180px schermbreedte zijn beide standen gelijk; op telefoon en tablet verandert er niets.
Beperkingen van deze testversie
- De pagina's zijn stilstaande kopieën zonder scripts. Menu's, filters, zoeken, de kaart van de initiatievenradar, video en carrousels werken hier niet.
- Links naar pagina's buiten deze 28 openen de live site in een nieuw tabblad.
- Alleen de breedte is aangepast. Telefoon- en tabletweergave zijn niet apart getest.