Bæredygtigt webdesign 11 min.

Klimakrisen gør det nødvendigt, at vi tænker anderledes med vores energiforbrug. Det skal vi også gøre i vores meget digitale dagligdag. Men hvad med webdesign og måden vi fører digitale kampagner på … Tør vi begynde at designe mere bæredygtigt, visuelt indhold? I denne her blog får du nogle gode råd til, hvordan din skærm og dit farve- og fontvalg kan blive klimavenligt!

“A sustainably designed and built website isn’t just better for the planet and your business’s carbon footprint; it should also mean a faster-loading, more accessible experience for the user.”

Kilde: Your Website Is Killing The Planet

Lad mig bare være helt ærlig, folkens! Der findes ikke noget nemmere for en grafisk designer end at skabe en visuel stemning, der lover noget, som måske ikke heeelt stemmer. Det er det, russerne kalder vranyo – noget, der ikke helt er løgn, men heller ikke helt sandt … they should know 😉 . For så kan man jo bedre bedrage sig selv til at tro på at det nok er lidt ok, både som afsender og som modtager af løgnen. Som modtager, som forbruger, ved du godt det ikke er helt rigtigt, at produktet er billigt. Men indpakningen er designet så den ser billig ud, med kraftige gule og røde farver! Så kan det jo ikke være så dyrt igen, vel?

Eller hvis pakken med morgenmadsproduktet er designet så det ser sundt ud. Du ved, med billeder af fuldkorn, brunlige farver og grønne marker på æsken. Ja, der er da masser af rosiner og sukker i, men det føles bare mere rigtigt at lægge den i kurven. Det er naturligvis ikke ulovligt for en virksomhed at designe på denne måde, så længe de ikke uden at få lov sætter statsautoriserede logoer på for økologi og anden verificering (dog er Nøglehulsmærket frit at bruge i Skandinavien for fødevarer, hvis man overholder nogle regler). Jeg har endda set nogle producenter bruge deres egne kreative logoer, der ligner en slags økomærker uden at være det. Det kommer påfaldende tæt på det, man kalder greenwashing – når et firma fører sig frem som for eksempel bæredygtigt og generelt klimavenligt uden at være det. I hvert fald ikke så meget, som de burde … Vranyo. Hvilke brands jeg taler om her? Det får du mig ikke til at sige, jeg har ikke råd til en advokat 😉 Vi kan bare håbe deres mås må klø og deres arme blive for korte.

Så er der den anden vinkel hvor det, du lægger i kurven, rent faktisk er både bæredygtigt fremstillet og har et grafisk design, der er i tråd med for eksempel økologi. Hvis du vil se lækkert grafisk design med et skarpt øje for bæredygtighed i sit visuelle udtryk, så læs endelig Kristian Bjørnards gode, lille blog om emnet (engelsk) med mange flotte eksempler på design.

Men grafisk, bæredygtigt design er allerbedst, når alle elementer går op i en højere enhed. Hvad nu hvis jeg fortalte dig, at der også findes gode råd til klimavenlig, energibesparende webdesign i sig selv? 
Er det vigtigt? Er alle de digitale billeder på skærmen ikke bare lys og data? Jo, og deri er problemet: al data skal indlæses og al lys på skærmen “blinker” forskelligt for at danne komplekse former og farver. Det koster energi. Det koster CO2, for med en øget datatørst kommer et øget strømforbrug.

Klimavenlige skærme

Skærme har selvfølgelig ikke noget at gøre direkte med webdesign, MEN hvis man også kan spare på energien her, er det jo også et stort plus!

OLED i stedet for LCD – hvis du investerer i en PC, der har OLED skærm, vil det være mere klimavenligt i længden. Uden at det skal blive superteknisk kan det siges kort og godt sådan her:

