moving gradient dot moving gradient dot
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots
random background dots

Statische website met dynamische content [Update 2020]

Floris - Oct 21, 2020 - 7 Minuten
Static Site Deployments met Contentful en Netlify
Omdat we nooit stilstaan ;-).

Update eind 2020 🚀

Eind 2018 schreven wij deze blog over het experimenteren met headless oplossingen. De redenen hiervoor waren destijds:

  • Nieuwsgierigheid;
  • Verbreding van onze tech-horizon;
  • Andere CMS'en en frameworks toepassen om gebruiksvriendelijkheid voor onze klanten te onderzoeken.

Inmiddels zijn we 2 jaar verder en hebben we ontzettend veel geleerd. Terugkijkend op dit bericht en de gebruikte technieken hebben we veel nieuwe inzichten gekregen. In 2018 schreven wij deze blog over Contenfull. We hebben dit CMS één keer gebruikt als test, maar bij deze test is het ook gebleven omdat we tegen veel limieten aanliepen. Over de werking van een ander headless cms en de mogelijkheden die Netlify ons bracht waren we wel erg te spreken. Niet veel later of misschien wel daarvoor ontstonden de eerste websites waarbij we Vue.js hadden gebruikt. Dat was voor ons al een verademing en niet veel later namen we afscheid van jQuery. We besloten dit niet langer te gebruiken in onze projecten. Daarop volgend begonnen de eerste experimenten met Nuxt.js i.c.m. met de net nieuwe Craft CMS plugin CraftQL. Deze plugin werd later geadopteerd door Craft en het werd in de core opgenomen.

Hier een opsomming van zaken die we hebben geleerd:

  • Met Vue.js maken we gemakkelijk interactie en intuïtief sterke applicaties.
  • Snelheid van websites gingen door het plafond zonder vergaande caching toe te passen.
  • Animaties toevoegen en beleving van een website vergroten werd eenvoudiger en beter.
  • Veel plezier gehad en kennis vergaard in de tussentijd :-).
  • Cypress E2E automated user-testingen toegevoegd.
  • GraphQL query language.

Uiteraard hebben we ook veel hobbels genomen en overwonnen:

  • CI/CD Aanpassen.
  • Redirects instellen voor static websites.
  • Netlify correct inrichten.
  • SEO Settings van Craft via GraphQL naar Nuxt.
  • Multilanguage websites met Nuxt.
  • GraphQL met Apollo in Nuxt toepassen.
  • En een hele boel andere uitdagingen.

Inmiddels hebben we in de afgelopen 2 jaar veel ervaring opgedaan. Dit kun je hier bewonden! Ook een Headless CMS gebruiken voor jouw nieuwe statische website?

Voor wie is deze blog

Static Site Deployments met Contentful en Netlify [Titel 11-07-2018]

Om deze blog begrijpend te kunnen lezen is enige kennis van web-development benodigd. Ondanks dat de meeste termen zo duidelijk mogelijk worden uitgelegd, zal het lastig zijn deze blog volledig te begrijpen zonder enige ervaring te hebben met het ontwikkelen van websites.

In de blog vertellen we over een project dat we vrijwillig hebben aangenomen, ten gunste voor een goed doel. Tijdens het project hebben we 'geëxperimenteerd' met bepaalde tools waaruit nieuwe inzichten zijn verkregen. Evenals voor de klant, was dit voor ons ook een interessant project voor onze ontwikkeling. Veel leesplezier!

Statische en dynamische websites

First things first, er is een groot verschil tussen de zogeheten statische en dynamische websites. Om het goed te begrijpen is het belangrijk om de twee grootste verschillen te benadrukken.

Een traditionele statische website is vast en hiervoor is kennis van programmeertaal(HTML) benodigd, wil je bijvoorbeeld een deel van de tekst of afbeelding aanpassen.

Een dynamische website wordt gehost door een server, die met behulp van een bepaalde logica content dynamisch inlaadt. Dit inladen kan dan gebeuren door middel van een CMS of database. Zo kun je zonder enige programmeertaal te beheersen een website wijzigen. De dynamische website is de meest gangbare vorm van een website tegenwoordig. Denk bijvoorbeeld aan een Wordpress of Craft CMS website. Het Craft CMS bieden wij vrijwel standaard als oplossing of advies aan.

Uiteraard weten we allemaal door het hedendaagse verwachtingspatroon van de gemiddelde gebruiker dat deze niet meer dan 3 seconden laadtijd wenst. Hier komt een belangrijk punt van de dynamische website. Stel je zou twee visueel identieke websites naast elkaar leggen, dan zul je zien dat in essentie de dynamische website trager is dan de statische website.

