– 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.