Duurzaam Webdesign: Hoe je duurzaamheid in je website toepast

Wat is het doel van duurzaam webdesign?

Het doel van duurzaam webdesign is om websites te ontwerpen en te ontwikkelen die niet alleen mooi en functioneel zijn, maar ook gebruiksvriendelijk en milieubewust. Door bepaalde keuzes te maken tijdens het ontwerpen en bouwen van een website zorg je ervoor dat de website zo min mogelijk energie verbruikt. Bijvoorbeeld door het optimaliseren van afbeeldingen en het gebruik van groene webhosting. Alles met als doel een website met een zo laag mogelijke CO2 uitstoot.

Waarom is duurzaam webdesign belangrijk?

Het verduurzamen van een website is vooral belangrijk omdat de website hierdoor veel minder energie verbruikt. (in de vorm van servers en apparaten, die aan het werk moeten om een website te laden) En daardoor dus ook minder CO2 uitstoot. Iets wat ontzettend hard nodig is, omdat het internet door de toenemende hoeveelheid en grootte van alle websites steeds vervuilender wordt. Volgens het Sustainable web manifesto zou het internet (als het een land zou zijn) de 4de grootste vervuiler zijn. Tijd voor verandering dus.

Hoe maak je een website duurzamer?

Een eerste onderdeel waar we ons op focussen met duurzaam webdesign is het daadwerkelijk verduurzamen van je website. Dus zorgen dat de website onderaan de streep minder CO2 uitstoot. Zoals je hierboven al hebt kunnen lezen doe je dit door te zorgen dat je website minder energie verbruikt. Dit doe je bijvoorbeeld door:

1. Kleinere afbeeldingen

De meest eenvoudige manier om je website te verduurzamen is door het verkleinen van het bestandsformaat van je afbeeldingen. 

Met een programma zoals Adobe Photoshop exporteer je de afbeelding in een zo klein mogelijk bestandsformaat. (bijvoorbeeld WEBP) Dit betekent gelukkig niet dat je afbeeldingen kleiner worden, of dat dit ten koste gaat van de kwaliteit. In tegendeel. Vaak zijn de afbeeldingen zelfs van betere kwaliteit. 

Bij het verkleinen van de afbeeldingen kijk je naar het perfecte formaat voor de individuele afbeelding, zodat de afbeelding op alle schermen hartstikke scherp is. 

2. Duurzame webhosting

Een belangrijk onderdeel van duurzaam webdesign is de manier waarop je website “gehost” wordt. Een webhost biedt jou een stukje serverruimte waarop je de website kunt plaatsen. Twee belangrijke vragen die we onszelf hierbij stellen zijn: Waar staat de server? is dit bijvoorbeeld in Nederland? Of aan de andere kant van de wereld? En welke duurzame inspanningen levert de webhosting partij? Compenseren ze de CO2 uitstoot? En maken ze gebruik van hernieuwbare energie? Om te voorkomen dat je nieuwe duurzame website bij een grijze webhosting partij draait, adviseren we je hier graag over. 

3. Alleen wat écht nodig is

Duurzaam webdesign draait om keuzes maken. Telkens bepalen hoe je alle informatie op de juiste manier presenteert, zonder dat de pagina te zwaar wordt. Dit zorgt ervoor dat je meer na gaat denken over de content die je op een website plaatst. Is al deze informatie wel echt relevant? En wordt deze afbeelding puur als opvulling gebruikt of om de content écht te versterken? 

4. Een goed caching beleid

Caching is het opslaan van informatie van een website in een browser. 

Doordat je website al deels opgeslagen is in de browser van je bezoeker, hoeft je website niet helemaal opnieuw geladen te worden. Dit zorgt ervoor dat je website vele malen sneller laadt, en de ervaring voor je bezoeker dus een stuk beter wordt.

Om dit goed in te stellen is een caching beleid belangrijk. Hierin geef je aan welke informatie opgeslagen moet worden en hoe lang deze informatie opgeslagen moet worden. 

Hoe maak je een website beter toegankelijk voor je bezoekers?

Een ander belangrijk aspect van duurzaam webdesign is de toegankelijkheid en het ontwerp van je website. Toegankelijkheid richt zich op hoe gebruiksvriendelijk jouw website is. Hierbij ga je nadenken over de manier waarop je de website aan je bezoekers presenteert en de geschiktheid van je website voor mensen met een (visuele) beperking. Een aantal zaken om rekening mee te houden zijn:

1. Eenvoudige navigatie

Het belangrijkste onderdeel van een toegankelijke website is een eenvoudige navigatie. Het uitgangspunt is: Laat je bezoeker van A naar B gaan zonder obstakels en moeilijke omwegen. In sommige gevallen zal dit dus ook betekenen dat je ervoor kiest om die extra pagina niet toe te voegen in je funnel, om zo de reis voor je bezoeker te vereenvoudigen.

Een ander aspect om rekening mee te houden is dat je bezoeker niet hoeft te jo-jo’en. Dit betekent dat je bezoeker telkens terug moet naar bijvoorbeeld de homepage, om een andere pagina te kunnen bezoeken. Het jo-jo’en zorgt er namelijk voor dat je bezoeker meer pagina’s bezoekt. En meer pagina’s betekent dat je website meer CO2 uitstoot. 

2. Duidelijk contrast in kleuren

Om ervoor te zorgen dat de inhoud van je website goed leesbaar is, is het belangrijk om rekening te houden met kleurcontrasten. Een lichte kleur letter op een lichte achtergrond is bijvoorbeeld erg moeilijk leesbaar. Zeker voor mensen met een visuele beperking. Daarom is het belangrijk dat je hier tijdens het ontwerpen al rekening mee houdt. 

