Författare: Mattias Wihlgaard

Att mer eller mindre rakt av översätta manifestet till svenska är ett sätt att etablera principerna i en svensk kontext och inspirera dig som är digital designer i Sverige att ta ett större miljöansvar.

”The planet is experiencing unprecedented climate change and the Internet is both part of the problem and the solution.” – sustainablewebmanifesto.com.

Vi motiverar ofta användandet av digitala tjänster som ett sätt att arbeta mer miljövänligt men det vi kallar ”molnet” är inget annat än gigantiska serverhallar på jorden som slukar mängder med energi. Internet beräknas orsaka närmare 4% av världens totala koldioxidutsläpp och ökar i takt med behoven av digitala tjänster.

Gör vi som vi alltid har gjort kommer resultatet att bli detsamma. Vårt nuvarande klimat kräver en mer radikal förändring men det förutsätter än mer radikala åtgärder än vad som görs idag.

Manifestet listar sex avgörande principer som är en förutsättning att arbeta efter för att genomföra de åtgärder som krävs för ett grönare internet.

Ren

”Tjänster som vi skapar och tjänster som vi använder ska drivas av förnybar energi.”

Det som gör störst skillnad för att arbeta rent är att använda gröna webbhotell som drivs av förnybar energi. Förhållandevis få webbhotell i Sverige kommunicerar en grön profil vilket förhoppningsvis kommer att förändras när allt fler får upp ögonen för den klimatpåverkan som internet orsakar. Även relativt få webbyråer marknadsför sig som en grön webbyrå. Vill du upphandla en grön webbyrå så ta reda på hur de faktiskt arbetar klimatsmart genom hela designprocessen och inte bara säger sig använda grön el.

Effektiv

”Produkter och tjänster som vi skapar ska förbruka så lite energi och material som möjligt.”

Internetuppkopplingen blir allt snabbare och våra datorer, plattor och mobiler blir allt kraftfullare och klarar av att skicka och ta emot en ökande mängd data. Det gör att vi inte behöver vara lika noggranna med hur stora bilder vi laddar upp eller hur stora mängder kod vi hanterar. Det leder tyvärr till att våra hemsidor och digitala tjänster tenderar att bli allt med krävande när de egentligen behöver bli lättare i fråga om datamängd. Bara mellan 2017 till 2020 har en vanlig hemsidas tyngd i medeltal ökat med 30%.

Öppen

”Produkter och tjänster vi skapar ska vara tillgängliga och öppet kunna delas med andra.”

För att spara på både energi och material så är det bara dumt att uppfinna hjulet två gånger. Vi kommer från en kultur där det är viktigare att hålla på sitt eget än att dela med sig till andra för att vi tror att det ger konkurrensfördelar. Problemet är att konkurrens inte är särkilt miljövänligt. Ju mer öppna vi är, ju mer samarbetsvilliga vi är, ju mer effektiva kan vi bli tillsammans för att skapa radikal förändring.

Ärlig

”Produkter och tjänster vi skapar ska inte vilseleda eller utnyttja användare i design eller innehåll.”

I en kultur där ”Fake News” och ”Clickbait” är vardagsmat är det inte konstigt att människor blir på sin vakt och inte vågar ta till sig av viktig information. Det drabbar tyvärr även sådan fakta som kan vara avgörande för planetens välmående och sätter käppar i hjulet för den handlingskraft som planeten så väl behöver. Ju ärligare vi blir i vår digitala kommunikation ju troligare är det att vi får användare som gör det vi önskar att de gör.

Uppbyggande

”Produkter och tjänster vi skapar ska vara till nytta för både människa och miljö.”

Det vi skapar ska inte bara förbruka så lite energi som möjligt utan även aktivt ge energi tillbaka. Designbloggen Digital Designer är ett bra exempel på det. Den ger både viktig kunskap om hållbar design och bidrar med en tredjedel av intäkterna till klimatfinansiering. Det är en mer radikal metod än bara klimatkompensering som är mer av ett nollsummespel. Aktiv klimatfinansiering handlar i större utsträckning om att vilja göra ett medvetet positivt klimatavtryck.

Uthållig

”Produkter och tjänster vi skapar ska fungera när och där människor behöver dem som mest.”

För att samla mänskligheten i en gemensam strävan för planetens bästa är masskommunikation avgörande för att snabbt få ut viktig information. Här har ett väl fungerande internet en viktig betydelse, inte minst hos människor och i områden där det behövs som allra mest. Våra digitala tjänster måste kunna fungera när och där det behövs som allra mest, oavsett uppkopplingshastighet, oavsett vilka enheter som används och oavsett om det råder storm utanför fönstret.

