Gids 
voor 
een 
duurzame 
website 
development 
strategie

Gepubliceerd op 5/2/2021

Digitaal is niet persé "groen", integendeel

De digitale wereld wordt gezien als de oplossing voor milieuproblemen. Maar dat is niet altijd het geval, enkel en alleen als we webtechnologie op een goede manier gebruiken. Zoals we allemaal weten, kan het internet de maatschappij en het milieu enorme voordelen opleveren, maar het kan het ook veel schade toebrengen.

Hoe is dat eigenlijk mogelijk? Wat kan het internet doen om het milieu te schaden? Gaan we niet steeds meer digitaal net om onze planeet te beschermen? Helaas is de realiteit heel anders. Digitaal betekent niet automatisch groen. Van serverfarms tot datacentres tot het eigenlijke device, alles verbruikt energie om te functioneren, wat zorgt voor een enorme uitstoot van koolstof.

Wat is de kost van ons digitaal energieverbruik?

Heb je er ooit over nagedacht hoeveel middelen er nodig zijn voor je website? Gegarandeerd zijn dat er meer dan je denkt. Elke request dat je website verstuurt wordt ontvangen, verwerkt, teruggestuurd, en zo nodig ergens opgeslagen. Als je alles bij elkaar optelt, is dat heel wat.

Tijd voor wat harde feiten. Als het internet een land zou zijn, zou het het op vijf na grootste elektriciteitsverbruik ter wereld hebben. Volgens de website Carbon verbruikt het 416,2 TWh per jaar, wat neerkomt op 3,8% van de wereldwijde koolstofuitstoot. Dat is ongeveer evenveel als Duitsland verbruikt. Dat aantal blijft ook stijgen door onze honger naar data. Communicatietechnologie zal tegen 2025 zelfs meer koolstof uitstoten dan alle landen, behalve China, India en de VS.

De gemiddelde webpagina produceert 1,76 gram CO2 per bekeken pagina. 10.000 maandelijkse pageviews op je website staat gelijk aan 211 kg CO2 uitstoot per jaar, voor slechts één pagina. Naast de impact op het milieu, zaaien webtechnologieën ontevredenheid, tasten ze privacy aan, veroorzaken ze onethische beslissingen en bedreigen ze zelfs persoonlijke vrijheden en het welzijn van de samenleving.

Met deze calculator kan je een schatting maken van de voetafdruk van een webpagina.

Gelukkig is er iets zoals 'duurzame websites'. Iedereen kan een duurzame webdesignstrategie opzetten om zijn website groener te maken en zijn impact op het milieu te verkleinen.

Als het internet een land zou zijn, zou het het op vijf na grootste elektriciteitsverbruik ter wereld hebben.

Wat is duurzaam webdesign?

Nu het internet een belangrijke rol speelt in het dagelijks leven van miljarden mensen, zeker in deze tijden, moeten we meer duurzame digitale producten en diensten creëren. Duurzaam webdesign is the way to go. Het is een manier van web services ontwerpen waarbij mens en planeet op de eerste plaats komen. Het levert digitale producten en diensten op die clean, efficiënt, open, eerlijk, regeneratief en veerkrachtig zijn.

Duurzame websites bestaan vooral uit gecomprimeerde afbeeldingen, efficiënte bestandsformaten en lichte lettertypen. Daarnaast vermijden ze bloated frameworks. Je website milieuvriendelijk maken is niet alleen beter voor het milieu. Je zal een aantal grote voordelen ervaren in de user experience van jouw website. In dit artikel bespreken we enkele duurzame webdesignstrategieën om jouw website naar een groener niveau te tillen.

Hoe kan je een duurzame webdesign strategie opbouwen?

Het energieverbruik aan de front-end van een digitaal product of dienst wordt meestal gevormd tijdens de ontwerpfase. Ontwerpers, developers en makers van sites hebben de mogelijkheid om de milieu-impact te verminderen. Er zijn verschillende belangrijke aspecten waar we kleine, maar aanzienlijke veranderingen kunnen aanbrengen. Het enige wat je moet doen is een paar aanpassingen doorvoeren in de workflows. Met deze tool ontdek je hoe groen jouw website al is. Kunnen die resultaten beter? Je kan altijd contact opnemen met ons en wij helpen je met jouw duurzame website!

Gids om een duurzame website te ontwikkelen