“I en OLED-skærm består hver enkelt pixel på skærmen af en gruppe af tre LED’er; en rød, en grøn og en blå, der tilsammen kan skabe alle farver inklusive sort, da de også kan være slukket. Det betyder, at man for hver enkelt pixel kan styre farven samt lysintensiteten. (…) På en LCD-skærm spiller det ingen rolle for strømforbruget, hvad der vises på skærmen. Her er der altid fuld blus på belysningen, da farverne jo reguleres ved at skygge lyset væk. Der er altid lys på hele skærmen uanset om billedet så er sort eller hvidt. Den eneste måde at sænke strømforbruget på at ved at skrue ned for lysstyrken. (…) OLED-skærmen regulerer lysstyrken på pixelniveau, vil energiforbruget variere alt efter hvor meget de enkelte dioder lyser. På en hel sort skærm er alle dioder slukkede, og den bruger ikke noget strøm. Er alle pixels derimod hvide, er der fuld blus på alle dioderne, og der bruges meget strøm. Derudover findes der alt derimellem. Resultatet er, at en OLED-skærms energiforbruger varierer i takt med det billede, der vises.”

Kilde: Martin Wolsing, onx.dk

På en OLED-skærm slukker en pixel når den skal være sort. Zero emission! Det kan derfor også siges, at hvis du sætter din almindelige LCD skærm til ‘dark mode’, så er den ikke altid mest miljøvenlig. Jo, hvis din smartphone har OLED, så er den god nok. OLED-skærme er i øvrigt oftest fremstillet af mere miljøvenlige materialer.Lige præcis når det kommer til smartphones, har OLED-skærmene vundet markant frem. I 2021 var den globale markedsandel af solgte telefoner med OLED 42%. En stigning i forhold til året før hvor det var 32%.

Det vil sandsynligvis ikke vare længe før det er halvdelen af alle telefoner hvor man altså kan spare energi ved at bruge dark mode.

Hvor meget energi kan dark mode spare?

Hvor meget energi du kan spare ved at bruge dark mode, er afhængig af hvilken lysstyrke-indstillinger man har på sin OLED-skærm, samt hvilken enhed man bruger. En undersøgelse fra Purdue University i 2021, hvor der blev testet på 4 forskellige Android smartphones, viste at på smartphones hvor lysstyrken var sat til 30-50%, kunne der spares 3-9% strøm ved brug af dark mode. Var lysstyrken derimod sat til 100% kunne der spares 40-47% strøm! 

Dark mode på hjemmesider

Udbredelsen af OLED-skærme taler helt sikkert også for at man som hjemmesideejer, bør overveje at have en dark mode-version. Enten kan man lade den klimabevidste bruger selv vælge dark mode til, eller man kan gå forrest og lade hjemmesiden være “dark mode first”, så det bliver udgangspunktet når man lander på siden.

Når det kommer til hjemmesider, er det selvfølgelig værd at huske på at over halvdelen af hjemmesidetrafik i dag foregår via en smartphone:

Og af de næsten 60%, er det altså over 40% der ser siden på en OLED-skærm.

Om man vil bruge dark mode på sin hjemmeside, vil selvfølgelig også komme an på hvilke farver der indgår i virksomhedens brand design. Men i virkeligheden bør den klimabevidste virksomhed indtænke dark mode variationer i deres brand/design manual.

Video- og billedekomprimering

Hvis du implementerer video og GIF’s på din hjemmeside, så findes der programmer, der kan komprimere billedernes data.. Én af de programmer hedder handBrake (det er ikke en stavefejl). Det er gratis og kan komprimere dine videofiler uden tab af kvalitet. Dermed er der mindre forbrug af energi, når modtagerens browser loader det. Læs mere om det her. Og så vil det jo også nedsætte loading-hastigheden for siden. Win-win!

Billeder til digital brug kan du let komprimere ved hjælp af utallige onlinetjenester, enten ved at komprimere dem og bibeholde format uden tab af synlig kvalitet. Det kan især gøres effektivt ved at konvertere dem til et såkaldt WebP format. Prøv det her (via convertio.co). Desuden kan du arbejde med at udtone baggrunde i dit billede (blur effect) eller anvende sort-hvid fotos, hvor det er relevant. Du kan også fritlægge dine billeder ret enkelt med AI-teknologi, se bare hvordan her. På den måde kan du både skabe en smart effekt og fjererne flere tunge data fra en billedfil.
I øvrigt: Hvis du ikke har et smart program som Photoshop, kan du bruge en gratis online foto-editor som for eksempel pixlr.

