De Voskamp Groep

    Loading...

    De Voskamp Groep is van een klein familiebedrijf handelend in ijzerwaren, uitgegroeid tot een veelzijdig bedrijf actief in de bouw, industrie, beveiliging en verduurzaming met meer dan 500 medewerkers! Wij bouwden de nieuwe Corporate website!

    De opdracht: een corporate website

    De Voskamp Groep kwam bij ons met de vraag om de corporate website compleet te vernieuwen. De nieuwe website moest modern aanvoelen, voldoen aan de huidige standaard in SEO en Core Web Vitals en gemakkelijk zelf te updaten zijn met blogs en informatie. 

    Ook is het belangrijk om de verschillende divisies een eigen omgeving te geven waarin divisie specifieke informatie, links, productinformatie en contactinformatie kan worden geplaatst.  

    Plan van aanpak

    Dit project zijn we met een team van 7 personen gestart waaronder 5 developers,  1 scrum master en 1 product owner. Het begon met een sprint planning waar de developers de user stories d.m.v. scrum poker hebben ingeschat. 

    Na de sprint planning is het team weer bij elkaar gekomen om het resultaat van de ingeschatte stories te bespreken. Vervolgens is het team direct aan de slag gegaan met het opzetten van het project.

    Strapi CMS

    Bij de start van de opdracht is een matrix gemaakt met de voor- en nadelen van elk framework en CMS voor dit specifieke project. In dit geval hebben we in overleg met Voskamp gekozen voor het Strapi CMS. Hieronder een aantal voordelen van Strapi:

    • Headless CMS

    Het grote verschil van een Headless CMS vergeleken met een traditioneel CMS is dat er geen presentatielaag aanwezig is. In WordPress is het mogelijk content te beheren en tegelijkertijd maakt WordPress de pagina’s met daarin de content en styling aan. Handig voor veel toepassingen!

    • Zelf hosting

    Tegenwoordig zijn er meerdere partijen die een eigen Headless CMS bieden, denk aan Contentful en GraphCMS. Zij maken het voor de gebruiker makkelijk door zelf de hosting en opslag van de data te regelen. Je kunt als gebruiker dus direct starten met het vullen van je content. 

    Het nadeel hiervan is dat je de data en het CMS zelf niet in eigen beheer hebt. Voor Blue Flamingos en Voskamp is dit daarom geen optie.

    • Javascript als programmeertaal

    Een ander voordeel van Strapi is dat het gebruik maakt van JavaScript als programmeertaal. Voor ons is dit prettig omdat we in de front-end met Next.js ook JavaScript gebruiken. Dit betekent dat we niet constant hoeven te switchen tussen verschillende programmeertalen.

    • Component based pagina’s aanmaken

    Voskamp Groep heeft als eis dat de contentbeheerder de pagina’s zelf moet kunnen inrichten. De structuur in het CMS moet overzichtelijk en simpel zijn zodat er niet steeds een programmeur bij gehaald moet worden wanneer een aanpassing in de content nodig is. 

    Strapi biedt de mogelijkheid om de content in componenten op te slaan. Een component is bijvoorbeeld een header of een blokje waar tekst en een afbeelding getoond worden. Op die manier kun je dus per pagina zelf bepalen welke componenten je wil gebruiken. Hieronder een voorbeeld van hoe we dat op onze eigen Blue Flamingo’s website hebben gedaan.
     

    Componenten Strapi Blue Flamingos

    Afbeelding: Componenten in Strapi van de website van Blue Flamingos 


    Component Bel Me Terug Blue Flamingos

    Afbeelding: Compontent weergegeven op de website van Blue Flamingos

    Meer weten over Strapi? Onze collega Jelmer heeft een blog geschreven over alle voordelen van Strapi.

    Next.js in de frontend

    Aan de voorkant hebben we voor Next.js gekozen. Hieronder een paar van de vele mooie features die Next.js te bieden heeft:

    • Statische pagina’s genereren

    Een van de vele mooie features die Next.js biedt is het statisch renderen van de pagina’s. Dit houdt in dat de pagina’s inclusief dynamische data van tevoren gegenereerd worden. Wanneer de bezoeker naar een pagina navigeert kan de pagina direct getoond worden omdat het al gegenereerd is.

    Maar wacht eens even? Hoe kun je op een statische pagina, wat vooraf wordt gegenereerd, content laten zien dat bijvoorbeeld pas 1 minuut geleden is toegevoegd in het CMS vraag jij je af? Een goede vraag! Next.js heeft hiervoor een mooie feature genaamd Incremental Static Regeneration. Hiermee wordt een pagina, nadat een bezoeker op is geland, opnieuw gegenereerd. Super handig voor SEO dus. Op deze manier wordt de pagina mega snel ingeladen met de meest recente content.

    • Afbeeldingen automatisch optimaliseren voor SEO

    Verder biedt Next.js de functionaliteit om afbeeldingen automatisch te optimaliseren voor SEO. De afbeeldingen worden in verschillende formaten opgeslagen zodat er op iedere device een geschikte grootte weergegeven kan worden. Deze functionaliteit is in samenwerking met een aantal developers van Google gemaakt.

    • Een testlink voor iedere nieuwe feature i.c.m. Vercel hosting

    Voor dit project werken onze developers aan een eigen feature in de frontend. Denk hierbij bijvoorbeeld aan een header component die gebouwd moet worden of de zoekfunctie op de homepagina. 

    Wanneer een developer de code voor zijn/haar feature heeft afgerond, wordt het samengevoegd met de rest van de code. Voordat het wordt samengevoegd, willen we dat de feature eerst getest wordt door de product owner/stakeholders van Voskamp. Vercel maakt dit mogelijk door voor iedere feature een testlink aan te maken die eenvoudig gedeeld kan worden met Voskamp. Op deze manier is het testen en feedback verzamelen per feature goed geregeld!


    Resultaat

    Het resultaat is een prachtige moderne website waar we erg trots op zijn!

    Contact­gegevens

    Assiesplein 1A

    8011 XD Zwolle

    Nederland

    hi@blueflamingos.nl

    (+31) 6 12684189



    Blue Flamingos © 2022 |Sitemap