Bæredygtigt webdesign / bæredygtig webside

20. nov. 2022
10. dec. 2024

Hvad er et bæredygtigt websdesign?

Hvordan får man et bæredygtigt webdesign?

Hvis det er spørgsmål du stiller dig selv, så er du kommet til det rette sted

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.

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.

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, 2 eller maks 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 og langt flere kald til server, 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 der kommet flere formater heriblandt .webp. som pga. browserunderstøttelse er det der anbefales lige nu.
Vi beskriver herunder webp formatet nærmere, og efterfølgende laver vi en sammenligning af de nyere formater (gif, png, jpg er ikke med da det er "forældede formater" i denne sammenhæng) 

WebP

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 tidligere 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 nu godt 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)

Sammenligning af billedformater

Som det kan ses i nedenstående sammenligning så går teknologien lynhurtigt, og webp er på vej til at blive overhalet af endnu bedre formater, men grunden til webp anbefales kan læses herunder.

Hvis vi starter med HEIC og BPG, så er de ikke intersante for web da de kræver licens.
AVIF og JPEG XL er begge super interessante formater som bliver standard på et tidspunkt, men lige nu er problemet at de ikke er understøttet godt nok i browsere, og kunder dermed ikke vil kunne se dem. At bruge dem og lave fallback giver ikke meget mening da det kræver mere plads på servere til at have flere formater.

Vores bud er at man efter webp nok kommer til at se AVIF som det mest brugte format på web

Egenskab Webp AVIF JPEG XL HEIC BPG
Komprimeringsgrad Høj komprimeringseffektivitet, bedre end JPG og PNG Meget høj komprimeringseffektivitet, bedre end webp Høj komprimeringseffektivitet, sammenlignelig med webp Meget høj komprimeringseffektivitet, bedre end webp Meget høj komprimeringseffektivitet, bedre end webp
Kvalitet God billedkvalitet ved både lossy og lossless komprimering Meget høj billedkvalitet, understøtter HDR Høj billedkvalitet, understøtter HDR Meget høj billedkvalitet, understøtter HDR Meget høj billedkvalitet, understøtter dybe farver
Understøttelse i browsere Bredt understøttet af moderne browsere Begrænset men voksende understøttelse (Chrome, Firefox) Begrænset understøttelse, forventes at vokse Begrænset understøttelse, primært i Apple-økosystemet Meget begrænset understøttelse
Licens Åben og gratis licens Åben og gratis licens Åben og gratis licens Patenteret, kræver licens Patenteret, kræver licens
Understøtter transparent baggrund Ja Ja Ja Ja Ja
Gode egenskaber Understøtter både lossy og lossless komprimering Understøtter HDR, både lossy og lossless komprimering Understøtter HDR, bagudkompatibel med JPEG Understøtter HDR, 16-bit farver, animationer Understøtter dybe farver, alfa-kanaler, animationer
Begrænsninger Mindre effektiv end nyere formater som AVIF og JPEG XL Høj dekoderkompleksitet, begrænset understøttelse Begrænset understøttelse, komplekst at implementere Begrænset understøttelse på web, licenskrav Begrænset adoption, licenskrav

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, så er det også vigtigt at vælge et effektivt videoformat. Der kan være stor forskel på de forskellige formater.

Webm

Et af de mest brugte formater er MP4 som er et godt og effektivt format, men ligesom png/jpg for billeder så er det ved at være forældet. Der er også her kommet mere effektive formater til web, og især formatet webm er godt understøttet af de forskellige nyere browsere

Læs mere om webm

Sammenligning af videoformater

Der findes også andre formater og vi har herunder lavet et skema der sammenligner de forskellige formater
Som man kan se er nogle formater licenseret (H.265 HEVC og H.264) og derfor mindre interessante
VP9 er ligesom webm godt understøttet men har ikke bedre komprimeringseffektivitet, og webm er bedre understøttet på web
AV1 ser ligesom AVIF ud til at blive det næste format til video på web, men har ligesom AVIF problemet med understøttelse i browsere som gør at webm lige nu er at foretrække. Derudover er der høj decoderkompleksistet

