DCMR Mileudienst Rijnmond logo

DCMR Mileudienst Rijnmond

Locatiegebaseerde content vanuit een CMS met separate frontend

OPDRACHTGEVER

DCMR Milieudienst Rijnmond

LIVE SINDS

December 2017

ENRISE TEAM

Epic

Milieudienst Rijnmond, kortweg DCMR, is de gezamenlijke milieudienst van de provincie Zuid-Holland en 15 gemeenten. Het is een regio met veel industrie en een hoge bevolkingsdichtheid. In dit gebied bewaakt DCMR de milieukwaliteit in nauwe samenwerking met andere overheidsinstellingen, zoals politie, brandweer, arbeidsinspectie en GGD. DCMR voert deze taak al ruim 40 jaar uit.

De opdracht

DCMR Milieudienst Rijnmond vroeg Enrise om het beoogde design voor een nieuwe website te vertalen naar een volwaardige nieuwe webomgeving. Buurtbewoners moeten via de nieuwe site sneller en makkelijker een milieumelding kunnen maken, waarbij het gebruik van de site geschikt is voor iedereen, ongeacht schermgrootte of invoerbron. Met gerelateerde artikelen voor een completer beeld van de situatie in een bepaald gebied. Voor de redactie is een eenvoudiger te beheren CMS wenselijk, waarbij onder andere de inhoud gekoppeld kan worden aan postcodegebieden voor relevante nieuwsitems in de wijk van de websitebezoeker.

De uitdaging

De website van DCMR heeft een belangrijke functie voor de regio. De bewoners raadplegen de website om te weten wat er in de regio gebeurt of in geval van een calamiteit om te achterhalen wat er in de wijk of zelfs de eigen straat aan de hand is. De structuur van de vorige website bleek te complex en sterk gericht op de kenners van het domein. Informatie was moeilijk toegankelijk voor de toenemende vragen van de bewoners. Een inflexibel CMS kon het tij niet keren. DCMR liet een redesign maken en vond in Enrise de partner voor het omzetten van dat design in een volwaardige nieuwe website met een eenvoudiger te beheren CMS.

De oplossing

Voor de beheerders van de site hebben we het CMS sterk vereenvoudigd, zodat het makkelijker is om nieuwe content te maken en te wijzigen, terwijl we aan de andere kant de toegangsdrempel tot het CMS hebben verhoogd met extra security in de vorm van tweefactor-authenticatie. We kozen voor een flexibel headless CMS, waarbij de frontend op zichzelf staat. Een separate frontend is in eerste instantie bedoeld voor de website, maar we ontwikkelden het met in gedachten dat DCMR ook in de toekomst bijvoorbeeld apps of andere mediakanalen eenvoudig kan beheren vanuit hetzelfde CMS.

Publicatieflow
De artikelen over milieu, veiligheid en gezondheid in de regio wordt beheerd door de redactie. Zij schrijven artikelen en koppelen die aan een locatie met behulp van een selectie op de kaart. Die selectie vertalen we automatisch naar alle postcodes in dat gemarkeerde gebied.

Zodra artikelen gereed zijn worden ze ter beoordeling en controle klaargezet voor de afdeling Communicatie, dat het na akkoord officieel publiceert. Het voordeel van de locatie-aanduiding is dat het de functie Mijn Wijk mogelijk maakt. Momenteel nog ontwikkeling toont dit gedeelte binnenkort alle artikelen en gebeurtenissen binnen de postcode die je als sitebezoeker invoert. Je krijgt daarmee alleen de artikelen binnen jouw postcodegebied te zien voor een completer plaatje over jouw wijk.

Website DCMR Milieudienst Rijnmond met Headless CMS

Toegankelijkheid
We gaven de bezoekers van de nieuwe website een verbeterde en duidelijke manier voor het indienen van een milieumeldingen, zodat je zonder zoeken sneller tot het juiste formulier komt. En we maakten de site minder laagdrempelig voor mensen en apparaten door de belangrijkste toegankelijkheidsrichtlijnen toe te passen:

  • We maakten gebruik van Readspeaker, dat op heldere manier de tekst voorleest;
  • We verborgen bepaalde tekstelementen die visueel niet noodzakelijk zijn, maar die wel guiding moeten geven als je gebruik maakt van de voorleesfunctie;
  • We maakten de site geschikt voor toetsenbordondersteuning, zodat je ook zonder muis kunt navigeren;
  • We gaven externe linkjes een icoontje, zodat het in een oogopslag duidelijk zichtbaar is.

Snelheid
Het nieuwe dcmr.nl is ontwikkeld in React. In plaats van server side rendering, wordt bij React de site in de browser gerenderd, waardoor de gebruikservaring aanvoelt als een app. Dit noem je een Single Page Application met het voordeel dat alle pagina’s direct beschikbaar zijn met vrijwel geen laadtijd. Om te voorkomen dat alle opgebouwde SEO-score van DCMR teniet wordt gedaan gebruikten we Next.js die ervoor zorgt dat ook aan de serverzijde de belangrijkste informatie en artikelen beschikbaar zijn voor indexatie door search bots. Bij de migratie van oude content hebben we oude urls met redirects netjes omgeleid naar de nieuwe en het resultaat is nu een supersnelle Single Page Application met behoud van de SEO-scores en bijbehorende pageranking in Google.

Technieken

  • PHP
  • HTML
  • SCSS
  • React
  • Universal JavaScript
  • NodeJS
  • GraphQL

Platforms & Systemen

  • Git
  • Gitlab
  • Google Cloud Platform
  • Kubernetes
  • Symfony Framework
  • NextJS
  • Appollo
  • MongoDB
  • Docker
  • Review Apps
  • Sentry

Online ambities bespreken?

Start typing to search