Klimavenlige farver i dit digitale design

Vidste du, at de forskellige farver på en skærm, og altså derfor også i dit webdesign, bruger forskellige mængder af energi?

Løsningen er enkel. Her er nogle af de farver, der anses for meget klimavenlige i form af den energibesparelse det medfører at anvende dem i webdesign:

Som den kvikke nok har regnet ud, er farven blå en klimasynder, der kræver meget energi. Så må man afgøre med sig selv, om det her er en farvepalette, man kan bruge og som kan variereres nok til brug for de kunder man har. Det skal også siges at andre variationer af grå og mørke farver kan bruges – med god samvittighed. Det har Tom Greenwood skrevet en rigtig god blog om med mange visuelle eksempler på hjemmesider, der er bæredygtige ved at bruge klimavenlige farver, der ikke bruger meget energi.

Variable fonts er bæredygtige fonte!

I min egen artikel om variable fonts beskriver jeg detaljeret hvordan variable fonts virker inden for grafisk design med sit æstetiske, typografisk udtryk. Denne teknologi gør at fonte kan varieres med mange små variabler – uden at hele skriftfamilen skal bestå af enkelte snit. Det er ret genialt!

Variable fonts har også den fordel, at de datamæssigt ikke fylder så meget. Med brug af Googles variable webfonte, der kan anvendes i webkoden, kan man ofte enkelt implementere det. De kaldes Web Open Font Format, såkladte WOFF-fonte.

Gode råd til webdesign – den enkle liste

Ud over det rent grafiske er det også en bæredygtig strategi i at forbedre og forenkle brugeroplevelsen (kaldet UX i fagsproget). Denne liste giver dig 

Det består helt konkret i at du bør …

• ● minimere ‘klik’ – altså hvor mange gange man skal trykke for at komme til en destination på et website.
• ● designe mobile first – det er ikke længere en odiøs og særlig tilgang, men der er altså stadig sider derude i cyberspace, der trænger gevaldigt!
• ● bruge de rette filformater til forskellige typer billeder. Logoer bør være SVG-filer og klassiske JPEG-filer bør være i WebP-format til web.
• ● anvende få fonte eller variable fonts 
• ● bruge en grøn webhost – her er nogle af dem
• ● hjælpe din målgruppe via god SEO – god søgemaskineoptimering behøver ikke være hokus-pokus! Det får din målgruppe til at lande på den af dine sider, der giver dem det, de behøver. Skriv gode, enkle webtekster, der hjælper Google med at hjælpe din målgruppe.

Der er en del at tage hensyn til, hvis man skal ændre vaner. Heldigvis behøver du ikke selv være ekspert på alle områder. Find folk der kan hjælpe dig og invester i den rette, professionelle hjælp

Tænk på det her på samme måde som du kan begynde at tage dit eget net med ud og handle i stedet for at købe en plastikpose – og lige som du kan spare energi derhjemme ved at huske at slukke lyset efter dig. 

Det er godt for klimaet, for planeten og for os alle at få de gode vaner.
Du kan jo starte med prøve at teste din egen hjemmeside her på ecograder.com – og så begynde at forbedre den 🙂

Gode links til emnet om bæredygtigt, digitalt design:

• ● Et godt eksempel på mange klimavenlige webløsninger, inklusiv webhosting, kan du læse om på www.sustainableweb.dk 

• ● En god blog om WebP-formatet (på dansk)
  
• ● Business Insider har en fremragende artikel om hvordan det at lave en større marketingkampagne i den grad koster på CO2 regnskabet!
  
• ● Her er en god, kort dansk podcast fra KEA om bæredygtigt webdesign