Volg deze gids om jouw website groener te maken. Heb je erna toch nog vragen over sustainable web development? Laat het ons weten!

Development

De hoeveelheid gegevens die door webtoepassingen wordt gedownload neemt toe. Meer data betekent meer energieverbruik. Hoe kunnen developers hun steentje bijdragen aan een duurzame webomgeving?

1. Hanteer de mobile-first strategie

Ken jij een beter gevoel dan snel en gemakkelijk informatie vinden via je gsm? Zeg het maar, ik wacht wel. Oké, misschien is dat een beetje overdreven, maar we maken het allemaal wel eens mee dat we ellendig lang moeten zoeken naar informatie. De "mobile-first"-strategie leidt ontwerpers naar energiezuinigere, gebruiksvriendelijkere weboplossingen.

Toen ik onderzoek deed naar de effecten van corona op marketing, kwam ik erachter dat we meer mobiel surfen en kopen. Meer designers zien de mobiele ervaring nu anders dan die van desktop, door die gebruikerservaringen aan het begin van het ontwerpproces te plannen. Het is niet langer een bijkomstigheid.

Wat maakt de mobile-first strategie duurzamer? Het dwingt de eigenaar van de website om rekening te houden met de meest essentiële inhoud. Op die manier laden bezoekers minder pagina's en verbruiken ze minder energie in het proces. Wanneer je foto's en afbeeldingen verkleint voor mobiel, laden pagina's sneller en gebruiken ze ondertussen minder bandbreedte, wat betekent dat je meer energie bespaart.

Bespaar energie bij het coderen van een website door te beginnen met de mobiele weergave en voeg geleidelijk aan aspecten toe voor grotere schermen.

De "mobile-first"-strategie leidt ontwerpers naar energiezuinigere, gebruiksvriendelijkere weboplossingen.
2. Kies een groene host

Webhosting verbruikt veel energie en veroorzaakt een aanzienlijke CO2-uitstoot. Een groene host wordt aangedreven door hernieuwbare energie. Het is de meest cruciale stap om de uitstoot van je website te verminderen.

Wat is er belangrijk aan een host? Het moet een lage PUE rating (power usage effectiveness) hebben voor zijn datacenter. Een perfecte PUE is 1,0. Hoe verder de gegevens moeten reizen, hoe meer energie ze verbruiken. De hosting moet zo dicht mogelijk bij de kern van de gebruikersbasis zijn gevestigd. Als je een internationale gebruikersbasis hebt kan je een Content Delivery Network gebruiken.

Controleer ook of de provider een sterk milieubeleid heeft. Gebruik de nieuwste technologie om de beste prestaties, veiligheid en energie-efficiëntie te krijgen. Zorg ervoor dat bad bot traffic geblokkeerd is. Als je een CMS gebruikt, beperk dan de serververwerking tot een absoluut minimum door effectieve server caching of gebruik te maken van statische webtechnologie.

Ondertussen doen al veel hostingproviders mee en richten ze zich op hernieuwbare energiebronnen. Je kan controleren of jouw host groen is met behulp van deze tool van The Green Web Foundation. Als u op zoek bent naar een groen hostingbedrijf kan je deze directory raadplegen.

3. Schrijf reusable code

Werk jij graag efficiënt? Probeer dan niet het warm water uit te vinden. De CO2-voetafdruk van een website omvat ook de uitstoot van het team dat de website maakt, zoals kantoorenergie en reiskosten. Je kan tijd en energie besparen door herbruikbare code te schrijven, wanneer het mogelijk is. Het is efficiënter en zorgt voor een lagere CO2-uitstoot.

Hoe kun je je code meer reusable maken? Herhaal jezelf niet, laat een class maar één ding doen, schrijf unit tests voor je classes en maak het makkelijk om ze te testen. Schrijf code die gemakkelijk kan worden uitgebreid en schrijf geen code die niet nodig is. Houd je code herbruikbaar door een hoge samenhang te behouden zodat het zich kan aanpassen aan verschillende omgevingen.

4. Decoupling front-end and modular design system

