Bæredygtigt webdesign / bæredygtig webside

20. nov. 2022
13. mar. 2024

Klimakrisen gør at der er kommet mere fokus på miljø og forbrug. I den digitale hverdag kan der også gøre en forskel på flere forskellige måder.

I dette blogindlæg kigger vi på hvad et bæredygtigt webdesign og en bæredygtig webside egentlig er, samt hvad du og dit webbureau kan gøre for at sikre en klimavenlig webside / miljøvenligt webdesign.

Hvad er et bæredygtigt design / en bæredygtig webside?

Man taler både om bæredygtigt webdesign, som stiller nogle krav til den måde man designer en side, samt om bæredygtige websider eller bæredygtige hjemmesider, hvor der er lidt flere parametre med, som f.eks. webhost, kode, content og andre ting vi ser nærmere på i dette blogindlæg.

På samme måde, som man kan hjælpe miljøet i mange andre brancher, så er der også gode muligheder for at hjælpe miljøet ved at tænke bæredygtighed ind i designet og websiden når du skal have lavet en webside. Hvad enten det er en lille webside, en webshop eller et fuldt system som f.eks. billetsystem eller booking, så kan man gøre noget.

Som vi ser på i dette blogindlæg kan man se på alt fra hvilke systemer man vælger, til farver, søgeoptimering, billedformater, videoformater og meget mere. Der er med andre ord god mulighed for at både gøre noget selv,og sammen med jeres designbureau/webbureau/SaaS udbyder 

Hvordan får I en klimavenlig webside?

Vi ser her på nogle af de mange ting man kan gøre, hvor nogle har stor betydning, mens andre har mindre betydning. Nogle er også nemt implementeret, mens andre kan kræve større ændringer if.eks. designlinjen.

Webside størrelse

Størrelsen på websiden kan have betydning, både fordi en stor webside kan fylde mere og dermed kræver mere serverplads, men især også fordi at load kan blive større.

Ofte er det dog ikke den fysiske størrelse som f.eks. antal sider eller antal produkter, da det i moderne systemer ligger godt optimeret i en database og ikke fylder meget, og da det først bliver et problem når det loades af mange brugere (der ser siden). Det handler mere om den måde systemerne er bygget på (hvor meget loades og hvor tungt er det), samt om ens indhold i form af f.eks. billeder og videoer, som vi kommer nærmere ind på længere nede.

Grunden til loadetider har betydning er at selvom det ikke drejer sig om mange kb eller mb, så loades de hver eneste gang en bruger besøger siden, og det kræver derfor rigtig mange ressourcer for servere og dataafsendelse mv., som dermed kræver strøm 

Vi ser i de næste par punkter på hvad man så rent faktisk kan gøre.

Undgå nogle open source løsninger, samt for mange plugins

Flere open source løsninger loader ofte mere end nødvendigt herunder f.eks. Wordpress og Magento. Det gælder især når der tilføjes plugins hvor der ofte ikke er lagt stor vægt på loadetider eller optimering. Det betyder at de systemer ofte er tunge, og dermed kræver flere ressoucer af serverne, og derfor i sidste ende er mindre miljøbevidste. Samtidige påvirker hastigheden også brugeroplevelsen.
Det illustreres meget godt ved en simpel Google søgning på Wordpress slow, hvor der kommer intet mindre en 77.700.000 resultater
Læs også om hvilke andre grunde der kan være til at vælge alternativer til f.eks. Wordpress.

Det kan derfor være en god ide, at gå efter et optimeret SaaS (Software as a Service) system, hvor hastigheden er optimeret og systemet løbende opdateres og følger med tiden, så man sikre den altid loader hurtigt.

God søgeoptimering / mindre load

Nogle tænker måske hvad god søgeoptimering har at gøre med mindre load, men det skyldes bl.a. at Google i den tekniske del af søgeoptmeringen har tilføjet krav om hurtig loadetid, som gør hastigheder på websider til et vigtigt parameter i søgeoptimering.

Det er bl.a. noget Google har gjort for at skabe mindre load på deres servere, men også for at hjælpe miljøet og sikre færre servere og mindre data der skal flyttes - og dermed mindre strømforbrug.

Denne del er hele tiden noget der optimeres og forbedres, og det er derfor vigtigt du vælger et system hvor der er:

  • Opdateringer indenfor teknisk SEO
  • Løbende optimering og opdateringer af systemet og plugins

SEO

Mobile first