Theorie in de praktijk

We namen de proef op de som en hebben een project vrijwillig aangenomen met de vereiste dat we een statische website gingen bouwen. Uiteraard deden we dit voor een goed doel, namelijk een wielercours in Groenlo.

Misschien komt de gedachte nu bij je op: “Oh, dan kunnen ze dus alleen via de html-bestanden de site updaten met content?”. Nou, nee. We hebben ervoor gekozen om een statische website te bouwen die middels een headless CMS te beheren is. Het komt er simpel gezegd als volgt op neer: iedere keer wanneer in het headless CMS een aanpassing plaatsvindt, dan worden de website-bestanden opnieuw gebouwd met deze data. Het is inmiddels geen hele nieuwe techniek meer, maar wel een techniek waar we graag eens wat dieper op in wilden gaan.

Later in dit artikel meer over de daadwerkelijke statistieken. Eerst de ervaring van het ontwikkelen. Het design kwam overwaaien via InVision en we zijn hier mee aan de slag gegaan. Bram vloog bovenop de laptop en knalde met behulp van Tailwind een mooie, strakke platte site uit de grond. Vervolgens gingen Mustafa en ik (Floris) op een development-zaterdag in de boeken om te kijken hoe we dit tot leven gingen brengen. Al snel kwamen we erachter dat er genoeg tools voorhanden waren die ons naar het eindproduct konden leiden. De keuze ging uit naar Contentful en Netlify (mede door de tip van onze vrienden van Nerds & Company). Met behulp van een zogeheten static-site-builder hadden we al snel een POC(proof of concept) staan. Dat hebben we uitgewerkt en we kwamen erachter dat we toch een aantal functies in het CMS (Contentful) misten. Met name op flexibiliteit, die we gewend zijn van Craft, moesten we inleveren.

Contentful en Netify

Contentful, een Duits bedrijf dat inmiddels een bewezen topspeler is in de headless-CMS markt. Je zou Contentful kunnen zien als de Craft van de eerder genoemde dynamische website. Het verschil is wel dat de content-structuur binnen het systeem anders werkt. Er is namelijk geen keuze uit soorten content modellen, in tegenstelling tot Craft, die er 3 heeft. Verder heeft Contentful de eigenschappen die je verwacht van een CMS; er kunnen relaties gelegd worden binnen de content en er zijn voldoende verschillende velden om het de website beheerder gemakkelijk te maken.

Netlify is hosting en sitebuilder in 1. Met een aantal commando’s kan het binnen 30 seconden de nieuwe data vanuit Contentful controleren, verwerken en releasen naar de productieomgeving. Buiten het bouwen van de site is het mogelijk om A/B testing te doen, identificatie van de bezoeker te verrichten en formulieren te creëren, verwerken, versturen en te exporteren.

Voordelen van een headless CMS

We noemen Contentful met opzet een headless CMS. Dit is vanwege de vrijheid die het met zich meebrengt. Je kan namelijk met de content alle kanten op. Het enige wat Contentful geeft is een json dataset die via API endpoints beschikbaar zijn. Dat betekent in simpele woorden; je kan er een site mee voeden, maar ook een intranet of applicatie voor je smartphone mee maken. Hierdoor geef je content-makers het gemak dat alle data vanuit één platform komt en daarbij verspreidt kan worden over alle gewenste platformen.

Alles voor de stats

Voorafgaand aan de statistieken hebben we de volgende optimalisatie technieken gebruikt:

  • Scripts en stylebestanden gecomprimeerd en verkleind;
  • Lazyload op afbeeldingen;
  • Netlify optimalisatie
    • HTTPS
    • HTTP2

De TTFB van de website ligt op dit moment tussen de 4ms en 170ms (gemeten over de datacenters van Netlify). De Google pagespeedtest geeft aan dat de optimalisatie van afbeeldingen, comprimeren en schalen meer aandacht vereist. De gehele website laadt nu tussen de 1-3 seconden.

Nog te verwerken optimalisatiepunten:

  • Afbeeldingen transformeren naar benodigde grootte.
  • DNS laten managen door Netlify in plaats van Cloudflare
  • Preview API van Contentful gebruiken.

Conclusie: De website is met een aantal basis optimalisatie technieken prima te laden. Ook is het voldoende geoptimaliseerd voor een goede SEO prestatie.

Oordeel van de klant

Namens de klant vernamen we dat het content management systeem op zich prettig werkt. Wel heeft het nadelen als het gaat om content beheer; er is niet direct iets zichtbaar. De content editor maakt gebruik van markdown in plaats van HTML. Dit is beter omdat het door een json feed moet. Het nadeel hiervan is dat je speciale tekens voor en achter je tekst ziet. Bold tekst is bijvoorbeeld: __dikgedrukte tekst__.