Gör ett Klimatbokslut

Ett bra sätt att implementera principerna i ditt arbete är att varje år göra ett Klimatbokslut där ambitionen ska vara att sträva efter en uppåtgående kurva.

Ett enkelt sätt att göra detta på är att fråga dig själv ”Vilka förändringar har jag genomfört för att arbeta så grönt som möjligt?”. Om du har genomfört färre förändringar än förra året får du -1 poäng. Om du bara fortsatt att förvalta de förändringar som du tidigare genomfört får du 0 poäng. Om du både har fortsatt förvalta tidigare förändringar och dessutom genomfört nya förändringar får du +1 poäng. Dokumentera ditt resultat över tid och du får ett diagram med din utvecklingskurva.

Vill du göra detta mer detaljerat kan du använda var och en av de sex principerna i manifestet för att ge dig själv ett mer specifikt omdöme per rubrik. Summera därefter det totala resultatet.

Vill du göra ett Klimatbokslut på ett ännu mer vetenskapligt sätt finns det verktyg för att beräkna den uppskattade summan av koldioxidutsläpp som just ditt arbete orsakar. Ett verktyg för privatpersoner är Världsnaturfondens Klimatkalkylator som finns på https://www.wwf.se/klimat/klimatkalkylatorn/.

– Efter att ha hört programmet kände jag mig först ganska nedstämd. Länge hade jag kopplat ihop hållbar design med fysiska produkter och trott att digitala tjänster som jag skapar i mitt yrkesliv inte har någon direkt klimatpåverkan. Allt vändes upp och ned, säger han.

Jonas Halléhn är UX-designer på designbyrån frog och hans intresse för hållbarhet föddes ur hans ständiga driv för rättvisefrågor. Ju mer han fördjupar sig i ämnet hållbar design blir det något mer än bara ett fritidsintresse och även en allt viktigare del i hans yrke som digital designer.

– Att digitala tjänster har en negativ påverkan på vårt klimat har blivit tydligare. Tänk dig att du lägger upp en tweet på Twitter, det motsvarar 0,02 gram koldioxid. Det är ju ingenting, tänker du säkert då, men om vi räknar in alla andra användare på plattformen så postas det i genomsnitt 500 miljoner tweets varje dag. Då är vi uppe i 10 ton koldioxid per dag, säger han.

I slutet av artikeln finns Jonas egna tips på bra böcker, poddar och radioprogram för dig som vill lära dig mer om hållbar design.

När Jonas får frågan om hur jag som webbdesigner kan bidra till ett bättre klimat märks det att han är insatt i ämnet. Hans svar är uttömmande och detaljerat och den fakta han presenterar nedan är en riktig ögonöppnare. Först vill han slå fast det mest väsentliga:

– Först och främst är det viktigt att inse att vi har en global klimatkris. Efter det är det dags att ta reda på vad det är som gör att de digitala tjänster vi gemensamt skapar bidrar till så mycket koldioxidutsläpp, säger han.

Kort och gott går det att beskriva som: Megawatten bakom megabyten. För att skapa en fantastisk digital upplevelse är en stor mängd el involverad. Från datacenter, telekomnätverk till slutanvändarens enheter som mobiler och bärbara datorer. 

Om vi bara tittar på hur många uppkopplade enheter som finns idag är det mer än 20 miljarder. Något som väntas öka till uppemot 100 miljarder år 2025. 

Ett annat problem är att våra digitala tjänster bara blir allt tyngre. På 10 år har storleken på våra webbplatser ökat med 400%. Från 467 kb per hemsida 2010 till 2 198 kb per hemsida 2020. Detta leder till att fler serverhallar behöver byggas, vilket i sin tur, leder till en ökad elanvändning. 

Enligt en rapport publicerad i Journal of Cleaner Production från 2018 uppskattar de att kommunikationsteknik kommer att använda 14% av den globala elproduktionen år 2040. Jämfört med dagens användning som ligger mellan 2-4%. 

– En annan stor bov i dramat är hur elen produceras. Om vi tittar globalt produceras hela 60% av elen från olja, kol eller gas. Så sammanfattningsvis så bidrar våra allt tyngre digitala tjänster till mer energiåtgång och ökande koldioxidutsläpp, säger Jonas.

Så vad kan vi som digitala designers göra i praktiken om allt vi gör bara skapar mer utsläpp?

