Hoe meubelmerk Pode profiteert van een headless aanpak met Storyblok

1. Onbegrensde creativiteit door headless
Qua techniek hadden we complete vrijheid nodig om onze visie op de digitale merkbeleving voor Pode.eu te realiseren. Traditionele CMS’en zijn beperkt in wat er in de front-end mogelijk is. Dit komt door de manier waarop de front-end direct gekoppeld is aan de back-end en zo een groot deel van de opmaak en designs bepaalt. Bij een headless CMS is dat niet het geval.

Dankzij de architectuur van een headless CMS beheer je al je content in één afzonderlijk systeem en laad je deze vervolgens naar de verschillende front-ends door middel van API’s. Hierdoor krijg je meer creatieve vrijheid en flexibiliteit omdat de front-end nu niet meer wordt beperkt door de standaardoplossingen die bij een traditioneel CMS wel van kracht zijn. Precies wat wij voor dit project nodig hadden.

Lees hier meer over de invloed van een headless CMS op je gebruikerservaring.

2. Moderne frameworks
Ook wisten wij dat we voor de realisatie van de digitale merkbeleving gebruik wilden maken van een modern front-end framework dat de mogelijkheid biedt om ambitieuze User Interfaces te maken. Het door Facebook ontwikkelde React is bijvoorbeeld een moderne manier om alles dynamischer, interactiever en intuïtiever te maken. Frameworks als deze zijn niet meer direct aan het CMS gekoppeld. Hierdoor werkt het ook goed voor bijvoorbeeld een online portal of smartwatch app.

3. Een flexibel CMS
Omdat de front-end voor dit project zo ambitieus is, was het belangrijk dat we voor een solide back-end optie zouden kiezen die eenvoudig is om op te zetten. Er zijn veel traditionele CMS’en waarbij het tijdrovend is om de servers in te richten, het CMS te installeren en te configureren. Gelukkig zijn er tegenwoordig ook veel SaaS (software as a service) CMS’en waarbij het opzetten van een backend, door een plug-and-play-methode, veel minder tijd kost. Dat zou ons in staat stellen om het overgrote deel van onze tijd in de front-end te steken en de merkervaring te perfectioneren.

Met deze bovenstaande 3 pijlers in gedachten zijn we op zoek gegaan naar de juiste tools. Vanuit onze ervaring met dit soort projecten wisten we al snel wat mogelijk goede opties waren. Daarom hebben wij gekozen voor de volgende oplossingen:

Storyblok: headless en SaaS

Wij hebben voor Pode voor een headless CMS gekozen omdat we gebruik wilden maken van de grenzeloze creativiteit de deze oplossing biedt. Ook was het in het geval van Pode belangrijk dat we data vanuit meerdere bronnen, zoals de stoffen en kleuren van meubels, konden tonen. Met een headless CMS is dat makkelijk te realiseren.

Storyblok was in onze optiek een uitstekende keuze om Pode.eu op te bouwen. Dit headless SaaS CMS is makkelijk te implementeren en biedt veel flexibiliteit voor integraties en API’s. Ook geeft Storyblok veel ruimte om maatwerk toe te passen. Veel headless opties bieden in meer rigide en gesloten systeem waardoor je beperkt aanpassingen kunt maken. Voor ons was het essentieel dat er geen restricties waren.

Ook voor content editors biedt Storyblok een aantal voordelen. Het is namelijk mogelijk om in realtime de aanpassingen die je in het CMS maakt, te zien in de front-end. Als je de pagina opent, krijg je naast de editing tool een live preview van de website te zien. Zo blijft de focus op de ervaring die de bezoeker krijgt en is het eenvoudig om foutjes in de opmaak te herkennen.

Het eerdergenoemde front-end framework React is in essentie een UI library waarmee je mooie en moderne UI’s kan bouwen. Helaas houden daar de mogelijkheden voor React op. Een website die op React gebouwd is, moet elke keer als de site geopend wordt de codebase downloaden, opbouwen en genereren. Dat is slecht voor de prestaties en voor SEO. Omdat we niet wilden inleveren op prestaties en functionaliteit van de website was dit voor ons geen optie.

Gelukkig is daar Next.js. Next.js is een compleet en volwassen framework ontwikkeld op basis van React, waarmee je echt productiewaardige oplossingen bouwt. Next.js is in feite een schil om React heen wat zorgt voor een snelle website en goede vindbaarheid met SEO. Verder voorziet Next.js in functionaliteiten als routing, image optimization en internationalization. Next.js biedt tevens de mogelijkheid om eenvoudig plugins aan het ecosysteem toe te voegen voor bijvoorbeeld micro-animaties en pagina transities.

Dit was precies wat wij nodig hadden om voor Pode een ongeëvenaarde merkbeleving te realiseren met alle functionaliteiten, topprestaties van een snelle website en goede vindbaarheid via SEO.

Conclusie

De combinatie van Storyblok en Next.js stelde ons in staat om alles wat we voor ogen hadden te bewerkstelligen. Dit komt vooral omdat wij de twee oplossingen als één van de beste headless CMS-en en één van de beste front-ends beschouwen. Een pluspunt is daarbij ook dat Storyblok en Next.js fijn op elkaar inspelen. Met de headless structuur van Storyblok konden we zonder restricties volop inzetten op de front-end. De focus op de front-end werd versterkt door de SaaS-eigenschappen van Storyblok. Het vernieuwde Pode.eu konden we met Next.js volledig in het teken zetten van beleving en inspiratie.

Wil je meer weten over Storyblok? Download dan de whitepaper 'Efficiënt content beheren en publiceren met Storyblok'.