Egenskab WebM AV1 H.265 (HEVC) H.264 VP9
Komprimeringsgrad God komprimeringseffektivitet Meget høj komprimeringseffektivitet, bedre end H.265 Meget høj komprimeringseffektivitet, bedre end H.264 God komprimeringseffektivitet, ældre standard God komprimeringseffektivitet, bedre end H.264
Kvalitet God billedkvalitet Meget høj billedkvalitet, understøtter HDR Meget høj billedkvalitet, understøtter HDR God billedkvalitet, udbredt standard Meget høj billedkvalitet
Understøttelse i browsere Bredt understøttet af moderne browsere Begrænset men voksende understøttelse (Chrome, Firefox) Begrænset understøttelse i browsere, bredt understøttet på hardware Universel understøttelse i browsere og enheder Bredt understøttet af moderne browsere
Licens Åben og gratis licens Åben og gratis licens Patenteret, kræver licens Patenteret, kræver licens Åben og gratis licens
Gode egenskaber Understøtter både lossy og lossless komprimering, åben standard Understøtter HDR, meget effektiv komprimering Understøtter HDR, meget effektiv komprimering Bred understøttelse, nem at dekode God komprimering og kvalitet, åben standard
Begrænsninger Mindre effektiv end nyere formater som AV1 og H.265 Høj dekoderkompleksitet, begrænset understøttelse Licenskrav, begrænset browserunderstøttelse Mindre effektiv komprimering end nyere standarder Mindre udbredt end H.264

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å.

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.

Flex4B systemet er bæredygtigt

Med Flex4B systemet får du et klimavenligt system som løbende opdateres og følger med tiden - det gælder både ift. klima, hastighed, SEO, brugervenlighed og funktionalitet

Nogle af de ting der gør Flex4B systemet bæredygtigt er

  • Konstant optimeret system
    • Imodsætning til f.eks. open source og 3. parts plugins, så sørger vi for at lave effektiv kode så servere ikke skal loade mere end der er behov for
  • Billed- og videoformater
    • Vi understøtter de nye formater som er understøttet af browserne, så vores kunder kan optimere både bæredygtighed, SEO og hastighed
  • Opdateret SEO
    • Du får gratis løbende optimeret teknisk SEO, hvilket samtidige er effektivt ift. bæredygtighed
  • MobileFirst
    • Vores designs er lavet mobileFirst hvilket betyder at smartphones loader mindst muligt. Da størstedelen af trafikken kommer derfra, så hjælper det miljøet, og gør samtidige oplevelsen hurtigere og bedre for brugeren
  • Font Awesome ikoner
    • Vi benytter Font Awesome ikon bibliotek så kunder kan bruge ikoner derfra fremfor at skulle bruge eksempelvis billeder der er både tungere og kræver langt flere serverkald. Det gør siden mere bæredygtig, og gør det hurtigere til gavn for både bruger og SEO'
  • Billedkomprimering
    • Vi komprimere automatisk billeder når du uploader dem, så de fylder mindre
  • Vi guider og hjælper gerne til
    • Farvevalg der er mere bæredygtige
    • Valg af bæredygtige skrifttyper
    • Menustruktur der kræver færre klik/sidevisninger og dermed mindre serverload
    • Anden hjælp til at gøre jeres system mere bæredygtigt
    • Vi hoster på grønne servere

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
  • Flex4B.com bruger ikke hero videoer eller videoer til blikfang, men bruger kun videoer hvor der reelt er brug for videoer
  • 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 bruger .webp formatet, og har skiftet gamle billeder ud til dette format gennem hele siden
  • Videooptimering: Vores videoer er optimeret til web, og dermed nedsat kraftigt i størrelse
  • Videovalg: Vi bruger kun videoer hvor det giver mening, og bruger dermed ikke videoer til f.eks. blikfang eller som hero video
  • 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 websidehvad er et bæredygtigt webdesign
Bæredygtigt webdesign / bæredygtig webside