Vejen mod et (mere) bæredygtigt website er ikke ligefrem en dans på roser. Det er en besværlig opgave, fordi det kræver mod, viden og kompromiser. Men det kan sagtens lade sig gøre, hvis du ved, hvor du skal eller kan starte processen. Derfor har vi samlet nogle konkrete initiativer med rod i UX og design, der gør dit website mere bæredygtigt.
En klassisk hovedpine, der opstår når webprojekterne skal op i omdrejninger, er stakeholder-tilfredsstillelse kontra nødvendige elementer. I den proces er vi oftere mere bange for at undlade noget end at tilføje noget ekstra - bange for at misse en mulighed og at frustrere brugeren unødigt.
En tur ned ad minimalismens smalle sti kan derfor være noget af en udfordring. Den bryder med vores indgroede strategi om more is better, og den tvinger os til at skære det unødvendige fedt fra. Og det kan godt gøre ondt, men det er den nødvendige indstilling, der skal til for at skabe bæredygtige webløsninger.
Når vi filtrerer vores beslutninger gennem et mindset om bæredygtighed lige fra begyndelsen af projekterne, så finder vi evnerne til at vælge de rigtige elementer og funktioner til uden at skulle bruge tid på at retfærdiggøre dem på bagkant. Det er måske en svær disciplin at tillære sig et bæredygtigt mindset, men det går langt ud over bare at reducere CO2-aftrykket. Vi skaber også online kundeoplevelser, der loader hurtigere, er nemmere tilgængelige på usikre forbindelser og tilbyder mere strømlinede og intuitive brugerrejser.
Med det in mente, så har vi samlet et par nøglepunkter til, hvordan du kan gøre dit website mere minimalistisk og bæredygtigt med UX og design.
Gør UX mere simpel
Lad os kigge på, hvordan vi kan gøre et website mere bæredygtigt med konkrete UX-initiativer.
Reducér unødvendige page loads
Jo mere data vi bruger, jo mere elektricitet løber der igennem kablerne – og brugt elektricitet er i sidste ende udledning af CO2. For at reducere mængden af data, er det fra et UX-perspektiv effektivt at kigge nærmere på længden af brugerrejserne. Hvis en bruger i dag fx skal besøge fire undersider for at nå enden af brugerrejsen, så kan et redesign af rejsen til kun to undersider reducere CO2-aftrykket ret markant af deres besøg på sitet. Samtidig skaber det også en bedre oplevelse for brugeren, da tid og klik til målet er blevet nemmere og kortere.
Så humlen i det arbejde ligger i at identificere, om der ofte opstår for lange brugerrejser blandt jeres besøgende på websitet. Læg mærke til, hvor rejsen typisk starter, og hvilke undersider de besøger, inden de når det ønskede mål. Det er særligt på undersiderne og handlingerne, der ligger mellem start og mål, hvor den kritiske sans bærer mest frugt: Er siderne og handlingerne strengt nødvendige for, at brugeren når det ønskede mål?
Strømlin jeres content
Et middel til at opnå strammere og nemmere brugerrejser er at kigge på jeres content. Med tiden er det ret naturligt, at jeres website vokser – og meget af vokseværket kommer ofte fra nyt content. Nyt, og dermed også bedre, content er selvfølgelig vigtigt, og når der kommet nyt til, er der automatisk også noget content, som bliver outdated. Og det content ligger ikke kun og samler støv, det optager også serverplads, der kræver elektricitet, og for meget content skaber også unødig forvirring for brugeren på websitet.
For at få mere klarhed over hvilke content-sider, eller websider generelt, som ikke møder dine brugeres behov, kan du med fordel kigge på sitets bounce rate. Bounce rate er hverken god eller dårlig, da det kommer an på, hvorfor brugeren bouncer, da god UX sørger for, at hvis brugeren bouncer, så er der en god grund til det.
En høj bounce rate kan fx betyde, at brugeren fandt lige præcis det, vedkommende havde brug for og ikke havde behov for at loade flere sider på sitet. Det kan også betyde, at brugerne bouncer fra dit site, fordi de ikke fandt det, de ledte efter. Derfor kan det være en stor fordel at strømline jeres content på sitet, så du får sorteret ud i det, der ikke er relevant for at kunne skabe en mere klar, simpel og intuitiv vej hen til målet for dine brugere.
(Mere) effektiv billedbehandling
Hvis der ét sted, hvor dine indsatser mod et mere bæredygtigt website har en markant indvirkning, så er det ved at bruge og behandle billeder mere effektivt. Billeder er nemlig, af flere årsager, seriøse klimasyndere på langt de fleste websites.
Billeder kan optimere læseoplevelsen og -venligheden af blogindlæg, artikler, e-bøger og de kan skabe klarere indtryk af et brand. Men billeder, der ikke er optimeret til web, kan forlænge page load-time unødigt, hvilket påvirker brugeroplevelsen negativt og kan give højere bounce rates. Optimerer du i stedet dine billeder rigtigt, så kan du både optimere web performance og forbedre sitets bæredygtighed.
Vælg den rigtig filtype
Når du gemmer et billede, så sker der automatisk en komprimering, som gør billedfilen mindre. Men vælger du den rigtige filtype til det rigtige billede, så reducerer du også filtypens størrelse bedst muligt:
- Brug JPEGs til billeder og illustrationer, der indeholder meget skygge.
- Brug GIF eller SVG til stregtegninger og illustrationer.
- Brug PNG eller GIF til simple billeder, som kun bruger få farver som fx ikoner og logoer.
Men selv hvis du har brugt det rigtig filformat til dine billeder, så fylder billedet højst sandsynligt stadig mere, end det behøver at gøre. Derfor findes der også effektive værktøjer til komprimering af billeder så som Shortpixel, Image Optimizer og TinyPNG. De programmer kan integreres med dit website, så alle billeder automatisk bliver optimeret rigtigt. Det sparer både tid og reducerer mængden af menneskelige fejl.
Skab sløring i billederne
Billedstørrelse afhænger i høj grad af mængden af detaljer i billedet. Derfor kan det være en god idé, særligt med JPEG, at sløre kanterne i billedet for at bringe filstørrelsen ned. Du skal selvfølgelig ikke sløre billedets fokus, men du kan med fordel sløre detaljer eller områder i billedet, der ikke har betydning for det budskab, som billedet skal kommunikere.
Overvej vektorbilleder
Nogle gange kan vi opnå samme, og hvis ikke større, effekt ved at bruge andre former for visuelt udtryk end bare billeder. CSS styles og SVG vektor-filer kan fx sagtens understøtte en stærk brandoplevelse, hvis brandets visuelle identitet tillader det. Samtidig kan du slette ubrugte grupper eller lag i dine vektor-filer, så filerne på den måde også bliver mindre.
Brug færre farver
De fleste computerskærme, smartphones og tablets bruger OLED-teknologi som oplyser hver enkelt pixel i skærmen. Det bruger selvfølgelig meget strøm, men der er flere ting, du kan gøre for at reducere strømforbruget, når skærmene er tændt. Det handler helt enkelt om brugen af farver – eller nærmere mangel på samme. Mørke farver, og særlig sort, er de mest effektive farver på disse skærme, da alle andre pixels er slukkede, og mørke farver bruger generelt mindre strøm. Fx bruger blå mere strøm end fx grøn og rød, og den mest energikrævende farve er hvid. Derfor kan du fx med fordel køre Google Maps, og alle andre apps med samme funktion, i dark mode for at reducere strømforbruget.
Mindre billedfiler
Groft sagt så jo større farvevariation, der er i et billede, jo mere fylder billedfilen også. På den måde kan mindre farvemætning også bidrage til at reducere dit websites energiforbrug. Med det in mente kan du, hvis du er designer, også bygge brand- og visuelle identiteter, som er mere bæredygtige ved at vælge en farvepalette, der bruger mindre strøm. Det er fx ved at undgå blå og vælge grøn, rød og sort til.
Monokrome billeder producerer generelt også mindre filer end meget farvemættede billeder. Mindre filstørrelser sparer energi igennem hele netværket lige fra datacenteret ud til brugerens devices, og selvom monokrome billeder i gråskala også indeholder hvid farve, så indeholder også de også meget sort, som derved skaber balance i energiforbruget.
Overvej dine fontvalg
Designere har også mulighed for at gøre andre, og mere bæredygtige, valg, når det kommer til valg af fonte. Kommercielle og open-source webfonte har givet flere muligheder for typografi, men de kan også påvirke klimaet ved at øge mængden af dataoverførsel og antallet af serveranmodninger det kræver for at loade en webside.
De mest effektive fonte er derfor de præ-installerede fonte som Helvetica, Arial, Times New Roman mv. Disse fonte kræver nemlig ingen dataoverførsler eller serveranmodninger, og fontene er nærmest gratis. Ulempen er dog, at de præ-installerede fonte fjerner noget af designerens kreativ frihed, som sparker liv i en væsentlig diskussion: Hvordan er vi både kreative og bæredygtige? (men det er et andet blogindlæg).
For designeren er det også vigtigt at overveje om den valgte skrifttype er en, der hostes lokalt eller via en subscription service. Hostes fonten hos fx Adobe Fonts, kan denne service øge antallet af serveranmodninger, som i tilgift øger energiforbruget på websitet. Med fonte fra fx Abobe Fonts er du selvfølgelig sikker på, at fontene har den rigtige licens, men set fra et bæredygtigt perspektiv er det bedre, at du hoster fontene selv. Til slut er det også værd at overveje, om du har brug for fonte med meget stor vægtning som fx bold, semi-bold, italic, light osv.
Vil du vide mere om, hvordan du gør dit website mere bæredygtigt? Så tag fat i Peter Solow, som er en af vores førende eksperter inden for digital bæredygtighed.