Guide til bæredygtigt webdesign

I 2019 stod internettet alene for 3,7 pct. af den samlede CO2-udledning globalt, og i 2040 regner man med, at det tal er oppe på 14 pct. Internettets CO2-aftryk har betydning, og vi kan ikke ukritisk stå på sidelinjen som webdesignere og se det tal vokse.
Vidste du, at der faktisk er mange ting, du kan gøre for at få en grønnere hjemmeside?  Illustration: Getty Images
Vidste du, at der faktisk er mange ting, du kan gøre for at få en grønnere hjemmeside? Illustration: Getty Images
af Marie Dysgaard Christensen
Bæredygtigt webdesign giver os mulighed for at reducere vores ressourceforbrug og gøre en positiv forskel for miljøet. Bæredygtige løsninger bør ikke kun være et salgsargument, men en selvfølge. Jeg har lavet en kort guide til dig her, så du kan tage hul på den bæredygtige fremtid, når du designer til web. 
  
Bæredygtigt webdesign berører hele udviklingen af et site fra proces over hosting til indretning af de fysiske lokaler, man sidder og udvikler sit design i. Her kan man tænke på at bruge mindre strøm, sortere sit affald, bruge bæredygtige post it-sedler osv. Altså mere gængse aspekter af bæredygtighed, som vi kender det fra vores hverdag, som også skal medtænkes, hvis man vil favne bæredygtigt webdesign og begynde at tilbyde det som en ydelse. 
 
Min guide handler om design, udvikling og vedligeholdelse af et site, og jeg har inddelt de forskellige områder af bæredygtigt webdesign i niveauer med den tanke, at de første niveauer omhandler et websites kommunikation og proces, og de sidste handler om mere håndgribelige og tekniske metoder, som f.eks. komprimering. 
 

Niveau 1: Skub brugeren til at træffe bæredygtige valg

Brugerrejsen er måske ikke altid det nemmeste at redesigne efter bæredygtige principper, fordi det kan konflikte med en virksomheds forretningsmodel. Men der er ingen tvivl om, at vi kan gøre meget for miljøet, hvis vi skubber brugerne til at træffe mere bæredygtige valg. 
 
På e-shops er det normalt at friste brugerne til at lægge mere i kurven, ved f.eks. at tilbyde gratis fragt, hvis de handler for et bestemt beløb, eller ved et tidsbegrænset tilbud. Og brugeren fristes til at blive længere tid på et site ved at præsentere brugeren for, hvad andre har købt, eller hvad der er et godt match til det produkt, brugeren har vist interesse for. Merforbruget forurener, og i værste fald ender brugeren med at købe produkter, hun aldrig får brugt. Men bæredygtigheden forringes også på en mere subtil måde, når vi skubber brugeren til at besøge flere sider på vores site. Et radikalt og kritisk kig på brugerrejsen kan gavne bæredygtigheden. Giver man brugeren det, han rent faktisk har behov for, vil man måske i sidste ende få mere loyale brugere.   
 

Niveau 2: Planlæg 

Man kommer længst med bæredygtigt webdesign, hvis man medtænker det tidligt i processen. Det fremmer et bæredygtigt projekt at inddrage brugeren tidligt gennem research, interviews og test, så man hele tiden lærer og kan justere produktet herefter. Design thinking, agile og lean-udviklingsmodeller fungerer derfor godt i en bæredygtig sammenhæng. Agil og lean betyder, at man launcher sit site hurtigt med kun en eller få features, så man får hurtig brugerfeedback. Man kan derfor tidligt rette sin webløsning ind, og der er derfor større sandsynlighed for, at man når ud til brugeren med det rette budskab og den ønskede effekt. 
 
Og det kræver planlægning tidligt i processen, hvis man vil tænke det visuelle design og strukturering af kode ind i en bæredygtig praksis, som jeg guider til på niveau 3 og 4.  
 

Niveau 3: Site på skrump  

