Onze nieuwe Drupal 8 website

Van Drupal 7 naar Drupal 8

Een van de belangrijkste redenen om de website te vernieuwen was de komst van Drupal 8. Als Drupal Agency willen we graag voorop lopen als het gaat om ontwikkelingen met betrekkingen tot Drupal. Door deze keuze hebben we wel wat concessies moeten doen omdat sommige modules nog niet beschikbaar zijn voor Drupal 8 of (nog) niet goed genoeg werkten. Het gaat hier dan met name om de modules Rules, Comment Notify en Real Name. Gelukkig zijn deze niet van levensbelang en kunnen we de website verbeteren zodra de modules wel beschikbaar komen.

Meer verfijnen dan redesignen

Gebruikers die onze website regelmatig bezoeken zullen het verschil misschien niet direct merken. Dit komt omdat we ervoor gekozen hebben om het design te verfijnen en niet compleet om te gooien. Webdesign is volwassen aan het worden en dat komt voornamelijk omdat we nu veel beter weten over hoe mensen websites gebruiken dan tien tot twintig jaar geleden. Het gebruik is de afgelopen jaren dan ook niet drastisch veranderd. De meest opvallende trend is de opkomst van mobiele apparaten zoals smartphones en tablets en dit wordt grotendeels opgevangen door Responsive Webdesign.

Andere onderdelen van een website zijn al bijna twee decennia gelijk gebleven, denk aan:

• Het menu staat altijd bovenaan of links.
• Het logo staat altijd boven links of in het midden.
• Links zijn duidelijk herkenbaar door middel van een lijn of kleurverschil.

Daarnaast waren we ook nog erg tevreden met het design dat we in 2013 hadden gemaakt. Het mocht hier en daar wat verfijnder en minder lomp maar het was in onze ogen niet nodig om het hele design weg te gooien en opnieuw te beginnen. De aanpassingen in het webdesign vind je dan met name terug in:

• Aanpassingen van verschillende lettertypen.
• Wijzigingen in kleuren van de blokken op de porftolio en artikelen pagina.
• De manier waarop de referenties en quotes getoond worden.

Eerst de titel en intro, dan pas de plaat

Grote veranderingen hebben we echter wel gemaakt in de opbouw van de pagina’s. Op onze oude website zag je eerst het menu en daarna een grote foto (ook wel ‘hero’ genoemd). Dit betekende dat bezoekers (in de meeste gevallen) moesten scrollen om de titel of de intro van de pagina te zien. In de nieuwe Drupal 8 website laten we eerst de titel en de intro zien en dan pas de afbeelding (bekijk als voorbeeld deze pagina die begint met de titel en intro in plaats van de hero). Dit is handig voor de gebruikers omdat zij niet eerst hoeven te scrollen om er achter te komen waar de pagina over gaat maar ook omdat we hierdoor een betere Google Pagespeed Insight score krijgen. Deze tool geeft ons nu een groen vinkje voor ‘Prioriteit geven aan zichtbare content’.

Gerelateerde artikelen simpeler

Op de oude Drupal 7 website hadden we onderaan elk artikel een blok met gerelateerde artikelen. Elk artikel had een eigen afbeelding en een unieke tekst. Omdat dit een groot blok was onderaan de pagina leek het ook geen onderdeel meer te zijn van de pagina. We plaatsen daarom nu de gerelateerde artikelen als lijstje direct onder het artikel. Dit is visueel iets minder aantrekkelijk maar wij verwachten dat bezoekers hierdoor sneller doorklikken naar een gerelateerd artikel.

Ik heb even een klein onderzoekje gedaan (met behulp van Google Analytics) om te kijken of dit ook echt het geval is. Ik heb alle bezoeken van onze vijf meest populaire artikelen bij elkaar opgeteld van een week waarin de oude website nog live was en van een week waarin de nieuwe website live stond. Hier heb ik gekeken welk percentage van de bezoeken een artikel dat genoemd werd in de gerelateerde artikelen als volgend paginapad had. Op de oude website was dit 2,72% en op de nieuwe website is dat 4,47%. Hoewel dit natuurlijk een kleinschalig onderzoek is kunnen we in ieder geval concluderen dat er meer doorgeklikt wordt naar gerelateerde artikelen in de nieuwe situatie. Een verbetering dus!

Waardering geven

Het is voor bezoekers nu ook mogelijk een waardering achter te laten bij een artikel. Onderaan het artikel staat een formulier waarmee de gebruiker een aantal sterren kan geven (van één tot en met vijf). Op deze manier weten we welke content het beste in de smaak ligt bij onze bezoekers. Daarnaast willen we de waardering in de toekomst gaan gebruiken om te kijken of we deze terug kunnen laten komen in de zoekresultaten van Google.

Momenteel maken we gebruik van de YAML form module. Het liefst gebruiken we de Five star voting module maar deze is nog niet beschikbaar voor Drupal 8. Zodra deze beschikbaar komt willen we ook een gemiddelde van alle waarderingen tonen in de footer.

Ook wilden we kijken of bezoekers überhaupt een waardering achterlaten en dat blijkt. De afgelopen twee weken (sinds livegang van de nieuwe website) hebben al 12 bezoekers sterren gegeven.

Video

Wij zijn altijd de eerste die roepen dat je geen bewegende onderdelen op je website moet hebben. Als wij dat roepen dan hebben we het eigenlijk alleen maar over zogenaamde ‘sliders’. Over het subtiele gebruik van video’s, zoals wij nu doen op onze cases doen, zijn we wel heel enthousiast. Je kan ongestoord de content bekijken zonder dat de video je afleidt omdat de video achter een zwarte filter geplaatst is. De animatie maakt de pagina sfeerverhogend en geeft net dat beetje extra.

Iconen als hero

Bij artikelen hebben we nu ook de mogelijkheid om naast of in plaats van een afbeelding ook iconen als hero te gebruiken. Dit heeft twee voordelen, namelijk:

• Je kan niet altijd voor alle artikelen een goede afbeelding vinden, maar in sommige gevallen zijn er wel iconen beschikbaar die beter passen bij de inhoud van je artikel.
• Iconen laden sneller dan afbeeldingen. Hierdoor wordt je hele pagina sneller geladen en krijg je een betere score van de Pagespeed Insights tool.

Ik heb het zo gemaakt dat we kunnen kiezen uit twee verschillende iconen sets (Nucleo en FontAwesome) en ook zelf een achtergrondkleur kunnen kiezen voor de hero (dezelfde kleuren die je nu in het portfolio en artikelen overzicht ziet).

En?

Wat vinden jullie van het resultaat? Laat het mij hieronder weten door een reactie te geven. Je kan hieronder ook vragen stellen over onze nieuwe Drupal 8 website.