Reduceret webdesign
Reduceret webdesign består af mange dele men her er inspiration til de første ting du nemt kan ændre
Reduceret webdesign
En hjemmeside vil altid have at klimaaftryk, men det kan nedbringes.
Skift til en grøn host
Find en webhotelsudbyder der hoster din hjemmeside med grøn energi.
Lav en analyse
Brug forskellige værktøjer til at analysere din hjemmeside og find ud af hvad den udleder.
Optimer & reducer
Gå i gang med at optimere og reducerer de forskellige dele af din hjemmeside.
Ny & forbedret
Når din hjemmeside er reduceret er den både hurtigere og har bedre SEO.
Optimer og reducer
Farver
Gode praksisser
- Undersøg hvilken type skærm din målgruppe benytter
- Vælg røde eller grønne nuancer fremfor blå
- Dark mode bruger 30 til 65% mindre energi end light mode
Farverne der bruges på din hjemmeside har betydning for hvor meget CO2 der udledes når din side vises og dit farvevalg har derfor betydning.
Alle skærme består af pixels og disse pixels lyser op i forskellige farver alt efter hvad du ser på skærmen. Dog findes der forskellige typer af skærme, hvoraf de to mest brugte på nuværende tidspunkt er LCD og OLED skærme, der fungerer på hver deres måde.
LCD skærme har backlighting der lyser de forskellige pixels op og derved er der ingen forskel på om der vises en helt hvid eller sort skærm = ingen forskel på batteri levetid.
OLED skærme derimod lyser hvert enkelt pixel op individuelt, men det er langt fra alle skærme der er OLED, men de bliver mere og mere populære til både PC og smartphone.
I denne forbindelse har Google lavet en undersøgelse der viser at dark mode brugte 30 til 65% mindre energi end light mode, afhængig af den app de tjekkede.
Derudover viser undersøgelser også at blå bruger mere energi end rød og grøn. Så det kan være en idé at skifte de blå farver ud eller gøre dem mørkere.
Ved fuld lysstyrke:
Rød: 600mW | Grøn: 580mw | Blå: 800mW
Der findes ikke én løsning som fungerer for alle, da det handler om at kende sin målgruppe og tilpasse derefter. Nogle synes dark mode fungerer bedst – andre light mode. Det kan derfor være en god idé tilbyde sine brugere begge dele.
Font & Typografi
Gode praksisser
- Begræns dig til 2 fonte
- Brug SVG til ikoner og ikke Web Fonte som Font Awesome
- Vælg skrifttyper der er designet til skærmbrug fremfor print
Der findes tusindvis af typografiske muligheder ude på det store internet som kan bruges til ens digitale produkter og ydelser. Men valget af font kan sørge for et større ressourceforbrug ved at øge dataoverførsel og antallet af server anmodninger det kræver at loade en side.
Det mest effektive valg er at bruge en system font der er pre-installeret på enheder. Dette kan være: Arial, Times New Roman eller Helvetica på Apple produkter og Roboto på Android.
Systemfonte kræver ingen server anmodninger og dataoverførsel at bruge, hvilket gør dem til det mest bæredygtige valg men de kan samtidig begrænse den kreative frihed hos designeren.
Det er også muligt at bruge Web Fonte som hostes andetsteds som f.eks. Google Fonts og din hjemmeside kalder denne når den skal bruges. Dette kan dog påvirke loade hastigheden.
Som den sidste mulighed er det muligt at indlejre sin font ved brug af CSS style @fontface i sit stylesheet. Dette tilføjer til størrelsen på siden men mindsker dermed HTTP anmodninger.
Man skal derfor være strategisk i sit brug af fonte. Man kan f.eks. vælge at bruge en ikke system font til de mere fangende dele som overskrifter eller menupunkter og en systemfont til sin brødtekst, det kan endda være at brugeren ikke engang bemærker det.
Fotos
Gode praksisser
- Optimer og reducer filstørrelsen mest muligt
- Lav PNG og JPG filer om til WEBP
- Vælg skrifttyper der er designet til skærmbrug fremfor print
Når det kommer til fotos kan vi starte med at spørge os selv: “Er det nødvendigt at have det med? Giver det værdi til fortællingen på siden og brugerens oplevelse?”
Hvis svaret er ja det skal med, skal der arbejdes på billedfilens størrelse og benytte det mest effektive filformat samt kompressionsværktøjer til at optimere dem.
Fotos er oftest i filformaterne PNG eller JPG, da det rasterbilleder. Rasterbilleder er et gitter der viser billedet, lidt ligesom at billedet er bygget op ad pixels. Dette gør at filerne er større end f.eks. SVG eller GIF der vektorformater der er opløsnings uafhængigt. Dog egner SVG og GIF sig bedre til simple billeder der kan bruger få farver, som ikoner eller logoer.
Dog kan PNG eller JPG filer laves om til WEBP er 30% mindre eller det nyere format AVIF som er halvdelen af størrelsen på WEBP.
For at gøre billederne endnu mindre kan de først komprimeres i Photoshop og derefter køres igennem kompressionsværktøjer bruges TinyPNG eller andre lignende værktøjer på internettet. Se under Ressourcer for at par af dem.
Som en ekstra ting kanten er billeder sløres så det kun er det faktiske motiv der fremstår skarpt. Dette er med til at reducere billedfilens størrelse endnu mere.
Det er også en mulighed at anvende vektor formater som illustration eller ikoner fremfor billeder men mere om det i Illustrationer & ikoner.
Illustrationer
Gode praksisser
- Brug SVG filer til dine illustrationer
- Vælg illustrationer eller ikoner over billeder hvis muligt
- Eller find en god balance mellem billeder og illustrationer
Illustrationer og ikoner kan i tilfælde give dit brand et endnu stærkere indvirkning ved brugeren, da de selv skal være med til at være kreative. Men det kan være svære at bruge i E-handels situationer hvor brugeren gerne vil se produktet de køber.
Illustrationer og ikoner er oftest i filformatet SVG som er et letvægts format der opløsningsuafhængig, hvilket betyder at det kan skaleres op og ned efter behov, hvor det beholder dets skarphed, uden at tilføje ekstra vægt på hjemmesiden.
Dog er filformaterne gemt som geometriske ligninger som i tilfælde kan bruge mere computer kræft når de render.
Det kan være en god idé at finde en balance mellem brugen af billeder og illustrationer på din hjemmeside, så hjemmesiden afspejler dit brand men er mere letvægt. Hvilket også er godt for din SEO placering. Win-win!
Bliv klogere på emnet
Lav lidt om i dine vaner og rutiner for et mere klimavenligt internet.