Der udledes CO2, når en bruger henter data ned fra en server. Jo mere brugeren skal hente, jo mere CO2 udledes der. Derfor er det godt at være kritisk overfor, hvor meget brugeren skal loade, og hvor mange kald der foretages, og om det er nødvendigt for den fortælling og oplevelse, brugeren får gennem vores site. Ofte kan vi komprimere formater og skære elementer væk, uden at det går udover den oplevelse brugeren får. Det kan endda give en bedre oplevelse. Less is more sustainable.
 
Fornuftig komprimering
Vi kan komprimere de assets, vi bruger. Det gælder om at sætte sig godt ind i formaterne og vælge dem, der er mest egnede. 
 
Radikal komprimering:
Og så er der den mere radikale komprimering, hvor vi kan gå ind og manipulere et billedes motiv eller åbne en fil og rense ud i data. Trækker vi f.eks. farver ud af et billede og slører baggrunden, vil det billede fylde markant mindre. Derfor er det godt at have produktfotos med en ensartet baggrund.  
 
Vektorfiler kan vi rydde op i med et vektorredigeringsprogram ved at slette ubrugte lag og fjerne vektorpunkter. Og hvis vi har valgt at vedlægge en font-fil på vores site, kan vi slette ubrugte glyphs for at minimere den mængde af data, brugeren skal hente. 
 
Det er selvfølgelig virkeligt få kilobytes, der bliver sparet på denne måde. Men det er kilobytes, der er usynlige for brugeren, og som ikke har betydning for brugeroplevelsen eller budskabet. Hvis et site bliver besøgt af flere hundrede tusinde brugere, bliver de få kilobytes til mange hundrede tusinde kilobytes, der ikke skal hentes, og det har i sidste ende betydning for CO2-aftrykket. 
 
Skær indhold ud
Er vi begyndt at tænke i den alternative komprimering, tror jeg, det næste punkt kommer helt af sig selv. Vi skal, klart nok, tænke minimalistisk og skære de elementer ud, som ikke taler ind i sidens budskab. Er det f.eks. nødvendigt at have fem billeder af det samme produkt, eller kan vi nøjes med tre? 
 
Vi skal blive gode til at gennemskue, hvilke medier der fylder meget, og være kritiske over for brugen af de medier. Der er f.eks. en tendens til at bruge video i en nærmest ren dekorativ sammenhæng, og her er det godt at kigge på, om det element kan erstattes af et medie, der fylder mindre. Den form for brug af video kan f.eks. erstattes af animeret grafik, som fylder markant mindre. Og skal hjemmesiden gøres endnu lettere, kan man overveje at erstatte billeder med vektorgrafik, som fylder væsentligt mindre end billeder. 
 
I faktaboksen finder du websites, der har brugt animeret grafik, og en oversigt over, hvor meget video, billeder og vektorgrafik fylder i forhold til hinanden.  
 
Tilbage til det håndkodede site 
Håndkodede sites, hvor man selv bygger sin kode fra bunden, er i teorien et hit inden for bæredygtigt webdesign, fordi vi på den måde undgår, at brugerne skal hente frameworks og kodebiblioteker, som fylder ekstra. Det er dog i dag i mange brancher ekstremt at håndkode sit site selv, og der er både fordele og ulemper, som er svære at gennemskue. Så hvis du ikke har lyst til at gå den vej, er mit bedste råd, at du allierer dig med gode udviklere, så I sammen kan designe et site, der er, som I vil have det, hvor I komprimerer koden smart.
 
Tænk i designsystemer og komponenter, så du får genbrugt dit design og får mindre kode. Brug CDN'er, og minimér antallet af eksterne scripts og stylesheets. Og undgå at downloade store kodebiblioteker for at lave en lille grafisk effekt; kod i det tilfælde selv din effekt, eller udpluk koden. 
 

Niveau 4: Formindsk energiniveauet gennem dit design 

