Bæredygtigt webdesign: Sådan skaber du bæredygtige websteder

Sonja Hoffmann Senest opdateret den 21.
7 Min.
Bæredygtigt webdesign
Senest opdateret den 21.

Hvad betyder "Sustainable Web Design"? Hvordan kan du vide, hvor økologisk dit websted er? Hvordan kan du gøre din hjemmeside (e) mere bæredygtig, og hvilke fordele giver dette til dine kunder? Jeg har samlet svarene og nogle vigtige værktøjer i denne artikel.

Fakta om internettet power-eater

Hvad vores digitale forbrug koster med hensyn til energi

Højt Hjemmesidecarbon internettet bruger 416,2 terawatt timer (TWh) om året. Det er omtrent lige så meget som Tyskland alene forbruger. Hvis internettet var et land, ville det allerede have det sjettestørste elforbrug i verden.

Men hvordan kan det egentlig være? Har vi ikke gået ekstra digitalt for at beskytte vores miljø? Virkeligheden her er noget anderledes: Desværre betyder digital ikke automatisk "grøn". Fra serverfarme til datacentre til det faktiske slutpunkt bruger alt energi til at fungere.

En gennemsnitlig hjemmeside anslås at producere 1,76 gram CO2. Med 10.000 besøgende om måneden er du 211 kg CO2 om året – for en enkelt side! 

Har du nogensinde tænkt over, hvor mange ressourcer der er behov for din hjemmeside? Garanteret mere end du tror! Hver anmodning din hjemmeside sender modtages, behandles, returneres og om nødvendigt opbevares et eller andet sted. Sådan kommer meget sammen.

Vores hjemmesider skal være grønnere – men hvordan?

1. Hosting

I mellemtiden er mange hosting-udbydere deltager og er afhængige af vedvarende energi. Fordi det er klart: webhosting forbruger energi og sikrer en betydelig udledning af CO2-emissioner. På RAIDBOXES bæredygtighed og klimabeskyttelse er ikke en tom sætning, men en integreret del af virksomhedskulturen.

Grøn Hosting til WordPress På RAIDBOXES

Når du kører en hjemmeside eller online butik, du bruger en masse ressourcer. RAIDBOXES kontrol, på den anden side, med klima-positiv hosting for WordPress Og WooCommerce.

Uanset om din hjemmeside er "grøn", kan du nemt bruge dette værktøj af The Green Web Foundation. Hvis resultatet er negativt, kan du skifte hostingudbydere. Du kan foretage en sammenligning Her Se. 

Den grønne Web Foundation
RAIDBOXES er afhængig af bæredygtig, certificeret grøn elektricitet fra vandkraft.

2. Design

Det rigtige design kan forhindre unødvendig energi i at blive brugt, for eksempel, når dit websted ikke henter unødvendigt og uønsket indhold i første omgang. Hvordan kan du forene design og bæredygtighed og spare ressourcer?

Mobile First

På Mobile First du optimerer dit indhold fra begyndelsen på brugen af smartphones. Optimerede sider, behøver ikke at indlæse overdimensionerede medier på mobile enheder. Disse programmeres, så skrivebordstypografier ikke behøver at blive overskrevet, men er designet direkte til den mindste enhed.

Brugeroplevelse

Jeg har informeret dig om fordelene ved en velplanlagt brugervenlighed allerede rapporteret. En velfungerende brugeroplevelse hjælper dig og dine kunder med at gøre dit website mere bæredygtigt. Du minimimit utilsigtede omveje af dine brugere. Ideelt set er det kun de sider, som brugeren rent faktisk ønsker at besøge, der indlæses. Hvis du reducerer uønskede klik, sendes færre dataanmodninger og bruger derfor mindre energi.

Sideomkreds

Også her kan du arbejde på din bæredygtighed, når du planlægger hjemmesiden. Generelt gælder det, at jo færre sider, der skal indlæses, jo færre sendes dataanmodninger. Ud over at gøre din side nemmere at navigere, giver det også mening ud fra et økologisk synspunkt at opsummere indholdet og reducere antallet af sider.

Vi bør bruge medier som billeder, animationer og videoer mere bevidst og målrettet. Har alle de billeder, videoer, ikoner og animationer, du har planlagt for dit websted virkelig tilføje værdi? Eller kan du undvære nogle af dem?

3. Udvikling

Siderhastighed

Pagespeed har været en del af den lille 1×1 af webdesign i nogen tid. Hvorfor er det godt for miljøbeskyttelsen at være opmærksom på en god præstation? En side, der indlæses hurtigere, er konsekvensen af små data at indlæse!

