De Voorhoede

front-end developers

De uitdaging: een betoverende website met stevige content

In 2017 veranderde UNITiD, interactiedesignbureau in Amsterdam van naam. Met die naamsverandering kwam ook een nieuwe identiteit. Een goed excuus om hun oude logge Wordpress-site te vervangen door eentje die snel, flitsend en gebruiksvriendelijk is. Inclusief een CMS met een intuïtieve interface zodat auteurs moeiteloos nieuwe pagina's kunnen aanmaken. Met originele layouts die tekst, grote responsive afbeeldingen en video's bevatten, moet elke pagina een eigen verhaal kunnen vertellen. Bovendien moeten ze goed te vinden zijn en doorzoekbaar door zoekmachines. Dat zijn een hoop voorwaarden, maar we zijn erin geslaagd om aan alles te voldoen. Het resultaat is te vinden op hike.one en dit is hoe we het hebben gedaan:

De oplossing: een isomorphic website met een gebruiksvriendelijk CMS

Content is king, daarom is een goed CMS belangrijk. We vonden een uitstekende kandidaat in DatoCMS. Dat is een CMS dat aan te roepen is via een API, waardoor je niet gebonden bent aan een vooraf bepaald framework. Hierdoor kunnen wij de front-end stack kiezen die het beste past bij het project. Daarnaast is het component-gericht, waardoor het mogelijk is om pagina's samen te stellen met modulaire blokken. Copywriters kunnen unieke, boeiende verhalen vertellen door herbruikbare componenten te combineren voor nieuwe pagina's. En dat zonder de hulp van een developer. Het CMS is zelfs zo gebruiksvriendelijk dat je een gloednieuwe pagina binnen enkele minuten kan opmaken en online kan zetten.

Goed content management was de eerste stap, Next.js was de tweede. Next.js is een front-end framework gemaakt met React, waarmee het makkelijk is om delen van de content op de server, en delen in de browser te genereren. Dit wordt ook wel een ‘isomorphic’ website genoemd. Het resultaat hiervan is dat de website geoptimaliseerd is voor SEO, snel en responsive aanvoelt en de gebruiker een single page app-gevoel ervaart.

Tot slot is er de eye candy: een vette menu-animatie en heftige parallax effecten die op verschillende plekken zijn toegepast. GreenSock Animation Platform heeft ons hierbij geholpen: een JavaScript animatielibrary met hoge performance, én makkelijk om te gebruiken.

De technieken

  • Isomorphic server/client rendering met NextJS

  • Een intuïtief component-gericht CMS: Dato

  • Soepele animaties met het GreenSock Animation Platform

Het resultaat

  • SEO-geoptimaliseerde website

  • die snel, responsive en aantrekkelijk is

  • met makkelijk toe te voegen content