I dag sker størstedelen af alle visninger på en smartphone. Derfor er mobile first og responsivt webdesign også super vigtige parametre.
Dels sikrer det, at man starter med at designe til smartphone for at få en god brugeroplevelse, og når der  programmeres så opsættes websiden også til smartphones først. Det betyder at alt det der skal loades ekstra på f.eks. tablet og computer ikke loades når man er på en smartphone. Det gør det både hurtigere og mere brugervenligt, men samtidige så sikrer det også en mere bæredygtig webside. Da langt størstedelen af brugerne kommer på smartphones, så sparer man load af rigtig meget data, og dermed også strøm.

Farvevalg

Selvom det kan lyde underligt for nogle, så har farver også betydning når man taler klima - f.eks. bruger en blå farve mere energi end en rød og grøn farve. Det handler i virkeligheden om hvor meget lys der skal til for at gengive en given farve.
Der er dog mange andre ting der også spiller ind, og nogle skærme er også langt mere lysstærke end andre, så det betyder teoretisk at en grøn farve på en meget lysstærk skærm godt kan bruge mindre strøm end en blå på en mindre lysstærk skærm. En stor del af optimeringen her ligger derfor også hos producenterne er skærmene, og de er også blevet langt bedre med årene.
En ulempe ved at optimere her er, at så vil farvepaletter  blive begrænset kraftigt, og nogle firmaer vil være nødt til at udvikle helt nye visuelle identiteter. Det vil også betyder flere ensartede sider.

Men laver man en ny klimavenlig webside og en ny visuel identitet, så kan man overveje mere klimavenlige farver som f.eks. grøn eller rød, samt benytte grå og mørke farver mere fremfor de lyse.

Dark mode

En anden måde hvor man ikke behøver at lave klimavenlige farver, men hvor man alligevel kan sikre at siden bliver mere klimavenlig er, at give mulighed for dark mode.

Hvis brugeren har mulighed for at sætte siden i dark mode, ligesom man kender fra eksempelvis apps på smartphones, så vil man på den måde kunne bibeholde den originale version. Det vil give de brugerne mulighed for at vælge en dark mode version hvis de ønsker det. Man skal igen være opmærksom på at genkendeligheden kan forsvinde, da websider imodsætning til mange apps jo også har salg for øje, og kæmper om pladserne på Google - hvilket også gør brandet vigtigt. Websider er imodsætning til apps jo ikke noget brugerne bevidst har valgt at gemme, og man kan derfor have ganske få sekunder til at overbevise en bruger om at vælge ens webside fremfor en anden.
Så man skal overveje om det er noget man ønsker - men muligheden kunne være der.

Variable eller få fonts / skrifttyper 

Fonts eller skrifttyper kan også medvirke til at sikre en mere klimavenlig webside.

Det kan ske på flere måde

  • Begræns mængden af fonts / skrifttyper
    • Vælg 1-3 fonts til hele siden - giver også bedre design og brugervenlighed
  • Begræns variationen af skrifttyper (bold, bolder, normal, thin mv.)
    • Hvis man ikke bruger variable skrifttyper
  • Brug variable skrifttyper
    • Så skal man ikke hente hver enkelt variation af skrifttypen - især smart hvis man vil bruge mange variationer
  • Brug kendte skrifttyper
    • Ved at bruge skrifttyper som er kendte og meget brugt, så vil de ofte være preloadet hos brugeren fra f.eks. Google fonts

Det handler igen i bund og grund om at hente så lidt data ud på siden som muligt, da denne data jo bliver vist til samtlige brugere som besøger ens webside.

Ikoner

Når man bruger ikoner på en webside, så er det også smart at bruge ikon-biblioteker som f.eks. Font Awesome.
Der findes stadig mange websider som bruger billedikoner, og de fylder langt mere en de ikon-biblioteker som man kan benytte. Det betyder igen større load, selvom der er langt færre ikoner på siden end f.eks. Font Awesome tilbyder.
Ved at bruge Font Awesome fra CDN så kan de også være loadet i cache fra andre sider.

Webside struktur / minimer visninger

I de ovenstående punkter har vi kigget meget på indhold på de enkelte sider, men noget som også er super vigtigt er strukturen.
Det gælder om at få lavet en struktur hvor man minimere visninger og klik der skal foretages for at komme til et givent sted.

Hvis man f.eks. skal vise 4 sider for at komme til den underside man skal til, enten fordi man klikker videre fra siderne, eller pga. rod i strukturen, så vil der loades meget mere end der er nødvendigt.

Arbejd derfor på en simpel struktur i menuen (typisk kun et subniveau), og mht. det flow I ønsker brugeren gennemgår, og sørg for der ikke er en masse popups og lign. 
Det hjælper både klimaet, og gør det nemmere og mere brugervenligt for brugeren.

Site map

Billedformat