Hurtigere hjemmesider - bedre for klimaet

Dette gør det så meget desto vigtigere, at du optimerer din hjemmeside og din butik godt. Dette er dit personlige bidrag til klimabeskyttelse. Du kan læse mere om i vores e-bog Page Speed & Performance.

Hvorfor din sidehastighed er langsom kan være af flere grunde. Ud over analyse giver mange værktøjer dig også løsninger til mere ydeevne.

For denne artikel har jeg sat min egen side gennem sine skridt. Som du vil se fra min selvtest, kan en analyse endda være helt det modsatte - afhængigt af hvilken ansøgning der testes. Så du bør tænke over, hvilke mål du vil opnå med testene.

Google fyrtårn
Dette resultat giver mig det populære værktøj PageSpeed Insights .
gllighthouse
Google Lighthouse tester også min hjemmeside for tilgængelighed, blandt andre ting.

Her som en sammenligning Chrome Developer Tool Google Fyrtårn Og Google PageSpeed Insights. Begge værktøjer er nyttige referencepunkter for optimering på siden.

økograder
Ecograder giver gode tilgange til on-side optimering.

Økograder blev specifikt oprettet for at teste bæredygtigheden af hjemmesider. Jeg personligt finde Ecograder den mest brugervenlige. Oplysningerne præsenteres på en kortfattet og forståelig måde, tips til at forbedre sidehastigheden er nyttige.

Selv med Website Carbon Calculator er primært testet for bæredygtighed. Jeg ser positivt på den billedlige præsentation af resultatet. Sammenligningerne med mindre abstrakte måleenheder gør det lettere at blive noget mere bevidste om omfanget af hans arbejde.

Selv om jeg generelt finde den service af Website Carbon informativ, jeg mangler individuelt skræddersyede detaljer, som jeg kender det fra Google-værktøjer samt Ecograder. Derudover finder jeg sammenligningen med andre testede hjemmesider som et mål for professionelle projekter og argumenter utilstrækkelig.

websidetest
Den populære webside test værktøj går i stor dybde.

Især for udviklere, Test af webside et fremragende værktøj, da det går i en masse detaljer. Du kan teste her fra forskellige forudindstillinger. Fra "Simple Testing" til "Advanced Settings", som giver dig mulighed for at udelukke forskellige komponenter på dit websted eller tilføje uddrag via kode, og samtidig at levere en Google Lighthouse Rapport til sammenligning test af to hjemmesider, "alt" er muligt her først. Resultaterne er også opdelt i den mindste detalje teknisk. Denne hjemmeside bruges derfor til avanceret test, mens Google og Co. er mere generelle i deres analyse.

Billeder og andre medier

Jeg har allerede nævnt, hvordan man genovervejer det indhold, der tilbydes. Nu handler det om at integrere billederne optimalt. 

Lille bitte fungerer vidunderligt for at komprimere billeder - og for det meste uden nogen mærkbar tab af kvalitet. Du kan opnå det samme resultat med Photoshop og indstillingen "Eksporter til web". Hvis du allerede har konverteret dine billeder til et CMS, f.eks. WordPress , kan efterfølgende forbindes med en Plugin , såsom Smush, optimerer stadig opløsningen.

Hvis du har mange billeder eller ikoner, kan du beskæftige sig med CSS sprites. De arbejder på samme måde at sprites i computerspil udvikling. Her er billeder integreret ved hjælp af en sprite ark. CsS bestemmer derefter, hvilke koordinater der er under hvilket billede. Du kan finde mere om dette emne Her.

Sprite-ark er flere billeder/ikoner, der flettes ind i en enkelt fil. Ofte designere gruppere deres billeder tematisk. Baseret på de tilsvarende x- og y-koordinater er arkene opdelt og integreret i overensstemmelse hermed. Dette indlæser et enkelt dokument, der afspiller forskellige visuelle komponenter.

Lazy Load er en anden variant for optimal indlæsning af billeder. Her indlæses billeder, når den besøgende har brug for dem. For WordPress der er nu utallige (gratis og betalt) Plugins .

WordPress

Selvfølgelig spørger vi også os selv, hvornår økologiske tilgange af virksomheder er autentiske: Er der et bæredygtigt internet overhovedet? Hvordan "grøn" kan WordPress Faktisk? I artiklen WordPress og bæredygtighed du vil finde en up-to-date status for diskussion i den tysktalende WP samfund.

Bæredygtig WordPress : Slutte sig til os