– Jag vill vara tydlig med att tanken med hållbar design inte är att sluta använda något, utan att börja använda det på ett bättre sätt. Genom att jobba noggrant och smart för att ta fram mer energisnåla digitala tjänster som har lägre datavikt. Vi behöver inte börja stort. En enkel sak att börja med är att mäta hur mycket utsläpp som orsakas av den tjänst du jobbar med just nu. Det går att göra på ex websitecarbon.com. Det är bara genom att mäta som vi vet om vårt jobb har minskat en digital tjänst utsläpp eller ej, säger han och fortsätter att tipsa om bra saker att tänka på:

Jonas samlade tips

Ta in på gröna webbhotell

Det absolut viktigaste är att se till att våra digitala tjänster tar in på gröna webbhotell. Alltså servrar som går på 100% förnyelsebar el. Där kan vi som webbdesigners vara med och påverka genom att tidigt prata om vikten av det i våra projekt.

Förbättra SEO och hittbarhet

Ju lättare innehållet är att hitta, desto färre sidor behöver användaren ladda för att hitta informationen. Det betyder att färre serverförfrågningar görs och att onödiga sidelement, som foton och videor som tar upp mycket bandbredd, inte behöver laddas in. 

Tydlig och mer effektiv UX-copy

UX-copy har inverkan på webbplatsens energieffektivitet eftersom det påverkar hur mycket tid människor spenderar på en webbplats. Vad vi inte vill är att människor lägger onödig tid på att bläddra igenom innehåll som ger dem litet eller inget värde och samtidigt innebär bortkastad energi.

Minska friktion

En viktig del i en bra användarupplevelse är att minska friktion. Användarna ska kunna hitta och utföra sina ärenden på ett smidigt sätt. Bra användarupplevelser gör det enklare och roligare att använda webben för alla och minskar dessutom mängden slösad energi. 

Minska laddningstiderna

En oemotståndlig bieffekt av kortare laddningstider är att vi får en ökad synlighet hos sökmotorer. Det skapar också en bättre användarupplevelse. Besökare är mer benägna att stanna kvar på sidor som laddar snabbt. Kortare laddningstider skapar också en högre konvertering.

Designa för mobilen först

Att skapa bra upplevelser för mobilanvändare förbättrar tillgängligheten. Börja därför med att designa för mobil för att sedan skala upp till datorer. Då undviker du att behöva ladda information och innehåll som är avsett för stationära datorer till mobilen. Det förbättrar även webbplatsens hastighet och energieffektivitet.

Prioritera färger med låg energi

Pixlarna på din skärm använder elektricitet och för enheter med OLED-skärmar gör mörkare färger en betydande skillnad. Försök att prioritera färger med låg energi, samtidigt som du har tillgängligheten i åtanke. Svart har lägst energiförbrukning då alla färgkanaler RGB är avstängda. Vitt är den färg med högst elförbrukning. 

Designa för Dark Mode först

Därför vill jag slå ett slag för Dark Mode First när du designar. Det finns flera bra fördelar med Dark Mode. Det ger ökad komfort när du surfar i ljusfattiga miljöer och så sparar det energi, vilket gör det möjligt att använda enheterna under längre perioder utan laddning.

Se över användandet av bilder

På de flesta digitala tjänster är bilder den enskilt största orsaken till sidvikt. Ju fler bilder du använder och ju större dessa bildfiler är, desto mer data behöver överföras och desto mer energi används. Ställ dig själv följande frågor innan du lägger till en ny bild på din design:

• Tillför bilden verkligt värde för användaren?
• Kommunicerar den användbar information?
• Kan samma påverkan uppnås om bilden är mindre?
• Kan vi att dra ner på antalet bilder som inte är synliga för användaren, som till exempel i bildkaruseller?
• Kan vi uppnå samma effekt med vektorgrafik (eller CSS-styling) istället för ett foto?

Om vi som designar måste använda bilder är det viktigt att vi minskar deras vikt. För att uppnå det kan du använda följande knep:

• Komprimera och optimera bilderna. Två gratisverktyg jag provat är TinyPNG och Shortpixel.
• Använda svartvita bilder.
• Blurra bakgrunder på foton.
• Använd de mest effektiva filformaten, WebP eller AVIF för foton.
• Använd SVG-filformat för illustrationer och ikoner. Det gör bilderna skalbara utan att öka deras vikt.
• Återanvänd Design Assets. Ett exempel kan vara att du bara levererar en ikon med olika states i samma fil till utvecklaren istället för att leverera flera olika PNG-filer.

Se över användandet av videos

Även om det är mindre vanligt än bilder, blir video alltmer populärt som ett innehållsformat på digitala tjänster, och det är den överlägset mest dataintensiva och bearbetningsintensiva formen av innehåll. Det skapar mycket högre belastning på användarens processor, vilket resulterar i mycket högre energiförbrukning.