Længe har jpg og png været de førende formater på websider, men nu er .webp kommet. Webp har den store fordel at det fylder langt mindre uden at gå på kompromis med kvaliteten. Samtidige er det et fleksibelt format som har både de fordele som jpg og png traditionelt hver især har haft. Problemet med .webp har været at det ikke har været understøttet af f.eks. Safari hvis man havde MacOS 11 Big sour eller mindre. Man har kunne lave et fallback til et jpg billede, men så skal man have 2 versioner af det samme billede på serveren. MacOS 11 Big sour er dog efterhånden ved at være en gammel version, og man kan derfor d.d. hvor artiklen er skrevet godt begynde at gøre brug af .webp billeder langt de fleste steder.

Læs mere om .webp filer

Online værktøj til at konverterer til .webp (ikke testet - eget ansvar)

Billedekomprimering

En anden ting der også er vigtig, og som Google også vægter i søgeoptimering er om ens billeder er komprimeret. Systemerne komprimere altid billeder, men sjældent så meget som du selv er i stand til.

Hvis du derfor gerne vil have en hurtig og ikke mindst bæredygtig side, så kan det være en fordel selv at komprimere dine billeder inden de lægges op

Der er 2 parametre i billedekomprimering, og hvad man kan afhænger af formatet

  • Størrelsen
  • Kvaliteten

Størrelsen er ved bitmap/raster billeder (jpg, png, .webp mv.) vigtig, da den har betydning for den fysiske størrelse på billedfilen. Tilpas den derfor til der hvor den skal bruges.
Ved vektor formater som f.eks. svg er det matematisk beregnet grafik, og størrelsen kan derfor tilpasse sig.

Kvaliteten angiver hvor detaljeret billedet er - jo dårligere kvalitet - jo færre detaljer og jo mere grynet. Det afhænger igen meget af formatet hvad der kan sættes.

Billeddetaljer

En anden ting du med fordel kan gøre er, at lave lidt billedbehandling inden billedet lægges op. Det gælder især hvis du har et meget detaljeret billede.
Jo flere detaljer et billede har, jo mere fylder billedet. Derfor kan det ofte betale sig at sløre billedet på steder hvor det ingen betydning har. Det kan både give nogle flotte effekter, og samtidige får du også mere klimavenlige billeder.

Videoformat

Ligesom med billeder er der også kommet nye videoformater som er bedre end f.eks. mp4 til web. Det gælder bl.a. webm formatet som komprimere video mere uden at tabe kvaliteten.

Læs mere om webm

Videokomprimering

En stor synder på nettet - måske endda den største klimasynder - er videoer. Videoer fylder meget, og ofte lægges der alt for store videoer op - især baggrundsvideoer på siderne.

Det er super vigtigt at videoer komprimeres og tilpasset inden de lægges online, og at man holder dem korte (især baggrundsvideoer hvor brugere ikke ser så meget).

Videoer kan komprimeres på mange forskellige måder

Især ved baggrundsvideoer kan man godt komprimere ekstra kraftigt, da de som regel ikke er detaljerne der er i fokus her.

Benytter man videoer der forklarer noget på siden, så kan man med fordel benytte f.eks. Youtube. Dels så sørge de for at komprimere vidoen, og dels så kan du promovere en kanal med videoer der også.

Videoformater

Ligesom med billeder, så er det også vigtigt at vælge et effektivt videoformat. Der kan være stor forskel på de forskellige formater.

Et af de mest brugte formater er MP4 som er et godt og effektivt format, men også her er der kommet et mere effektivt format til web som er understøttet af de forskellige nyere browsere. Det er formatet webm der ligesom .webp til billeder komprimere godt og samtidige bevarer kvaliteten flot.

Marketing og annonceoptimering

En ting der ikke direkte omhandler selve jeres webside er jeres markedsføring og jeres annoncering.

Vi er klar over at det er super vigtigt for jer, men der er måder at være klimabevidste her også, som ovenikøbet er et win/win scenarie, da det også kan sikre jer mere effektiv markedsføring.

De ting I skal være opmærksomme på (de fleste gør det forhåbentlig i forvejen) er:

  • Det handler ikke om mange besøgende - det handler om de rigtige besøgende
    • Konverteringer er vigtigere end hits
  • Fjern søgeord i annoncer som ikke sælger - hellere færre og højere konvertering
  • Fjern annoncer som ikke konverterer ordenligt, og prøv noget andet
  • Lav blogindlæg der matcher jeres kunders behov

Det gælder med andre ord om at bruge færre penge på visninger der ikke giver salg. Det gavner samtidige miljøet da det er spild af serverkrafter og strøm.

Graphs

Hjælp miljøet

