Weblogbericht | 18-05-2020 | DPC Online Advies

Wat is een componentenbibliotheek precies?


Een PRO-website bestaat uit allerlei losse componenten, zoals buttons, kruimelpad en formulieren. Deze geven de voorkant van de website een bepaalde look en feel en aan de achterkant voeren ze acties uit (zoals linken naar een andere site of het openen van een formulier).
Omdat al deze componenten steeds meer onderhoud vragen, hebben wij deze in een zogenaamde ‘componentenbibliotheek’ gezet. Deze bibliotheek wordt gebruikt voor alle websites, huisstijlen en ontwikkelstraten op het Platform. Dat scheelt een hoop werk, want als we nu een component toevoegen of veranderen, gebeurt dit direct voor alle websites op PRO. Ook kunnen we componenten beter hergebruiken als we iets nieuws ontwikkelen.
De PRO-componentenbibliotheek is nog niet openbaar en voorlopig alleen te benaderen via het lokale netwerk van DPC/Online advies.

Wat is de impact van de nieuwe componentenbieb op Platform-websites?

Omdat we alleen de styling hebben aangepakt en niet de functionaliteit, gaat er in principe niks stuk in de werking van de site. Er is in deze eerste fase dus niets veranderd aan de functionaliteit van de componenten en er is niets veranderd in het Hippo-cms. Het gaat dus puur om enkele subtiele wijzigingen in de vormgeving die de gebruikers te zien krijgen op hun beeldscherm.

Wat is er veranderd in de vormgeving?

Vanaf 25 mei zie je (met een geoefend oog) subtiele wijzigingen in de vormgeving van o.a. de tijdlijn, de zoekfilters, de footer etc. Van inhoudelijke pagina's is de leesbaarheid en de scanbaarheid verbeterd. Het lettertype is groter en er is een groter onderscheid tussen koppen en alinea’s.

Op navigatiepagina’s zijn de tekstlinkjes naar onderliggende pagina’s niet meer vetgedrukt. Hierdoor worden de pagina’s luchtiger en dus prettiger leesbaar. Tenslotte is de kleur van een ‘al bezochte link’ aangepast. 

Is er iets wat redacteuren moeten doen voor en na de livegang?

Als redacteur is het niet nodig om actie te ondernemen; de update gaat vanzelf live op maandag 25 mei.

Wat gebeurt er als een redacteur toch iets vreemds tegenkomt in de vormgeving na 25 mei?

Sommige problemen zullen we bij DPC moeten oplossen op componentniveau. Daarvoor kun je contact opnemen via platformro@minaz.nl. Soms zal ook de redacteur een aanpassing moeten doen in de content. In het laatste geval kun je bijvoorbeeld denken aan:

• Het aanpassen van de lengte van een tekstfragment, een titel of een toptakenblok, omdat deze te lang zijn geworden door de nieuwe lettergrootte;
• Het aanpassen van fotoformaten en/of teksten bij een foto, bij afbeeldingen die in de lopende tekst staan.
• Zien jouw tabellen er slecht uit omdat de browser woorden, data en getallen afbreekt op punten waar je dat niet wilt? Lees de weblog 'Tabellen beter opmaken in het cms'.

Met wie neem ik contact op als ik problemen heb door en/of vragen heb over de update?

Voor opmerkingen, vragen en reacties kun je een mail sturen naar platformro@minaz.nl. Vermeld daarbij:

• de url van de webpagina waar het probleem zich voordoet;
• de omschrijving van het probleem met een screendump als bijlage;
• of het probleem zich ook voordoet in een andere browser;
• je contactgegevens: de organisatie waar je werkt, jouw e-mail en telefoonnummer.

We nemen dan zo snel mogelijk contact met je op.

Kun je ook zelf nieuwe componenten aanvragen?

Voor eventuele wensen kun je bij de collega's van 'account' terecht via platformro@minaz.nl. Maar let op: ook bij de componentenbibliotheek wegen we af of de wens nuttig is voor een grote groep PRO-gebruikers. Net als bij andere wensen voor het Platform, geldt dat een nieuwe functionaliteit altijd generiek inzetbaar moet zijn, zodat iedereen bij PRO daarvan kan profiteren.

Hoe verliep de bouw van de componentenbibliotheek?

Na een opruimactie is de componentenbieb gevuld met een honderdtal losse componenten. In een testomgeving zijn een tiental representatieve PRO-websites omgezet in de nieuwe vormgeving van die componenten. Die zijn uitgebreid op meerdere punten getest. De problemen die daarbij naar voren kwamen, werden meteen opgelost. Niet alleen op desktop, maar ook op tablet en mobiel werd gekeken of de vormgeving consistent bleef. Waar nodig, werd dit verbeterd.

Hoe gaat de componentenbieb doorgroeien naar een Design System?

Een mooi voorbeeld van een Design System is Lego. De basis van een bouwblokje blijft hetzelfde, maar je kan oneindig blijven variëren en daarmee nieuwe producten bouwen. Met de componentenbieb hebben we een basis gelegd om andere PRO-producten aan te sluiten en in de toekomst door te groeien naar een Design System. Het zorgt voor een betere samenwerking tussen verschillende disciplines aan de bouwkant, maar is vooral bedoeld om de gebruiksvriendelijkheid van onze producten te waarborgen aan de lezerskant. Alle bevindingen en verbeterpunten uit onderzoeken en gebruikerstesten die we oppakken en doorvoeren in het design system, komen daarom altijd  terecht bij alle 570 Platform-websites.