Gebruik modulair code frameworks om bestandsgroottes tot een minimum te beperken, laadsnelheden te verbeteren en energie te besparen. Bepaalde functies van sommige codes of frameworks zijn niet noodzakelijk in elk project. Modularisatie maakt code makkelijk te begrijpen en beter te onderhouden. Je kan gemakkelijk methoden of functies hergebruiken in een programma en zo herhaaldelijk schrijven verminderen. Maak de code zo eenvoudig mogelijk zodat anderen de architectuur gemakkelijk kunnen begrijpen en de componenten, grenzen en interfaces kunnen identificeren.

Verminder coupling waar mogelijk. Loose coupling laat modules onafhankelijk van elkaar functioneren, zodat ze elkaar niet beïnvloeden als er fouten optreden. Denk na over de koppelingen en links die de code creëert, moet het gelinked worden aan die andere klassen?

Sterk gekoppelde modules maken het moeilijk om een functie te wijzigen. Een programmeur moet dan de hele codebase bewerken, in de plaats van slechts een enkele functie te wijzigen. Ontkoppeling maakt je code meer portable omdat het een functie laat presteren zonder externe ondersteuning.

Gebruik modulair code frameworks om bestandsgroottes tot een minimum te beperken, laadsnelheden te verbeteren en energie te besparen.
5. Lean/agile methoden in het development proces

Agile-methoden zijn gebaseerd op samenwerken en aanpassen aan veranderingen wanneer je nieuwe dingen leert. Deze aanpak is veel efficiënter dan andere traditionele benaderingen. Verspil geen middelen door features te bouwen die nog niet bewezen of getest zijn. Zo krijg je slordige code en technische schulden wat zorgt voor minder duurzame digitale oplossingen.

Met methoden als deze kan je grote, complexe projecten opdelen in een reeks "sprints" die elk focussen op een onderdeel van het grotere project. Start met deze methode door een sprint te plannen met duidelijke, functionerende deliverables, doorgaans elke twee weken.

6. De juiste technologie kiezen

Open source tools zorgen ervoor dat projecten zichzelf onderhouden doorheen de tijd. Ze optimaliseren softwaretools voor betere prestaties en efficiëntie waardoor het energieverbruik daalt. Ze houden de kosten laag en verbeteren de snelheid, flexibiliteit en wendbaarheid van projecten. Ze kunnen ook voor een sterke beveiliging en kwaliteitscontrole van je projecten zorgen. Ze helpen lean teams klein beginnen en ideeën testen voordat ze worden gescaled, waardoor ze minder verbruiken.

Je kan de duurzaamheid van een open-sourceproject evalueren door de volgende criteria te controleren. Keep in mind dat dit niet de enige factoren zijn. Om duurzaam te zijn, moet een project contributors hebben, en de codebase moet evolueren. Controleer de release geschiedenis voor het activity pattern. Zorg dat je een idee hebt van wie er over het project praat, want software is niet duurzaam zonder gebruikers of bedrijven die zich ermee bezighouden.

Webstandards maken de broncode eenvoudiger, waardoor de ontwikkeling en het onderhoud minder tijd kost. Ze verbeteren de prestaties en zorgen ervoor dat jouw digitale producten en diensten nauwkeurig worden weergegeven op verschillende apparaten en platformen. Dat zorgt ook voor een betere user experience en verruimt de toegang tot jouw content.

7. Information-architecture voor goede URL-routing

IA is de kunst en wetenschap van het organiseren en structureren van content van websites, web- en mobiele apps en social media software. Een goede informatie-architectuur zorgt ervoor dat gebruikers moeiteloos alles wat ze nodig hebben kunnen vinden. Minder klikken betekent minder energieverbruik en een krachtige gebruikerservaring. Een goede informatie-architectuur draagt bij aan een goede URL-routing, wat op zijn beurt de SEO van jouw site verbetert.

Een goede informatie-architectuur zorgt ervoor dat gebruikers moeiteloos alles wat ze nodig hebben kunnen vinden. Minder klikken betekent minder energieverbruik en een krachtige gebruikerservaring.
8. Duurzamere API's voor makkelijke integraties

Web API's missen herkenbare interface patterns. Om duurzaam te zijn moet je altijd hergebruik over kiezen heruitvinding. Een goed ecosysteem heeft een gemeenschap van adopters nodig om het te bevorderen. Dit houdt in dat de juiste prikkels moeten worden gegeven en dat een juiste mentaliteit moet worden aangemoedigd. Het is verleidelijk om aangepaste Web API's te maken omdat economische motieven soms de duurzaamheid voorbijstreven. Hergebruik daagt de huidige Web API's-praktijken en de daaromheen gecreëerde bedrijfsmodellen uit.