Det gäller samma här som med bilder, fråga dig själv om videor verkligen är nödvändiga. Om de är det följ då följande tips:

• Minska mängden video som streamas genom att ta bort automatisk uppspelning från videor. Autoplay-videor är inte bara dåliga för miljön de orsakar även problem för användare med sensoriska störningar och rörelsekänslighet. Att placera en uppspelningsknapp framför en video säkerställer att den bara laddas om användaren definitivt vill se den, vilket är bättre för användarupplevelsen och minskar onödig streaming av data. 
• För video är MP4-filer generellt mer effektiva och levererar mindre filer än MOV eller animerad GIF, och ger också bättre tillgänglighet med funktioner som ljudbeskrivningsspår och textning.
• Varje sekund räknas i ett videoklipp. Längden på videon är en av de viktigaste faktorerna och en enda sekunds videoinnehåll förbrukar mer data än en enda helskärmsbild i JPEG. Vi kan både spara tid för användarna och hjälpa miljön genom att hålla det kort och koncist.
• Går videoklippet att presenteras som en webbanimation istället?

Välj typsnitt noggrant

När du designar hållbart är det viktigt att välja typsnitt noggrant. Webbtypsnitt från Google Fonts gör det möjligt att tala om för webbläsaren att ladda ned ett specifikt typsnitt och använda det på den digitala tjänsten. Det kan förbättra webbplatsernas visuella uttryck men kan lägga på betydande filvikt till de webbplatser där de används. En enda typsnittsfil kan väga så mycket som 250kb och då får du bara med standardvikten. Behöver du ha fetstil också blir det 250kb extra. 

För att minska påverkan från anpassade webbtypsnitt kan du överväga följande alternativ: 

• Använd systemtypsnitt, inte minst som brödtext. De är inte alltid lika vackra, men teckensnitt som Arial och Times New Roman kan användas utan att ladda några typsnittsfiler alls eftersom de redan finns på användarenheten.
• Använd färre teckensnittsvarianter. Var sparsam i antalet typsnitt och de olika varianter som du använder.
• Håll dig till moderna webbfilsformat som WOFF och WOFF2, som använder högre komprimeringsmetoder jämfört med TTF-, OFT- och SVG-filformat.
• Använd en delmängd av tecknen som finns i typsnittet och ta bort tecken från typsnittet som du inte behöver. Målet är att behålla de tecken som behövs när vi skriver på den digitala tjänsten.
• Minimera antalet språk som typsnittet stödjer.

Ta fram en sidviktsbudget

En sidviktsbudget är precis som det låter, en budget för hur mycket en webbsida får väga. Det är viktigt att en sidviktsbudget görs gemensamt i början av ett projekt. Syftet med att göra det tidigt är att säkerställa ett samförstånd mellan beställare, projektledare, UX-designer, visuell designer och utvecklare. Det leder till att de olika intressenterna har klart för sig och förstår och jobbar mot det gemensamma målen, samt fördelarna med att upprätthålla budgeten för att på så sätt skapa en så effektiv webbplats som möjligt. Det finns ett bra verktyg som heter Performance Budget Calculator. 

Optimera prestandan

Dessa delar är egentligen mer för utvecklare. Men det är bra om du som designer har koll på att vissa prestandadelar kan du vara med att påverka under ditt designarbete. Du bör alltid undvika scrolleffekter i din design och du bör planera för en bra Lazy Load av innehållet på den digitala tjänsten. 

– De flesta av dessa åtgärder är inte svåra, de kräver helt enkelt uppmärksamhet på detaljer och att du tänker noggrant i alla aspekter av design, innehållsskapande, utveckling och hosting. Bäst av allt, nästan allt vi kan göra för att hjälpa webbplatser att bli mer energieffektiva kommer också att göra dem bättre på andra sätt. Oavsett om det är bättre SEO, bättre webbprestanda eller bättre användarupplevelse. En effektivare webbplats är i grunden en bättre webbplats, för både användaren och planeten, säger Jonas.

Om du gör en framtidsspaning, hur ser det ut med digital hållbarhet om 10 år?

– Intressant fråga som är väldigt svår att svara på. Men om jag utfår från vad jag vet idag så tror jag att vi designers kommer få vara med om samma sak som med tillgänglighetskraven. Det finns redan lagförslag på gång i Frankrike på att digitala tjänster ska vara klimatanpassade och det tisslas lite om det även i EU-parlamentet. Så det här är någonting vi kommer att behöva leva med i vårt designande.