Hållbar Webbdesign: Hur man skapar hållbara webbplatser

Sonja Hoffmann Uppdaterad den 21 oktober 2020
7 Min.
Hållbar Webbdesign
Senast uppdaterad den 21 oktober 2020

Vad exakt betyder "Hållbar webbdesign"? Hur vet du hur ekologisk din webbplats är? Hur kan du göra din webbplats (s) mer hållbar och vilka fördelar innebär detta för dina kunder? Jag har samlat svaren och några viktiga verktyg i den här artikeln.

Fakta om internet power-eater

Vad vår digitala konsumtion kostar i form av energi

Högt Webbplatscarbon internet förbrukar 416,2 terawattimmar (TWh) per år. Det är ungefär lika mycket som Tyskland ensamt förbrukar. Om Internet vore ett land skulle det redan ha sjätte största elförbrukningen i världen.

Men hur kan det egentligen vara så? Har vi inte blivit extra digitala för att skydda vår miljö? Verkligheten här är något annorlunda: Tyvärr betyder digitalt inte automatiskt "grönt". Allt från servergårdar till datacenter till den faktiska slutpunkten förbrukar energi till arbetet.

En genomsnittlig webbplats beräknas producera 1,76 gram CO2. Med 10 000 besökare per månad är du 211 kg CO2 per år – för en enda sida! 

Har du någonsin tänkt på hur många resurser som behövs för din webbplats? Garanterat mer än du tror! Varje begäran din webbplats skickar tas emot, behandlas, returneras och, om nödvändigt, lagras någonstans. Det är så mycket kommer tillsammans.

Våra webbplatser måste vara grönare – men hur?

1. Värd

Under tiden deltar många webbhotell och förlitar sig på förnybar energi. Eftersom det är tydligt: webbhotell förbrukar energi och säkerställer ett betydande utsläpp av koldioxidutsläpp. På RAIDBOXES hållbarhet och klimatskydd är inte en tom fras, utan en integrerad del av företagskulturen.

Grön Hosting för WordPress På RAIDBOXES

När du kör en webbplats eller en onlinebutik förbrukar du mycket resurser. RAIDBOXES kontroller, å andra sidan, med klimat-positiv hosting för WordPress Och WooCommerce.

Oavsett om din webbplats är "grön" kan du enkelt använda detta verktyg av The Green Web Foundation. Om resultatet är negativt, kanske du vill byta webbhotell. Du kan göra en jämförelse här Visa. 

Den gröna webben Foundation
RAIDBOXES förlitar sig på hållbar, certifierad grön el från vattenkraft.

2. Design

Rätt design kan förhindra att onödig energi används, till exempel när din webbplats inte laddar ner onödigt och oönskat innehåll i första hand. Hur kan man förena design och hållbarhet och hushålla med resurser?

Mobile First

På Mobile First du optimera ditt innehåll från början på användningen av smartphones. Optimerade sidor, behöver inte ladda överdimensionerade media på mobila enheter. Dessa är programmerade så att skrivbordsstilar inte behöver skrivas över, utan är utformade direkt för den minsta enheten.

Användarupplevelse

Jag har informerat er om fördelarna med en välplanerad användbarhet redan redovisat. En väl fungerande användarupplevelse hjälper dig och dina kunder att göra din webbplats mer hållbar. Du minimerar oavsiktliga omvägar av dina användare. Helst är bara de sidor som användaren faktiskt vill besöka laddas. Om du minskar oönskade klick skickas färre databegäranden och förbrukar därför mindre energi.

Sida omkrets

Även här kan du arbeta med din hållbarhet när du planerar webbplatsen. Generellt sett skickas ju färre sidor som behöver läsas in, ju färre dataförfrågningar. Bortsett från att göra din sida lättare att navigera, är det också vettigt ur ekologisk synvinkel att sammanfatta innehållet och minska antalet sidor.

Vi bör använda medier som bilder, animationer och videor mer medvetet och målmedvetet. Har alla bilder, videor, ikoner och animationer du har planerat för din webbplats verkligen mervärde? Eller klarar du dig utan några av dem?

3. Utveckling

Sidorhastighet

Pagespeed har länge varit en del av den lilla 1x1 av webbdesign. Varför är det bra för miljöskyddet att uppmärksamma ett bra resultat? En sida som laddas snabbare är konsekvensen av lite data att ladda!