RAIDBOXES lige fra begyndelsen, er forpligtet til at Bæredygtig WordPress A. Se blandt andet vores tips om WordPress & Bæredygtighed samt at Grønne online butikker. Vil du selv tage mere ansvar? Læs derefter dit bidrag Grøn Hosting til WordPress Af.

Hvilket bidrag kan vi yde til et bæredygtigt og effektivt webdesign? Hvad er de vigtigste løftestænger i hverdagens design for at spare ressourcer? Fwe Plugins og en let Theme her er de bedste tips.

Gennemsnitlige WordPress Websites kommer til omkring 600 KB. At vælge den rigtige Themes og under hensyntagen til den tidligere forklarede tilgang, kan du spare 50 procent eller mere. Et lille udvalg af testede Themes finde dig Her.

Hvis dit websted allerede er på plads, og ændringen af en Themes er udelukket, kan du WordPress Forbedre ydeevnen med disse 10 justeringsskruer.

Sådan får du dine kunder til at deltage

 Faktisk bør følgende søgeord være nok til at overbevise dine kunder om bæredygtigt webdesign: 

  • Forbedret brugervenlighed og brugeroplevelse,
  • klare og letforstædende design, 
  • bedre SEO placeringer, 
  • kortere opladningstid og 
  • Mobiloptimerede sider. 

Hvis du stadig har brug for flere argumenter, tilbyder forskellige fonde også såkaldte badges, som du kan integrere på dine kunders sider.

Når du vælger en udbyder, der bruger bæredygtig, certificeret grøn elektricitet, kan dette badge medtages:

F.eks. HjemmesideCarbon et badge, som du kan integrere på dine sider for at vise, at dit indhold er bæredygtigt og økologisk.

Konklusion, mere ekstreme tilgange og læsestof

Under min forskning om dette emne, faldt jeg over utallige statistikker. At sende en e-mail har derfor samme indvirkning på vores miljø som brugen af en plastikpose. Bøger er derfor ofte mere miljøvenlige end e-bøger. Køb af musikalbum er mere skånsomt for vores ressourcer end at streame diesel. Listen er uendelig. Frem for alt ryster disse statistikker lidt vores tidligere generelle forståelse af, at digital også betyder "grøn".

Bortset fra det faktum, at vi som webdesignere og udviklere naturligvis spiller en stor rolle i, hvordan internettet udvikler sig i fremtiden, kan vi også starte med os selv og bruge internettet lidt mere bevidst.

Find ud af, hvilke af dine apps der er grønne, og hvilke der skal renses hurtigst muligt: Med værktøjet Klik PåSkrens fra Greenpeace får du et interessant overblik over dine (foretrukne) applikationer, og hvor økologisk værdifulde de er.

Bidrag, der skaber mere bevidsthed om en grønnere fremtid: 

  • Sådan har Jack Lenox WordPress - Theme som kun er 7 KB lys. 
  • Brad Frost opfordrer os på sin blog DødToBullshit med en humoristisk twist at undvære netop dette. 
  • Heydon Pickering giver Kodning Tips hvordan man kan gøre din side slankere.

Vi må heller ikke glemme de positive virkninger, som internettet har på vores miljø. På den måde sparer brugen af videokonference os rejseruter. Især i de seneste måneder skal alle være blevet opmærksomme på, hvordan vi kan bruge internettet til at undgå at bruge transportmidler og dermed reducere CO2-emissionerne. 

Derudover er der kontorer, der kan reduceres takket være hjemmekontoret. Derudover giver netværket os mulighed for at slå os sammen med andre: For eksempel kan vi bruge carsharing platforme og bestille "homestays" såsom AirBnB, som er mere miljøvenlige end hoteller.

Udbredelsen af oplysninger om bæredygtighed og miljøbeskyttelse gøres også meget lettere af internettet. At tilbyde og erhverve miljøvenlige produkter (som vi ellers ville have mindre adgang til) er naturligvis en af de positive effekter af den digitale industri – for blot at nævne nogle få.

Hvis du ønsker at dykke dybere ned i emnet, vil jeg anbefale hjemmesiden sustainablewebdesign.org som udgangspunkt. I klare afsnit forklares de vigtigste punkter her, og der tilbydes mulige tekniske løsninger til gennemførelsen af disse.

Bæredygtigt webdesign: Hvilke spørgsmål har du til Sonja?

Brug kommentarfunktionen. Du ønsker at blive informeret om nye bidrag til webdesign og udvikling? Så følg os på KvidreFacebook eller via vores Nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Lignende artikler

Kommentarer til denne artikel

Skriv en kommentar

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er * Markeret