Verder kregen we als feedback dat een preview-link van je content handig zou zijn. Zo zie je hoe je tekst eruit komt te zien alvorens het zichtbaar is voor het grote publiek. Deze functie is wel mogelijk met Contentful, maar hebben we niet geïmplementeerd bij deze site.

pijltje-links-witCreated with Sketch.
pijltje-rechts-witCreated with Sketch.
Niice Bas
Strateeg & New Business

Bas Stortelers

Ik ben elke dag op zoek naar nieuwe kansen, mogelijkheden en toekomstige trends die de digitale wereld te bieden heeft.

Benieuwd naar de kansen van de digitale wereld voor jouw organisatie? Neem gerust contact met mij op.

Niice Thijs
Strateeg & Project Manager

Thijs van der Heijden

Als digital strateeg zorg ik er bij Niice voor dat alles wat we voor jou doen op het gebied van design, development en online marketing, gebaseerd is op een doordachte strategie. Onbezonnen beginnen aan de ontwikkeling van oplossingen of online marketing, is namelijk de formule voor mislukking. Ik zorg ervoor dat onze diensten daadwerkelijk bijdragen aan jouw behoeften en doelen op de lange termijn.

Het strategisch fundament is de basis voor het realiseren van maximaal online succes!

Niice Anke
Happiness Manager

Anke Penterman

Als Happiness Manager zorg ik bij Niice voor ondersteuning op kantoor en zet ik me in voor het vitaal houden van de organisatie. Variërend van organiseren, plannen tot zorgen voor de beste werksfeer. Overzicht houden van HR activiteiten en administratieve werkzaamheden tot het ontvangen van klanten. Op naar nog meer "Happiness" op de werkvloer.

Niice Danielle
Happiness Manager

Daniëlle Starte

Als Happiness Manager probeer ik werken bij Niice elke dag fijner te maken. Niet alleen door leuke uitjes en gezellige momenten te organiseren. Ook al zijn die héél belangrijk.

Nee, vooral door te zorgen voor een efficiënte werkomgeving. Door administratie, HR-activiteiten, interne communicatie, attenties, planningen maak ik het werk van mijn collega's leuker. En dat maakt mij én klanten weer blij!

Niice Sjoerd
Digital Marketeer

Sjoerd Pijnappel

Als Team Lead Digital Marketing help ik jouw stip op de horizon te bepalen en zorg ik ervoor dat zowel het Marketing Team als jouw organisatie focus hebben. Optimaal met elkaar richting die stip werken, daardoor worden resultaten behaald en successen samen gevierd. Waar wil jij naar toe groeien? Laat het mij weten.

Niice Nick
Digital Marketeer

Nick Jansen

Als digital marketeer bij Niice zorg ik, samen met het team, ervoor dat jouw organisatie online beter zichtbaar is. Ik houd mij binnen dit team voornamelijk bezig met social advertising. Of het nu gaat om Facebook, Instagram, LinkedIn of Pinterest Ads, ik denk graag met je mee over de kansen op het gebied van social ads! Met een goed doordachte strategie en een kritische blik op de resultaten halen we zoveel mogelijk resultaat uit het gestelde budget.

Niice Emma
Copy & Content Writer

Emma van Rijn

Als copy writer help ik mooie bedrijven hun verhaal te vertellen. En dat verhaal vindbaar te maken voor iedereen die het moet lezen. Dat doe ik met teksten die je lezer raken, die hen tot fan, volger of klant maken. Teksten geschreven met jouw doel en doelgroep in het achterhoofd.

Wat de boodschap die je wil delen ook is - kort of uitgebreid, op je website of via social media - door samen te werken zetten we jouw verhaal uitgedacht, pakkend en compleet op 'papier'!

Niice Rick
Digital Marketeer

Rick Arink

Als digital marketeer bij Niice zorg ik er samen met mijn collega’s voor dat de juiste mensen jouw website of webshop vinden. Ik ben breed georiënteerd en heb kennis van verschillende disciplines binnen de online wereld. Ook blijf ik door mijn leergierige houding voortdurend op de hoogte van de laatste trends & ontwikkelingen. Gaan we aan de hand van een doordachte strategie samen voor online succes?

Floris niice
Developer

Floris Wijgergangs

Als digital developer zorg ik er bij Niice voor dat jouw webshop, website of webapplicatie een gebruiksvriendelijk, schaalbaar en veilig geheel wordt. Welke functionaliteiten passen bij jouw wensen? Waar komen de effecten die het design tot leven laten komen? Hoe wordt alles zo gebruiksvriendelijk mogelijk, voor zowel bezoeker als gebruiker?