Design

Een aanzienlijk deel van de totale voetafdruk van het internet, sommigen zeggen zelfs tot 40%, vindt plaats aan de front-end, gemaakt door ontwerpers. Dat betekent dat design een groot deel uitmaakt van de weg naar duurzaam webdesign.

1. Kies voor flat design

Flat design maakt een einde aan onnodige elementen zoals kleurverlopen, beveled hoeken, enz. Die overbodige elementen leiden gebruikers niet enkel af, maar zorgen er ook voor dat pagina's langzamer laden, wat een grote impact heeft op het milieu. Het weglaten van die elementen is een eco-friendly aanpak, waarbij de inhoud voorop staat. Het komt de functionaliteit en leesbaarheid van jouw site ten goede en het is energie-efficiënter. Het verbetert de esthetiek van je site en zorgt ervoor dat pagina's sneller laden.

2. Het belang van User Experience

Een goede gebruikerservaring helpt jou en je klanten om je website duurzamer te maken. Je beperkt ongewenste omwegen van je gebruikers tot een minimum. In de ideale wereld worden alleen pagina's geladen die de gebruiker wil bezoeken. Als je ongewenste clicks vermindert, verstuur je minder data requests en verbruik je dus minder energie.

Bezoekers houden van korte user journeys. Een korte journey bespaart energie door de verminderde tijd die een bezoeker online doorbrengt. Het wegnemen van obstakels draagt bij aan een efficiëntere user journey. Het bespaart tijd en energie en maakt online services toegankelijker en aangenamer in gebruik. Dat houdt in: het verwijderen van pop-up banners, het vermijden van 'dark patterns' die mensen misleiden, het verwijderen van technologie die een gebruiker vraagt om software te installeren voordat ze gebruik kunnen maken van jouw digitale product of dienst.

Digitale producten en diensten moeten naadloos werken op verschillende schermformaten, technologieën, browsers, bandwidth speed en apparaten. Anders zullen gebruikers tijd en energie verspillen aan het uitvoeren van taken.

Een goede gebruikerservaring helpt jou en je klanten om je website duurzamer te maken. Je beperkt ongewenste omwegen van je gebruikers tot een minimum.
3. Goed gebruik van beeld en video

Afbeeldingen met een hoge resolutie zien er geweldig uit op je website, maar ze vereisen ook veel laadtijd. Comprimeer je afbeeldingen zo veel mogelijk. Videocontent is een van de meest effectieve manieren om engagement uit te lokken. Jammer genoeg zijn video's niet zo effectief voor de prestaties van je website. Gebruik daarom een zo laag mogelijke resolutie en embed ze direct op de website, zonder autoplay.

Gebruik lazy loads voor media. Dat betekent dat een video of afbeelding pas verschijnt als je naar beneden scrollt. Als een bezoeker niet helemaal naar beneden scrollt, laden ook niet alle afbeeldingen. Dat zorgt voor meer energiebesparing en een snellere laadtijd, wat een bonus is voor je SEO.

4. Goed gebruik van kleur en lettertypes

De populariteit van OLED-schermen, die elke pixel oplichten, neemt toe. Ze maken het mogelijk voor digitale designers om energie te besparen. Donkere kleuren vereisen minder energie om te verlichten. Blauwe pixels verbruiken ongeveer 25% meer energie dan rode en groene pixels. Verkies dus energiezuinige kleuren, zonder de toegankelijkheid uit het oog te verliezen. Overweeg om je ontwerp ook in dark mode te zetten.

Custom font files kunnen de bestandsgrootte van webpagina's vergroten. Een doorsnee custom lettertypebestand kan meer dan 200kb groot zijn. Meerdere lettertypes en weights kunnen snel oplopen, waardoor het energieverbruik toeneemt en de prestaties trager worden. Om dat te vermijden, gebruik je beter system fonts die al op de toestellen van de gebruikers staan.

Donkere kleuren vereisen minder energie om te verlichten. Blauwe pixels verbruiken ongeveer 25% meer energie dan rode en groene pixels.
5. Bepaal een page weight budget

Een page weight budget is een maximum gewicht dat je bepaald van een webpagina in kilobytes of megabytes aan bestanden. Het is de grootte van bestanden wanneer een webpagina wordt geladen.

