Design och UX för hållbara webbplatser

Jonas Halléhn designar för hållbara digitala tjänster.

Vi har sett uppmaningar i slutet på mejl om att inte skriva ut för miljöns skull, och papperskvitton byts allt oftare ut mot digitala. Det är förstås bra! Men där vi tidigare kunnat intala oss att digitala lösningar är bättre för klimatet får vi nu tänka om. För när vi fortsätter att konsumera allt mer data, och webbplatserna vi besöker blir större och tyngre, så växer mängden el som behövs för att upprätthålla vårt onlinebeteende. Den enorma energiförbrukningen på Internet innebär en stor klimatpåverkan eftersom det går åt mängder av el för att förse oss med, och lagra, all data. 

Energiförbrukningen från datan gör avtryck

Webbplatsers energieffektivisering är det inte bara en fråga om teknik. Ett gediget design-, innehålls- och utvecklingsarbete lägger grunden för hur stor webbplatsens energiförbrukning blir. 

Jonas Hallén är UX-designer på Antrop, med ett stort intresse och engagemang för hållbarhet.  

Vi som arbetar med att skapa webbplatser och digitala tjänster har ett ansvar att minska den energiförbrukning vårt arbete ger upphov till. Därför bör alla berörda, som UX-designers och -writers, utvecklare och innehållsstrateger, vara med redan i planeringsfasen.

Jonas Halléhn, UX-designer på Antrop

Det finns mycket designers och alla som arbetar med att utveckla en digital tjänst kan bidra med för att minska webbens klimatpåverkan. Man ska också komma ihåg att en god användbarhet går hand i hand med det som är bäst för klimatet. Och att kunder och användare alltmer kommer att kräva hållbarhetssäkrade digitala tjänster.

Några fokusområden för dig inom design och UX

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. För vi är på väg åt fel håll. År 2010 vägde den genomsnittliga webbplatsen 467 kb. Sedan dess har webbplatser blivit tyngre, främst på grund av bilder och video. 2019 var den genomsnittliga webbplatsen 1836 kb tung, en siffra som förväntas öka. Så vad gör vi?

Mobilt först, även för klimatet

Att skapa bra upplevelser för mobil- respektive stationära anvä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 webbplatsens hastighet och energieffektivitet.

Tunga sidor drar energi (både el och användarens egen)

På de flesta webbplatser är bilder den enskilt största anledningen till tunga sidor. Ju fler, och ju större filerna är, desto mer data överförs och mer energi går åt. Tänk så här för minskad energiåtgång:

Innehållet ska tillföra verkligt värde

Ställ dig själv dessa frågor innan du lägger till en ny bild.

• 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?

Video på din webbplats - optimera den så här

Video blir alltmer populärt. Det är också den överlägset mest data- och bearbetningsintensiva formen av innehåll. Är det verkligen nödvändigt med en video? Om svaret är ja kan du minimera mängden streamad video genom att ta bort automatisk uppspelning och hålla innehållet kort.

Det viktiga valet av typsnitt

Ett webbtypsnitt kan förbättra webbplatsens visuella tilltal. Men det kan också addera betydande filvikt. Webbstypsnitt gör det möjligt att tala om för webbläsaren att ladda ned ett specifikt typsnitt och använda det på webbsidan. Men en enda typsnittsfil kan väga 250 kb, och det kan bara vara för standardvikten. Om du vill ha fet stil, kursiv eller understruken - lägg till ytterligare 250 kb per vikt.

För att minska påverkan från anpassade webbtypsnitt kan designers ö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 vikter som du använder.

Dark mode - en ljus kraft för energianvändningen

Mörka webbplatser, "Dark mode" eller mörkt läge, var en av de första teknikerna som kom för att spara energi på webbplatser, och det blir allt vanligare. Det finns flera intressanta fördelar med mörkt läge, som att det ger ökad komfort när du surfar i ljusfattiga miljöer till exempel. Och så sparar det energi, vilket gör det möjligt att använda enheterna under längre perioder utan laddning. 

Ta in på ett grönt webbhotell

En stor mängd el går åt i den serverhall som hanterar din data. Därför ska du välja webbhotell med omsorg. Det kan ha stor inverkan på energieffektiviteten och webbsidans hastighet. Se till att webbhotellet använder 100% förnyelsebar el. 

Molnhosting eller "virtuell server" är att föredra framför en dedikerad eller egen fysisk server för den som har möjlighet. Men en del verksamheter med höga säkerhetskrav, som myndigheter och banker, har inte möjlighet att göra det valet. 

Använd ett CDN (Content Delivery Network) för bilder, script m.m. om du har mycket trafik från andra länder. Ett CDN är ett sätt att lägga innehållet på geografiskt utspridda servrar och datorhallar. Det gör man för att öka driftsäkerhet, prestanda och för att få snabbare svarstider  på sin hemsida.

Var hittbar, sökbar och ha välfungerade SEO

Att arbeta med SEO och med hittbarhet - alltså ditt innehålls möjlighet att dyka upp i sökresultat - har inverkan på hur stor energiåtgång din webbplats har. Varför? Jo, det påverkar hur lång 
tid en användare spenderar på 
en webbplats. Vi vill inte att människor slösar bort varken sin tid, eller dyrbar energi, på att scrolla igenom innehåll som ger dem lite eller inget värde. Hjälp användaren att utföra sina uppgifter snabbt och friktionsfritt på alla sorters enheter. Du behöver arbeta med både den tekniska och innehålls-SEO:n.

Planethälsa och god användbarhet går hand i hand

Kom ihåg! 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.

Så det som är bra för användaren är bra för planeten. 

Jonas Halléhn är UX-designer på Antrop. Hållbarhet är ett stort fokusområde för Jonas och han använder sig bland annat av verktygen ovan för att skapa hållbara digitala webbprojekt. 

Källor och inspiration till mer läsning:

Podd: Molnet slukar el - går det att lagra data hållbart? - Vetenskapsradion Klotet

Artikel: Designers guide to web performance optimization

Artikel: Page weight budget om your site

Webbplats: Sustainablewebdesign.org

Debattartikel: Vi borde tala mer om surfskam än flygskam

Testa din webbplats: Website Carbon Calculator