Snabbare webbplatser - bättre för klimatet

Detta gör det ännu viktigare att du optimerar din webbplats och din butik väl. Detta är ditt personliga bidrag till klimatskyddet. Du kan läsa mer i vår e-bok Sidhastighet & prestanda.

Varför din pagespeed är långsam kan vara av flera skäl. Förutom analys ger många verktyg dig också lösningar för mer prestanda.

För denna artikel har jag lagt min egen sida genom sina steg. Som ni kommer att se från min självtest, kan en analys även vara helt tvärtom - beroende på vilken applikation som testas. Så du bör tänka på vilka mål du ska uppnå med testerna.

Google fyr
Detta resultat ger mig det populära verktyget PageSpeed Insights .
gllighthouse
Google Lighthouse testar också min sida för tillgänglighet, bland annat.

Här som en jämförelse chrome developer tool Google Fyr Och Google PageSpeed Insights. Båda verktygen är användbara referenspunkter för optimering på sidan.

ecograder
Ecograder ger bra tillvägagångssätt för på sidan optimering.

Ecograder skapades särskilt för att testa hållbarheten på webbplatser. Jag tycker personligen Ecograder den mest användarvänliga. Informationen presenteras på ett koncist och begripligt sätt, tipsen för att förbättra sidhastigheten är till hjälp.

Även med Webbplats Carbon Calculator är främst testad för hållbarhet. Jag ser positivt på den bildmässiga presentationen av resultatet. Jämförelserna med mindre abstrakta måttenheter gör det lättare att bli något mer medvetna om omfattningen av hans arbete.

Även om jag i allmänhet hitta tjänsten av Website Carbon informativ, saknar jag de individuellt anpassade detaljer som jag känner det från Google Tools samt Ecograder. Dessutom tycker jag jämförelsen med andra testade webbplatser som ett mått på professionella projekt och argument otillräckliga.

webbsidatest
Den populära webbsidan testverktyget går in på stort djup.

Speciellt för utvecklare, Test av webbsida ett utmärkt verktyg, eftersom det går in i en hel del detaljer. Du kan testa här från olika förinställningar. Från "Simple Testing" till "Avancerade inställningar", som ger dig möjlighet att utesluta olika komponenter på din webbplats eller att lägga till utdrag via kod, och samtidigt att leverera en Google Lighthouse Report till jämförelsen testning av två webbplatser, "allt" är möjligt här först. Resultaten är också uppdelade i minsta detalj tekniskt. Denna webbplats används därför för avancerad testning, medan Google och Co. är mer allmänna i sin analys.

Bilder och andra medier

Jag har redan nämnt hur man ompröva innehållet erbjuds. Nu handlar det om att integrera bilderna optimalt. 

Tinypng fungerar underbart för att komprimera bilder – och mest utan någon märkbar kvalitetsförlust. Du kan uppnå samma resultat med Photoshop och inställningen "Export för webb". Om du redan har konverterat dina bilder till ett CMS, t.ex. WordPress , kan därefter anslutas med en Plugin , till exempel Smush, optimera fortfarande upplösningen.

Om du har många bilder eller ikoner kan du ta itu med CSS sprites. De fungerar på samma sätt som sprites i datorspel utveckling. Här är bilder integrerade med hjälp av en sprite ark. CsS bestämmer sedan vilka koordinater som finns under vilken bild. Du hittar mer om detta ämne här.

Sprite-ark är flera bilder/ikoner som slås samman till en enda fil. Ofta grupperar formgivarna sina bilder tematiskt. Baserat på motsvarande x- och y-koordinater, är arken indelade och integrerade i enlighet med detta. Då läses ett enda dokument in som spelar upp olika visuella komponenter.

Lazy Load är en annan variant för optimal inläsning av bilder. Här laddas bilder när besökaren behöver dem. För WordPress det finns nu otaliga (gratis och betalas) Plugins .

WordPress

Naturligtvis frågar vi oss också när ekologiska tillvägagångssätt företag är autentiska: Finns det ett hållbart Internet alls? Hur "grön" kan WordPress Faktiskt? I artikeln WordPress hållbarhet och hållbarhet du hittar en aktuell status för diskussion i den tysktalande WP-communityn.

Hållbar WordPress : Följ med oss