Op deze vragen bijt ik me vast, totdat de perfecte oplossing staat die van alle formaten schermen afspat.

Jasper Niice
Support Development

Jasper van Naarden

Vragen? Problemen? Feedback? Mij wel bellen! Als support developer bij Niice heb ik één doel: jou een geweldige beleving bezorgen als je onze klantenservice belt.

Ik ben het eerste aanspreekpunt bij uitdagingen en zorg zelf of door samen te werken met ons team voor efficiënte, effectieve oplossingen. En als je dan aan het einde echt geholpen bent? Dan ben ik blij. Succes voor ons allebei!

Niice Judith
Digital Marketeer

Judith Woordes

Als digital marketeer bij Niice zorg ik ervoor dat jouw organisatie online beter zichtbaar is! Dat doe ik met het schrijven van landingspagina’s, advertentieteksten, de juiste zoekwoorden en gerichte advertenties. Alles om jouw website of webshop meer onder de aandacht te brengen bij de juiste mensen met het juiste bericht. Heb jij een SEO, SEA of content vraagstuk? Dan spreken we elkaar vast snel!

Niice Luuk
Digital Marketeer

Luuk Vossers

Als junior online marketeer bij Niice houd ik me, samen met collega’s, bezig met online groei
voor jouw bedrijf. Dagelijks focus ik mij met name op het schrijven van content, het bijhouden van sociale media kanalen en het analyseren van
data. Niice en ik zijn een match, omdat ik bij Niice de kans krijg om mijzelf te ontwikkelen als online marketeer. Op het gebied van SEO, SEA en content marketing.

Het meedenken en realiseren van oplossingen voor jouw groei, daar krijg ik energie van!

Niice Ayla
Content strateeg

Ayla Goossens-Everink

Als content strateeg bij Niice ga ik bezig met jouw merkverhaal. Hierin zijn doel, doelgroep én boodschap enorm belangrijk. Ik krijg veel energie van het uitwerken van een goede contentstrategie en klim graag in de pen (of het toetsenbord 😉) om mooie verhalen om te zetten in blogs, e-books, landingspagina’s, whitepapers en meer! Een goede planning hierbij vind ik erg belangrijk.

Dus: wat is het verhaal dat jij graag wil delen?

Niice Sander
Digital marketeer

Sander Huting

Hoe kunnen we jouw helpen om je bedrijfsdoelen te behalen? Als digital marketeer ben ik constant opzoek naar online (groei-)kansen voor onze klanten. Mijn focus ligt op het genereren van leads en het verbinden van ondernemers zoals jij met hun doelgroep. Met natuurlijk als doel dat jij jouw bedrijf kan uitbreiden!

Niice Tim
Product Owner

Tim Geerdinck

Als Product Owner ben ik de schakel tussen business en techniek. Jouw wensen help ik vertalen naar oplossingen die wij met onze webteams realiseren.

Uiteraard hoort daar een juiste communicatie, begeleiding en vooruitkijkende blik bij; vanuit mij en vanuit jou! Samenwerken is voor mij cruciaal. Zullen wij beginnen?

Niice Jorn
Developer

Jorn Wildenbeest

Binnen Niice heb ik, als digital developer, de belangrijke taak om jouw website, webshop of webapplicatie in topconditie te brengen en te houden. De ontwerpen van onze designers zet ik om in een goed functionerend, gebruiksvriendelijke en veilig geheel.

Hoe kunnen we jouw websitebezoekers de juiste ervaring geven? Werkt jouw webshop op elke browser en op elk apparaat? Wordt het aantal problemen tot een minimum beperkt en snel opgelost? Samen met de andere developers bijt ik mij hierop vast, zodat jij zorgeloos door kunt!

Niice Mike
Digital designer & No-code specialist

Mike Dusseldorp

Elke dag werk ik als designer en no-code specialist voor en aan merken die zich willen onderscheiden met top-notch design, innoverende no-code oplossingen & award winning websites.

Ik probeer de lat altijd hoger te leggen, zo creëren we samen merken die digitaal opvallen in de massa. Klaar om je te onderscheiden?

Niice Toni
Developer

Toni Alilovic

Als digital developer bij Niice vertaal ik de mooiste ontwerpen naadloos naar een eindproduct om trots op te zijn. Websites, webshops, webapplicaties, alle designs breng ik tot leven tot een gebruiksvriendelijk en veilig geheel.