Er zijn allerlei handige tools voor design programma’s zoals Figma en Adobe XD waarmee je eenvoudig kunt checken of de kleuren voldoende contrasteren. Zelf maken wij in Figma gebruik van de “Contrast” plugin. Een andere manier om het contrast te checken is door de developer tools van Google Chrome te gebruiken. Hierin kun je eenvoudig checken of er voldoende kleurcontrast is gebruikt bij de kleuren op je website. 

3. Houd rekening met (visuele) beperkingen

Naast kleurcontrast zijn ook aspecten als lettergrootte, symantische tags en ALT-teksten belangrijk voor de toegankelijkheid van je website.

Maak de letters op je website bijvoorbeeld niet te klein (vaak is 16 pixels het minimum op desktop, afhankelijk van het lettertype). En maak gebruik van symantische tags in je code. Hiermee geef je bij de inhoud van je website aan wat het doel van de content is. Aan de voorkant zie je hier helemaal niets van, maar voor mensen met een visuele beperking maakt dit een wereld van verschil. De symantische tags worden namelijk door schermlezers gebruikt om te verduidelijken wat er op een website staat. Ditzelfde geldt ook voor ALT-teksten bij afbeeldingen. Hiermee geef je in het kort aan wat er op een afbeelding staat.

4. Zorg voor een snelle laadtijd ook op langzame(re) netwerken

Hoewel in grote delen van Nederland het internet steeds sneller wordt. Zijn er nog steeds plekken (ook in Nederland) waar het internet minder snel is. Hierdoor duurt het langer om een website te laden, wat de ervaring voor je bezoeker minder prettig maakt.

Een goede manier om de laadtijd van je website te versnellen is door de afbeeldingen op je pagina’s te verkleinen. Niet in formaat, of door te besparen op kwaliteit. Maar door de afbeeldingen te optimaliseren en een ander bestandsformaat mee te geven. (Bijvoorbeeld WEBP) Een goed caching beleid kan ook bijdragen aan de snelheid van een website. Zeker als je veel bezoekers hebt die je website regelmatig bezoeken. 

Wat zijn de voordelen van duurzaam webdesign?

Je bent vast ook benieuwd wat zo’n duurzame website dan oplevert. Hieronder vind je een aantal van de voordelen van duurzaam webdesign:

1. Besparing van 50% – 75% CO2 uitstoot

Op een gemiddelde website weegt een pagina ongeveer 2 MB. Wordt er maandelijks 1.000 keer een pagina bezocht op jouw website? Dan staat dat gelijk aan +/- 800 gram CO2 uitstoot. Op jaarbasis is dit 9,6 KG. 

Door een website duurzaam op te bouwen kun je de pagina grootte met 50 tot 75% terugdringen tot +/- 500 – 700KB. (In sommige gevallen zelfs minder). Een pagina van 500 KB stoot gemiddeld 166 gram CO2 uit per 1.000 bezoekers. Op jaarbasis ongeveer 2 KG. Een besparing van bijna 75%. 

O.b.v. cijfers uit een rapport op digitalbeacon.co

2. De beste gebruikservaring

Doordat de pagina’s op je website lichtgewicht ontwikkeld zijn, wordt je website in z’n geheel een stuk sneller. En doordat er goed nagedacht is over de inhoud van je website, is het gemakkelijk om de juiste informatie op je website te vinden, zonder obstakels en omwegen.

Deze werkwijze levert niet alleen wat duurzaamheid betreft een groot voordeel op, maar ook voor de bezoekers van je website is dit een hele fijne bijkomstigheid. Je website wordt namelijk een stuk gebruiksvriendelijker. Je bezoeker hoeft zich geen weg te banen door een moeras van overbodige informatie en je bezoeker wordt niet belemmerd door een trage website.

3. Laadtijden tussen 1-2 seconden

Waarschijnlijk heb je wel eens gehoord dat een website binnen 3 seconden geladen moet worden omdat een bezoeker anders afhaakt. Hoewel er tegenwoordig ook al gesproken wordt over 2 seconden, is dit een richtlijn die al jaren aangehouden wordt. De kern van dit verhaal is dat een gemiddelde website bezoeker geen zin heeft om lang te wachten. En dus ook zonder pardon je website weer weg klikt. 

Duurzaam webdesign is gericht op lichtgewicht pagina’s, en een goed caching beleid. Dit zorgt ervoor dat je website super snel geladen kan worden. Met een paginagewicht rond de 500 KB is het bijvoorbeeld mogelijk om je website binnen een seconde te laden. Komt je bezoeker nog eens terug dan zal dit, vanwege het caching beleid, zelfs binnen tienden van een seconde zijn. 

4. Scores van 85 + in Google page speed

Hoewel wij zelf de impact van een website op het klimaat als belangrijkste uitgangspunt hebben, en niet de waarde die Google aan een website hangt. Is het een fijne bijkomstigheid, dat een duurzame opgebouwde website vele malen beter scoort in de page speed tools van Google dan een niet duurzaam opgebouwde website. 

Dit komt omdat de focus bij een duurzaam opgebouwde website ligt op onder andere het meest optimale formaat voor afbeeldingen, het instellen van een goed caching beleid en het maken van andere bewuste keuzes die ten goede komen aan het gewicht en de snelheid van een pagina. Google kijkt voor het bepalen van de score ook naar deze aspecten, maar dan vanuit het gebruiksgemak van je website. Je website zal daarom hoog scoren op al deze vereisten.

Interesse in duurzaam webdesign?

Interesse in een duurzame website? Daar vertellen we je graag meer over! Neem contact met ons op of lees de informatie op onze website. Onderaan deze pagina vind je een aantal andere interessante blogposts over duurzaam webdesign.