RAIDBOXES från första början, har åtagit sig att Hållbar WordPress A. Se bland annat våra tips på WordPress & Hållbarhet samt att Gröna onlinebutiker. Vill du ta mer ansvar själv? Läs sedan ditt bidrag Grön Hosting för WordPress Av.

Vilket bidrag kan vi ge till hållbar, effektiv webbdesign? Vilka är de viktigaste spakarna i vardagsdesign för att spara resurser? Några Plugins och en lättviktig Theme här är de bästa tipsen.

Genomsnittliga WordPress sidor kommer till ca 600 KB. Välja rätt Themes och med hänsyn till den tidigare förklarade metoden kan du spara 50 procent eller mer. Ett litet urval av testade Themes hitta dig här.

Om din webbplats redan finns på plats och bytet av en Themes är utesluten kan du WordPress Förbättra prestanda med dessa 10 justerande skruvar.

Hur du får dina kunder att gå med i

 Egentligen bör följande sökord vara tillräckligt för att övertyga dina kunder om hållbar webbdesign: 

  • Förbättrad användbarhet och användarupplevelse,
  • tydliga och lättförståeliga konstruktioner, 
  • bättre SEO ranking, 
  • kortare laddningstid och 
  • Mobiloptimerade sidor. 

Om du fortfarande behöver fler argument erbjuder olika stiftelser även så kallade märken, som du kan integrera på dina kunders sidor.

När du väljer en värdleverantör som använder hållbar, certifierad grön el kan detta märke ingå:

Till exempel WebbplatsKol ett märke som du kan integrera på dina sidor för att visa att ditt innehåll är hållbart och ekologiskt.

Slutsats, mer extrema förhållningssätt och läsmaterial

Under min forskning om detta ämne, snubblade jag på otaliga statistik. Att skicka ett e-postmeddelande har därför samma inverkan på vår miljö som användningen av en plastpåse. Böcker är därför ofta mer miljövänliga än e-böcker. Att köpa musikalbum är mer skonsamt för våra resurser än streaming diesel. Listan är oändlig. Framför allt skakar denna statistik något vår tidigare allmänna förståelse för att digitalt också betyder "grön".

Bortsett från att vi som webbdesigners och utvecklare naturligtvis spelar en stor roll i hur webben utvecklas i framtiden, kan vi också börja med oss själva och använda Internet lite mer medvetet.

Ta reda på vilka av dina appar som är gröna och vilka som måste rengöras snarast: Med verktyget Klicka påClean från Greenpeace får du en intressant överblick över dina (favorit) applikationer och hur ekologiskt värdefulla de är.

Bidrag som skapar mer medvetenhet för en grönare framtid: 

  • Så har Jack Lenox WordPress - Theme som bara är 7 kB ljus. 
  • Brad Frost uppmuntrar oss på sin blogg DödToBullshit med en humoristisk twist att göra utan exakt detta. 
  • Heydon Pickering ger Kodning Tips hur du gör din sida smalare.

Vi bör inte heller glömma bort de positiva effekter som Internet har på vår miljö. På så sätt sparar användningen av videokonferenser oss resrutter. Särskilt under de senaste månaderna måste alla ha blivit medvetna om hur vi kan använda Internet för att undvika att använda transportmedel och därigenom minska koldioxidutsläppen. 

Dessutom finns kontor som kan minskas tack vare hemmakontoret. Dessutom erbjuder nätverket oss möjligheten att samarbeta med andra: vi kan till exempel använda carsharing plattformar och boka "homestays" som AirBnB, som är mer miljövänliga än hotell.

Spridningen av information om hållbarhet och miljöskydd underlättas också mycket av Internet. Att erbjuda och förvärva miljövänliga produkter (som vi annars kanske har sämre tillgång till) är naturligtvis en av den digitala industrins positiva effekter – för att bara nämna några.

Om du vill gräva djupare i ämnet, rekommenderar jag hemsidan sustainablewebdesign.org som utgångspunkt. I tydliga punkter förklaras här de viktigaste punkterna och möjliga tekniska lösningar för genomförandet av dessa erbjuds.

Hållbar Webbdesign: Vilka frågor har du för Sonja?

Använd kommentarsfunktionen. Du vill bli informerad om nya bidrag till webbdesign och utveckling? Följ oss sedan på TwitterFacebook eller via vår nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarnas motivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriv en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är * Markerade.