Minimér bevægelse
Erstatter vi video med animeret grafik, har vi designet efter bæredygtige principper og reduceret CO2-aftrykket. Her har vi reduceret sitets tyngde, som jeg mener, er det mest grundlæggende princip inden for bæredygtigt webdesign. Men vi kan også kigge på, hvor meget energi eller batteritid vores site bruger på den enkelte enhed, som gengiver vores site. Animeret vektorgrafik implementeret som data fylder som sagt ikke særligt meget. Men bevægelse eller ”motion” stiller krav til den enkelte enheds CPU, som skal arbejde mere for at køre sitet. Og dermed bruger et site med animation mere energi end et site uden animation. Fjerne du al animation fra et site, har du gjort det mere bæredygtigt. 
 
Flere sorte pixels på skærmen
Af samme grund er der farver, som er mere bæredygtige end andre. Mange skærme er OLED-skærme, og de fremviser farver, så der kort fortalt bliver skruet op og ned eller slukket for de enkelte pixels, når en farve bliver vist. Når sort vises, er den enkelte pixel helt slukket, og ved visning af hvid er der omvendt skruet helt op for energiniveauet på den enkelte pixel. Det er derfor mere bæredygtigt at designe i mørke layouts, og det er også af samme grund, at man kan tilvælge dark mode på din enhed.  
 

Niveau 5: Slet sider, der ikke bliver besøgt 

Det er ikke god bæredygtig praksis at have gamle og ubesøgte sider liggende og fylde på en server. Det koster energi at have data liggende. 
 
Servere skal køre og holde sig kølige. Jo flere data der er gemt på en server, jo mere energi kræves der for at holde serveren kørende. Derudover kan det også kræve ekstra energi at sikre og beskytte dataene mod cyberangreb og andre sikkerhedsrisici. Derfor er det bæredygtigt at overveje, om dataene er nødvendige at gemme eller ej, og hvis ikke, så slet dem for at spare på energiforbruget.
 
Tag derfor et kig på dit sites data, og undersøg, om der er sider, der næsten aldrig bliver besøgt, og fjern de sider. Der er en god chance for, at de sider ikke bliver besøgt, fordi de ikke har værdi for brugeren. 
 

Afsluttende råd 

Går du i gang med bæredygtigt webdesign, kan du starte med at overveje, hvor det giver mest mening for dig at tage fat. Har du ikke indflydelse på, hvordan brugerrejsen skal se ud, eller hvordan processen skal tilrettelægges, så kan du starte med sortere i det indhold, du er ansvarlig for, og sikre dig, at det bliver formidlet gennem et bæredygtigt medie uden brug af elementer, der ikke er komprimeret på den mest hensigtsmæssige måde og i de rigtige formater.  
 
Råd til dig, der leder efter et godt match 
Hvis du står og skal hyre en webdesigner, kan du spørge til, hvad deres kendskab og holdninger til en bæredygtig webpraksis er. Gør det til en forudsætning, at de interesserer sig for det og kan designe og udvikle ud fra bæredygtige webprincipper. Jeg tror, de fleste webdesignere ser sig selv i en større sammenhæng, hvor man tager et bæredygtigt ansvar. Så det kan også være en måde at lokke dedikerede mennesker til din virksomhed. 
 
Er du webdesigner, der leder efter et godt match til dig, kan du høre din kommende arbejdsplads eller kunder om, hvorvidt de er interesseret i, at der bliver designet og udviklet ud fra en bæredygtig praksis. Herved får du også fortalt, at du er et dedikeret menneske, der er interesseret i at udvikle og designe efter etiske og ansvarlige principper. 
 

Faktaboks: Komprimeret guide med flere tekniske data 

 
  1. Vælg ”green hosting”. Skift over til en webudbyder, der kører på grøn energi. Det er nok det nemmeste og mest effektfulde tiltag, du kan gøre, og det kræver ikke indsigt i teknologi og design, hvilket de næste tiltag gør. 
 
  1. Site på skrump. På de websites, vi selv producerer, kan vi kigge kritisk på brug af video, billeder, typografier, farver mm. 
 
  1. Erstat video med et medie, der fylder mindre. Video kan i nogle tilfælde erstattes af animeret svg-grafik, der eksporteres som en LottieFile. LottieFiles er en ny webstandard, der pga. dens markant mindre størrelse vil være en bæredygtig erstatning for video. 
     
  2. Erstat billeder med vektorgrafik, og ryd op i vektorfilen i Adobe Illustrator, hvor du sletter ubrugte lag og grupper, og mere avanceret kan du rydde op i vektorpunkterne med ”simplify path”.
     
  3. c.Bliv klog på, hvor meget de enkelte medier og formater fylder. Her er et groft estimat: 