Werkt jouw website op elke browser hetzelfde? Hebben jouw websitebezoekers de ervaring waar jij op hoopt? Passen alle functionaliteiten bij jouw wensen en komen de designs optimaal tot hun recht? Daar houd ik mij mee bezig, zodat jij je zorgeloos op jouw werk kunt richten!

Niice Mik
Developer

Mik Wijnen

Als developer bij Niice werp ik mij dagelijks op het functioneren van websites, webshops en webapplicaties. Werkt je website snel, goed en op elk apparaat? Is je webshop wel gebruiksvriendelijk? En is het aantal problemen tot een minimum beperkt?

Ik focus mij op vragen als deze, zodat jij zorgeloos verder kan met jouw werkzaamheden. Altijd met het doel om jouw websitebezoekers een geweldige ervaring te geven.

Niice Gerben
Developer

Gerben Kraayenhof

Als developer zet ik me bij Niice in om jouw website of webshops niet alleen draaiende te houden, maar optimaal te laten presteren. De rest van de tijd zit ik in de schoolbanken, om jullie straks nóg beter te kunnen helpen. Natuurlijk met uiteindelijk doel om zelf als volwaardig developer ook projecten af te ronden en jouw wensen zo vet mogelijk te realiseren!

Niice Sil
UI & UX Designer

Sil Eggink

Als UI & UX designer bij Niice zorg ik ervoor dat het gevoel dat jij wilt overbrengen en het doel dat jij wilt bereiken omgezet wordt in beeld. Beeld dat niet alleen doordacht is, maar ook de aandacht grijpt! Op basis van jouw doelen ga ik aan de slag met een gaaf design voor die gebruiksvriendelijke website die perfect aansluit op jouw organisatie, die conversiegerichte webshop of een webapplicatie voor efficiëntere werkprocessen. Ik zorg voor een design dat jouw doelgroep direct aanspreekt. Ready to rumble!?

Niice Ken
UI & UX Design en Developer

Ken Kamperman

Die website waar je mond van open valt, waar Google dolblij van wordt en waar doorontwikkeling op de lange termijn geen probleem vormt. Die goed doordachte producten wil ik neerzetten als UI & UX designer en front-end developer. Met een achtergrond in design en een flinke interesse in web ontwikkeling help ik een efficiëntere workflow te realiseren voor onze projecten, voor jou en de collega developers. Alles voor een gepolijst en kloppend resultaat. Klaar voor?

Niice Imme
Developer

Imme Maas

Websites die lekker op het oog vallen met toffe interactiviteit, daar wil natuurlijk iedereen naar kijken. In mijn bijbaan als developer bij Niice leer ik hoe ik de gaafste designs om kan zetten in een logische, schaalbare en levende website. Door fouten te maken en zelf weer op te lossen krijg ik een echte kick! Daardoor komt de realiteit om zelf als front-end developer aan de slag te gaan steeds dichterbij, zodat ook ik binnenkort de vetste websites kan bouwen.

Kaat de kantoorhond
Debiteurenbeheer

Kaat

Als chef debiteurenbeheer bij Niice speur ik dagelijks het hele kantoor door. Ik ben hier blijven hangen na mijn snuffelstage en inmiddels ben ik hier niet meer weg te denken. Ik verbind de marketeers, developers en designers met mijn sociale persoonlijkheid met gemak. Bovendien zorg ik dagelijks voor minder stress op de werkvloer, meer gezelligheid én extra beweging tijdens de wandelingen. Heb jij een afspraak met één van mijn teamleden? Dan zorg ik voor een warm welkom. Je merkt het: voor de belangrijkste taken op kantoor ben je bij mij aan het juiste adres!

Niice Lynn
Stagiair

Lynn Reimes

Tijdens mijn studie aan de Hogere Hotelschool in Leeuwarden, start ik een nieuw avontuur in de Achterhoek. Tijd om - na het levendige hotelleven te proeven - te groeien in iets heel anders: digitale marketing. Hospitality zit in mijn bloed. Dat ga ik bij Niice inzetten om campagnes te ontwikkelen die niet alleen effectief zijn in het bereiken van de doelgroepen, maar ook een warme en gastvrije/klantvriendelijke sfeer uitstralen!

Niice Jengo
Developer

Jengo Wiegerinck

Als developer bij Niice houd ik mij bezig met het goed laten functioneren van websites, webshops en webapplicaties. Ik vind het leuk om mooie designs om te toveren naar een interactieve, levendige, schaalbare en optimaal presenterende website. Mijn doel is om jouw gebruikers een goede ervaring te geven op een website.

pijltje-links-witCreated with Sketch. pijltje-rechts-witCreated with Sketch.
🚀
mail-iconCreated with Sketch.