Bæredygtigt webdesign - eller miljøvenligt webdesign, som det også kaldes - er en vigtig trend i teknologibranchen, der som du kan læse i ovenstående fokuserer på at reducere den negative påvirkning af internettet på miljøet. Det gøres ved at implementere grønne teknologier og praksisser i webdesign-processen, såsom at optimere indhold så det fylder mindst muligt, bruge energi-effektive servere, designe miljøvenligt, vælge korrekte formater og lave fornuftige kampagner.

Bæredytige websider og miljøvenligt webdesign hjælper ikke kun med at beskytte miljøet, men det kan også forbedre din hjemmesides søgeoptimering. Søgemaskiner belønner ofte hjemmesider, der er miljøvenlige og har en positiv indvirkning på samfundet, ved at give dem en højere rangering i søgeresultaterne. Det skyldes flere ting men især den del der reducerer ressoursers størrelse (video, billeder mv.) har stor positiv indvirkning på SEO.

Så hvis du vil gøre en positiv forskel for miljøet og samtidig øge din hjemmesides synlighed online, så overvej at implementere miljøvenligt/bæredygtigt webdesign i din næste projekt.

Klimavenligt billetsystem

Hvis du søger et klimavenligt billetsystem, så kan Flex4Business ApS også hjælpe med det.

Vi har skrevet et blogindlæg om klimavenlige billetsystemer, og her kan du bl.a. se hvordan vi sikre at vores SaaS billetsystem er mere klimavenlige end mange andre løsninger I kan vælge

Skal I have en bæredygtig side?

Flex4Business ApS har stor erfaring inden for bæredygtige webdesigns og bæredygtige websider, og vi kan hjælpe jer med dette både i design processen, med det tekniske og med indholdet på websiden.
Vi gør også selv flere ting på vores egen side for at sikre den er bæredygtig.

Flex4Business ApS - bæredygtig webside

Hos Flex4Business har vi valgt at optimere på bæredygtigheden på websiden, og det vil vi blive ved med løbende.
Vi har taget et aktivt valgt om ikke at optimere alle steder, og vil herunder gennemgå hvad vi gør og ikke gør. Vi kan dog sagtens hjælpe hvis I ønsker at gå all in.

Flex4b.com

  • Flex4b.com benytter Flex4B systemet som er et optimeret system der ikke loader en masse der ikke bruges
  • Søgeoptimering: Det er højt prioriteret og vi ligger flot i loadetid, og dermed databelastning
  • Mobile First: Alle websider laves med Flex4B systemet er Mobile First inkl. vores egen
  • Farvevalg og dark mode: Vi har valgt ikke at have dark mode da få stadig bruger det på websider, og da vi bliver mindre genkendelige. Vi benytter dog grøn som ikke er en af de værste, og i administrationen også mørke kontrastfarver (mørkegrå)
  • Fonts: Vi benytter kun en font på siden, og kun i få variationer.
  • Ikoner: Vi benytter Font awesome til ikoner
  • Struktur: Vi har en simpel struktur med et klik til de fleste og vigtigste ting
  • Optimering af billeder: Vores billeder optimeres til at fylde så lidt som muligt for at sikre lav loadetid
  • Billedformat: Vi er begyndt at bruge .webp, men har ikke gjort det generelt, da det ikke understøttes af Safari med styresystemer tidligere end MacOS 11 Big Sour
  • Videooptimering: Vores videoer er optimeret til web, og dermed nedsat kraftigt i størrelse
  • Marketing og annoncer: Vi tilpasser annoncer så specifikt som muligt for at undgå brugere som ikke har interesse men alligevel klikker og loader siden

Flex4Business ApS hjælper selvfølgelig også miljøet på mange andre måder - ikke mindst på vores utrolig fleksible arbejdsmodel hvor folk kan arbejde hjemmefra størstedelen af tiden.

Skal du bruge en bæredygtigt design / bæredygtig webside, webshop eller billetsystem?

Vil du høre mere om muligheden for at få et bæredygtigt design / en bæredygtig webside? 
Skal du have en klimavenlig webside?

Vi kan hjælpe jer hele vejen, uansom om I blot ønsker forbedringer eller vil gå all-in.

Flex4B systemet er optimeret og klar til at du kan skabe en bæredygtig hjemmeside

Mere inspiration til et bæredygtigt webdesign

Vi har herunder et par links og referencer hvis du gerne vil læse mere om bæredygtigt webdesign, bæredygtige websider eller bæredygtigt design generelt.

 

bæredygtigt webdesignbæredygtig websidemiljøvenligt webdesignbæredygtighedklimavenlig webside
Bæredygtigt webdesign / bæredygtig webside