i.1 minuts video i 1080p-kvalitet (Full HD) vil typisk fylde omkring 100-150 MB, mens 1 minuts video i 4K-kvalitet (Ultra HD) typisk fylder omkring 350-500 MB. 
ii.Et billede i JPEG-format med en opløsning på 800x600 og et kvalitetsniveau på 80 pct. vil typisk fylde omkring 50-70 KB. Et billede i PNG-format med samme opløsning og kvalitet vil typisk fylde omkring 100-150 KB.
iii.WebP bruger avancerede komprimeringsmetoder, der kan reducere filstørrelsen på et billede med op til 25-30 pct. i forhold til JPEG og PNG.
iv.Vektorgrafik fylder generelt mindre end raster-grafik, fordi det ikke er afhængigt af opløsningen og kan skaleres uden at miste kvalitet. Vektorgrafik er normalt i filformater som SVG, AI eller EPS. En vektorfil kan fylde fra få kilobytes til flere megabytes, afhængigt af kompleksiteten af ​​billedet og antallet af elementer i det.
v. Eksempel på animeret vektorgrafik implementeret på sites: 
Collaborate CIC
no-heat.co.uk
Sam Fairbairn
Whirly Birdie
Wildflowers.garden
 
 
  1. Design med websafe fonte. Websafe fonte findes allerede på brugernes computer, så der skal ikke hentes en fontfil, før tekstlayoutet kan vises, som det er tiltænkt. 
     
  2. Brug én variabel font. Hvis websafe fonte ikke passer ind i sidens udtryk, kan du bruge en variabel font. Herved kan du opnå et flot tekstlayout med varierende snit ved brug af kun én fontfil. Fjern de glyphs fra filen, som ikke bliver brugt i dit design, så filen fylder mindst muligt. 
     
  3. Komprimér dine billeder. Vælger du et billedformat som WebP, opnår du en markant mindre filstørrelse på dine billeder. Dertil er der tricks som at sløre baggrunden og dæmpe farverne i dine billeder, hvilket også har betydning for et billedets filstørrelse.  
     
  4. Brug mørke farver. Du kan undersøge, om dit brand kan holde til, at du ændrer farverne i designet. Der er nemlig forskel på, hvor meget energi der bruges på at fremstille en farve på en skærm. Mørke farver bruger mindre energi end lyse farver.     
     
  5. Ryd op i din kode. Vær kritisk over for den kode, du bruger, og i nogle tilfælde fravælg at bruge eksterne scripts, kodebiblioteker og frameworks, da vi herigennem tvinger brugeren til at loade mere kode, end de behøver. 
     
  6. Tænk struktureret omkring dit frontend design, så du genbruger kode. Her kan jeg anbefale tilgangen atomic design. Du skal tænke i statiske sider, hvilket frameworket Astro er god til.  
     
  7. Slet sider, der ikke bliver besøgt. Det koster energi at have data liggende på en server, derfor er det dårlig bæredygtig praksis at have gamle og ubrugte sider liggende.
     
  8. Overvej ikke at bruge analytics scripts. Det er måske et ”bold move” ikke at tracke dine brugere. Men al trafik til dit site bliver lagret et sted, og det fylder mere og mere, for hver dag der går
 
  1. Tænk minimalistisk, og hav brugeren i centrum. Giv brugerne det, de kommer efter på dit site nemt og effektivt, og få dem hurtigt ud igen. 
     
  2. Bliv inspireret af bæredygtige sites her.

Del artikel

Tilmeld dig vores nyhedsbrev

Vær på forkant med udviklingen. Få den nyeste viden fra branchen med vores nyhedsbrev.

Forsiden lige nu

Læs også

Job