Jag som skriver här på Digital Designer heter Mattias Wihlgaard och arbetar till vardags som Creative Director på Viksjö Webbyrå. Vill du komma i kontakt med mig är du välkommen att skriva till mattias@digitaldesigner.nu eller skicka ett mess till 070-335 36 83. Eller så söker du efter mig på Facebook eller LinkedIn.
– 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å:
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:
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:
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:
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:
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.
UX-designer på designbyrån frog
Redaktör på Digital Designer och Creative Director på Viksjö Webbyrå
Få en lagom dos lite då och då med riktigt bra tips om hur du kan bli bättre på hållbar design. I det första nyhetsbrevet får du också en inbjudan till nätverket på Discord där du kan få tips och hjälp av andra designers som vill arbeta klimatsmart.
– 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å:
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:
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:
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:
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:
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.
UX-designer på designbyrån frog
Redaktör på Digital Designer och Creative Director på Viksjö Webbyrå
Få en lagom dos lite då och då med riktigt bra tips om hur du kan bli bättre på hållbar design. I det första nyhetsbrevet får du också en inbjudan till nätverket på Discord där du kan få tips och hjälp av andra designers som vill arbeta klimatsmart.
– 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å:
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:
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:
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:
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:
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.
UX-designer på designbyrån frog
Redaktör på Digital Designer och Creative Director på Viksjö Webbyrå
Få en lagom dos lite då och då med riktigt bra tips om hur du kan bli bättre på hållbar design. I det första nyhetsbrevet får du också en inbjudan till nätverket på Discord där du kan få tips och hjälp av andra designers som vill arbeta klimatsmart.