Dags att spara el. Ni också, webbdesigners.

UX-bloggaren Pete Markiewicz går så långt som att säga att webbdesign och designers borde vara, och kommer att vara, själva fokalpunkten för internethållbarhet. Enligt webprestandagurun Steve Sounders kommer hela 85% av potentiella effektiviseringsvinster från att designa om en sajts gränssnitt.

Som tur är går hållbarhet hand i hand med användbarhet så vi kan fortsätta följa etablerad designmetodik, t ex design thinkingprocessen - som utgår från att förstå användarna.

Korta användarresor sparar el och skapar dessutom en bättre användarupplevelse genom att möta användarnas behov snabbt och effektivt. En gång i tiden var spenderad tid på en webbsida ett vanligt nyckeltal där mer tid sågs som något positivt. Nu vet vi att det lika väl kan betyda att besökaren behöver leta länge för att utföra sitt ärende. Något som kostar tid för användaren, och potentiellt sett skapar frustration, samtidigt som det konsumerar onödig energi.
Så tillbaka till klassrummet på Berghs där eleverna fick utgå från ett redan pågående elevprojekt kring resor i skärgården.

1. Utgå från användarnas behov

Eleverna fick som första uppgift att definiera de tänkta användarnas behov. Vad säger, tänker, känner och gör användarna?

Genom att skapa förståelse för vilka användarna är och deras behov – varför de besöker sajten – skapar vi en utgångspunkt för designarbetet.

Målgruppsbeskrivningar och användningsmål tvingar oss att tänka ur användarperspektiv och får lättare att möta behov och önskemål.

2. Möt behoven enkelt och effektivt

Väl användarna var beskrivna fick eleverna idégenerera kring hur dessa behov bäst möts - på ett så effektivt sätt som möjligt. De fick besvara följande frågor: Hur kan vi så snabbt som möjligt lösa användarnas behov? Hur skapar vi överblick så att de lätt kan nå sina mål?

När designen börjar ta form så är det viktigt att testa hur effektiv den är. Hur mycket tid behöver besökaren för att utföra sitt ärende på webbplatsen? Genom att välja bort det som inte hjälper våra besökare skapar vi inte bara en mer överskådlig webbsida utan även en lättare då inga onödiga sidor behöver laddas ner. Här rekommenderar vi användningstest, hellre på få personer ofta än många personer mer sällan.

Vad gäller design gäller även minimalism i användandet av bilder och grafiska element. Vi använder de bilder som förhöjer upplevelsen, inte fler. Det finns idag massor av verktyg för att komprimera bildstorlekar, rörligt material mm. Mer om det nedan.

Rörlig media har varit populärt i webbdesign de senaste åren. Men rörlig media bör användas aktsamt. Strömmande media är bland det mest resurskrävande för datorer och mobiler.

3. Banta sidans vikt

Tillgång till snabbt internet har gjort oss bortskämda. Tidigare var optimering alltid en nödvändighet för att sidan skulle ha acceptabla laddtider. Idag kan en bild på en sida vara högupplöst, fast det inte behövs. Besparingen som görs av optimering gör skillnad, inte bara i användarupplevelse, utan även i strömförbrukning.

Sätt en viktbudget för hela webbplatsen, bryt ner den per sida och optimera sedan efter det.

Genom att prioritera korta laddtider skapar vi inte bara en bra användarupplevelse i alla enheter utan säkerställer också att vår tjänst kan nås och användas via äldre enheter eller via en sämre internetuppkoppling – en tillgänglighetsfråga!

Optimera bilder

Bilder har stor påverkan på en sidas laddtid. De är ofta viktiga för upplevelsen, men inte alltid. Utvärdera vilka bilder som bidrar till användarupplevelsen och välj noga vilka som behövs och vilka som kan bytas ut mot ren text, eller enkla vektorillustrationer, utan att det försämrar för användaren.

De bilder som används behöver vara i rätt filformat och komprimeras på bästa sätt. Vektorbilder väger mindre än fotografier. Blurr kan användas i fotografier för att minska vikt, se exempel. Det finns massor av verktyg för att komprimera bilder och kommer ständigt fler, här är några exempel:

• tinypng.com
• shortpixel.com/online-image-compression
• imageoptim.com/api

Använd rörligt/strömmande sparsamt

Animationer, även enkla, drar processorkraft. De behöver användas enbart där de tydligt förhöjer användarupplevelsen. Strömmande media är bland det mest utsläppsgenererande på internet eftersom de är både processor- och dataintensiva. Så även här behöver vi välja när video verkligen behövs, hålla videon så kort som möjligt för att spara tid för användaren och komprimera den. Här är MP4 att föredra för videos och t ex WEBP är ett mycket mer energieffektivt format för korta animationer än GIF-animationer som helst helt bör undvikas.

Optimera innehåll

Utvärdera bounce rate och agera på resultatet. Varför ser det ut som det gör? Hur bra presterar webbsidans innehåll, se över bounce rate - är det bra eller dåligt att besökaren direkt lämnar sidan? Finns det sidor som aldrig besöks? Varför? Kan dessa tas bort? Jobba löpande med webbsidan, följ era nyckeltal och fortsätt förbättra och vidareutveckla. Håll texten kort och informativ, strukturera innehåller efter användarens behov. Utgå från era målsättningar och våga välja bort det som inte stöttar målen, oavsett om det är innehåll eller önskemål på nya funktioner.

Se över hosting

Varifrån kommer den el som förbrukas? Hur hållbar är den? Se till att hosta er webbsida med hållbar el.

Och hur gick det för våra elever på Berghs?

De tyckte såhär efter avslutad workshop:

Avslutande tips för hållbar webbdesign

1. Utgå från användarnas behov
2. Möt behoven så snabbt och effektivt som möjligt
3. Lansera litet och optimera för lång livslängd
4. Banta sidans vikt
5. Se över sidans hosting, hur hållbar är elen?