Een flexibeler WordPress met modulaire blokken.

Dit artikel verscheen eerder in WebDesigner magazine.

Wanneer wij met klanten aan tafel zitten om het project te definiëren, komen er een hoop onderwerpen aan bod. Vanuit missie en visie, doelstellingen en doelgroepen bepalen we de online strategie. Maar we definiëren ook waar we de interne processen en workflows voor het beheer van de website kunnen optimaliseren. Hoe creëren we een duurzaam platform? Hoe maken we de taken van een beheerder of redacteur zo gemakkelijk mogelijk en bieden we hem/haar meer vrijheid in het indelen en opmaken van webpagina’s? Dit zonder af te doen aan de vormgeving of heldere structuur waar we met elkaar hard aan gewerkt hebben.

Dag templates, hallo modulaire content blokken

Een voor de hand liggende manier om flexibiliteit te bieden is het gebruik van de pagina Templates. Deze mogelijkheid werd ruim negen jaar geleden in WordPress geïntroduceerd en is heel lang dé manier geweest om verschillende layouts aan te bieden. Ontwerpers creëerden dan een visueel voorstel voor één of of twee varianten, legden deze voor aan de klant en bij een akkoord gingen de ontwikkelaars vervolgens aan de slag om er werkende templates van te maken. Tegen de tijd dat een marketeer met een pagina aan de slag wilde gaan was er relatief veel tijd in het template gestoken. Zo kon het nog steeds voorkomen dat de mate van flexibiliteit die nodig was niet voldoende bleek te zijn.

Dit is de reden waarom wij de flexibele templates hebben geïntroduceerd bij onze klanten. Templates met blokken informatie die in elke volgorde en combinatie op een pagina ingezet kunnen worden. Door hiermee te werken zijn de beperkte variaties van een designer zelf om te zetten in goed converterende landingspagina’s zonder dat er, voor elke variatie, weer een ontwikkelaar bij betrokken hoeft te worden. Je kunt dit het beste vergelijken met LEGO. LEGO stenen zijn er in een heel scala aan maten, vormen en kleuren en iedereen kan ermee overweg. Omdat LEGO stenen bestaan uit vaste formaten en standaard kleuren is het mogelijk om ze op verschillende manieren te stapelen en te combineren. In onze ogen moet een beheerder van een website op eenzelfde manier met zijn pagina’s om kunnen gaan.

Flexibele content blokken

Om deze modulaire content blokken aan te kunnen bieden is het essentieel om de doelen van je klant goed te begrijpen. Hoe kunnen we bezoekers verleiden tot actie? Met wat voor soort informatie heb je te maken? Is deze informatie op te breken in kleinere brokjes? En hoe verhouden die kleinere brokjes content zich tot elkaar? De ervaring leert dat je dit niveau alleen bereikt door intensief samen te werken met de klant. In een team bestaande uit klant, designers en developers bepalen we de customer journeys, analyseren we de content en gewenste type functionaliteiten. Vroeg in het proces denken we al in modules die herbruikbaar zijn en op verschillende manieren gestapeld en gecombineerd moeten kunnen worden.

Wij houden altijd rekening met het grotere geheel. De balans en juiste volgorde moeten wel doordacht zijn. Alleen door te werken met vaste stramienen kunnen we een optimale gebruikservaring bereiken. Qua design presenteren we naar de klant toe veelal volledige pagina’s die goed illustreren hoe de modules weer samen komen.

Advanced Custom Fields

De modulaire content blokken realiseren wij met de plugin Advanced Custom Fields, afgekort ACF (Pro). Deze plugin is ons ‘weapon of choice’ om WordPress nog beter af te stemmen op de wensen en eisen van de klant. Met ACF kunnen wij functionaliteiten en allerlei soorten content aanbieden als gebruiksvriendelijke ‘velden’. ACF maakt het mogelijk om deze velden op uiteenlopende manieren op te bouwen en gebruik te maken van relaties tussen verschillende soorten data. De vele filters en ‘hooks’ in de code maken het voor ons mogelijk de standaard functionaliteit verder uit te breiden en bijvoorbeeld te koppelen met externe tools of bronnen.

Op basis van het voorbereidende werk en de gerealiseerde ontwerpen ontwikkelen wij de verschillende blokken. Hierbij heeft een contentblok om een video te kunnen plaatsen hele andere opties dan een blok om een quote of testimonial uit te lichten. Uiteindelijk ontstaat een bibliotheek van blokken met eigen opties die de klant inzet om, met behoud van vormgeving, zijn/haar pagina in elke willekeurige volgorde en samenstelling in te richten.

De juiste content op het juiste moment

Het design, met daarin een stramien van de verschillende ontworpen blokken, vormt de basis. Maar hoe bepaal je de flexibele opbouw van je pagina? Hoe creëer je dynamiek in het ontwerp en kom je toch tot een pagina die tot conversie leidt? In de eerste plaats is dit een handmatige handeling, maar wij gaan graag nog een stapje verder. Flexibele content kan juist succesvol ingezet worden voor conversie doeleinden als we de opbouw bepalen op basis van ‘user tests’, statistieken en contextuele factoren.

Stel je een pagina voor die zich automatisch aanpast aan factoren zoals weer, tijdstip of de locatie van de bezoeker die de pagina bekijkt. Wanneer je dit weloverwogen toepast kan dit een geweldige gebruikservaring als resultaat hebben. Een andere ontwikkeling waar wij op dit moment druk mee bezig zijn, is het indelen van pagina’s door zelflerende algoritmes die optimaliseren op conversie. Een marketeer kan een landingspagina opbouwen uit de modules ABC en D waarbij D voor de ‘Call to Action’ staat. Na het publiceren van de pagina gaat er een script spelen met de volgorde van de blokken en wordt de interactie van de bezoeker bijgehouden. Het script schotelt verschillende bezoekers diverse variaties voor om te ontdekken welke variatie het beste presteert. Op het moment dat er genoeg data vergaard is optimaliseert het script op conversie en wordt de best presterende variatie aan het merendeel van de bezoekers getoond. Zonder ingrijpen van de beheerder kan het zelflerende algoritme ervoor zorgen dat blok D, dat de ‘Call to Action’ bevat, voortaan op positie 2 komt te staan omdat de test heeft uitgewezen dat de meeste mensen zich dan aanmelden voor een nieuwsbrief of overgaan tot een aankoop.

Een schaalbare oplossing voor de toekomst

Dankzij deze modulaire opbouw kunnen we dus per pagina en per blok de gebruikerservaring optimaliseren zonder dat dit ten koste gaat van het originele ontwerp. Het doel en de focus hierin zijn essentieel. Er is dus super veel mogelijk met flexibele content en de bouwstenen zijn eenvoudig uit te breiden. Hierdoor creëer je een schaalbare en toekomstbestendige website. Met dynamische instelbare blokken bieden we enorm veel flexibiliteit, maar houden we wel grip op een consistente vormgeving. Dit zorgt voor rust en duidelijkheid. Flexibiliteit is geen doel, maar een middel.