Het doel van zo'n budget is om elke belangrijke pagina van de website te ontwerpen in niet meer dan het afgesproken budget. Dit betekent dat ontwerpers aandacht moeten besteden aan de grootte van pagina-assets zoals afbeeldingen, animaties, embedded video's, enzovoort.

Marketing

1. De perfecte content

Je hebt een duidelijke contentstrategie nodig die antwoord geeft op de meest voorkomende vragen van jouw doelgroep. Door onderzoek te doen naar je bezoekers en die informatie te gebruiken in jouw strategie, kan je jouw publiek snel de antwoorden geven die ze nodig hebben en je kansen op succes vergroten. Terwijl verminder je ook de energie die bezoekers gebruiken bij het zoeken naar antwoorden.

Het doel van elke webpagina moet duidelijk zijn, gemakkelijk te begrijpen en mensen uitnodigen om actie te ondernemen. Het maken van duidelijke en actiegerichte content helpt gebruikers te kiezen tussen hun opties waardoor ze minder tijd besteden aan keuzes maken.

Het doel van elke webpagina moet duidelijk zijn, gemakkelijk te begrijpen en mensen uitnodigen om actie te ondernemen.
2. Verzamel gegevens voor advertenties op een milieuvriendelijke manier

Wanneer je bezoekers tracked, hun gegevens verzamelt en een targetting maakt in ads, wordt er veel energie verbruikt. Dat komt door de grootte van tracking- en advertentiescripts, de benodigde energie om gebruikersgedrag te verwerken en te traceren en databanken die enorme hoeveelheden aan gebruikersgegevens verzamelen. Dat kan ook de privacy van gebruikers schenden en de gebruikerservaring teniet doen.

Kijk verder dan de GDPR en respecteer de spirit van webprivacy. Maak bezoekers duidelijk welke gegevens je verzamelt en hoe je ze zal gebruiken. Probeer gegevens te verzamelen op de minst indringende en meest efficiënte manier mogelijk.

3. Vergeet je SEO niet

Dankzij goede SEO en een duidelijke informatiearchitectuur vinden de juiste mensen de juiste inhoud veel efficiënter. Minder klikken om energie te besparen en een betere gebruikerservaring. Keyword optimization helpt mensen om je content te vinden, zowel via zoekmachines als de mensen die binnen een website zoeken. Hoe beter de content vindbaar is, hoe minder irrelevante content iemand hoeft door te nemen om te vinden wat hij of zij zoekt.

Dankzij goede SEO en een duidelijke informatiearchitectuur vinden de juiste mensen de juiste inhoud veel efficiënter.

Duurzame website strategie voor klanten

Je klanten hebben misschien wat overtuiging nodig om een groene website te maken. Laat de volgende voordelen vallen en ze zullen zeker en vast aan boord zijn:

  • Verbeterde gebruiksvriendelijkheid en gebruikerservaring
  • Duidelijke en makkelijk te begrijpen designs
  • Verbeterde SEO rankings
  • Kortere laadtijd
  • Mobiel-geoptimaliseerde pagina's

Er is dus echt geen reden om geen duurzame websites te maken. Het is beter voor zowel mens als planeet.

Besluit

Het versturen van een e-mail heeft hetzelfde effect op het milieu als het gebruik van een plastic zak. Daarom zijn boeken vaak milieuvriendelijker dan e-boeken. Muziekalbums kopen is beter dan ze te streamen. De lijst is eindeloos. Bovenal schudden deze statistieken onze eerdere algemene opvatting dat digitaal ook "groen" betekent door elkaar.

Digitaal kan milieuvriendelijk zijn, maar alleen als we er goed mee omgaan. Het internet maakt het ook veel gemakkelijker om informatie over duurzaamheid en milieubescherming te verspreiden. Het is tijd om op de trein naar duurzame webontwikkeling en -design te stappen. Als je daar wat hulp bij nodig heeft, neem dan gerust contact met ons op en wij helpen je op jouw duurzame reis!

Klaar 
om 
jouw 
website 
groener 
te 
maken?

Neem contact op en wij helpen je op weg op maat van jouw business. 

Experience Lab BV

BTW BE0756.564.465

Coupure Rechts 620
BE-9000 Gent

© 2021 Experience Lab BV - All rights reserved.