Vad exakt betyder "Hållbar webbdesign"? Hur vet du hur ekologisk din webbplats är? Hur kan du göra din webbplats mer hållbar och vilka fördelar ger detta dina kunder? Jag har sammanställt svaren på dessa frågor samt några viktiga verktyg i den här artikeln.

Fakta om power guzzler Internet

Men hur kan det egentligen vara så? Blev vi inte digitala för att skydda vår miljö? Verkligheten här är något annorlunda: Tyvärr betyder digitalt inte automatiskt "grönt". Från servergrupper till datacenter till själva slutenheten – allt förbrukar energi för att fungera.

En genomsnittlig webbplats producerar uppskattningsvis 1,76 gram CO₂. Med 10 000 besökare per månad får du 211 kg CO₂ per år – för en enda sida! 

Har du någonsin tänkt på hur många resurser din webbplats behöver? Garanterat mer än du tror! Varje begäran som din webbplats skickar tas emot, behandlas, returneras och lagras vid något tillfälle. Så mycket kommer ihop.

Våra webbplatser måste bli grönare

1. WordPress Hosting och hållbar webbdesign

Samtidigt deltar många WordPress-värdleverantörer och förlitar sig på förnybar energi. Eftersom en sak är klar: WordPress hosting förbrukar energi och säkerställer betydande CO₂-utsläpp. Vid Raidboxes Hållbarhet och klimatskydd är inte en tom fras, utan en integrerad del av företagskulturen.

Du kan enkelt avgöra om din webbplats är "grön" med hjälp av det här verktyget från The Green Web Foundation . Om resultatet är negativt är det vettigt att ändra WordPress-värdleverantören. Du kan se en jämförelse här . 

2. Design och hållbar webbdesign

Rätt design kan förhindra att onödig energi förbrukas, till exempel om din webbplats inte laddar onödigt och oönskat innehåll i första hand. Hur kan du förena design och hållbarhet och spara resurser?

Mobil först

Med Mobile First optimerar du ditt innehåll för användning av smartphones redan från början. Optimerade sidor behöver inte läsa in överdimensionerade media på mobila enheter. Dessa är programmerade på ett sådant sätt att skrivbordsstilar inte behöver skrivas över, men är utformade direkt för den minsta enheten.

Användarupplevelse

Jag har redan berättat om fördelarna med välplanerad användbarhet. En välfungerande användarupplevelse hjälper dig och dina kunder att göra din webbplats mer hållbar. Du minimerar oönskade omvägar för dina användare. Helst laddas bara de sidor som användaren faktiskt vill besöka. De som minskar oönskade klick skickar färre dataförfrågningar och förbrukar därför mindre energi.

Sidstorlek

Återigen kan du redan arbeta med din hållbarhet när du planerar webbplatsen. I allmänhet skickas färre sidor som behöver läsas in, desto färre databegäranden skickas. Förutom att göra din sida lättare att navigera, är det också ekologiskt meningsfullt att sammanfatta innehållet och minska antalet sidor.

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

3. Utveckling och hållbar webbdesign

Sidhastighet

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

Det kan finnas flera anledningar till att din sidhastighet är långsam. Förutom analysen ger många verktyg dig också lösningar för mer prestanda.

För den här artikeln satte jag min egen sida genom dess steg. Som du kommer att se från mitt självtest kan en analys till och med vara helt motsatt – beroende på vilken applikation som testas. Så du bör överväga vilka mål du strävar efter med testerna.

Här som jämförelse kan Chrome Developer Tool Google Lighthouse och Google PageSpeed Insights. Båda verktygen är användbara landmärken för optimering på sidan.

Ecograder skapades specifikt för att testa hållbarheten på webbplatser. Jag tycker personligen att Ecograder är den vänligaste att servera. Informationen presenteras kortfattat och begripligt, tipsen för att förbättra sidhastigheten är användbara.

Carbon Calculators webbplats är också främst testad för hållbarhet. Jag anser att den bildmässiga representationen av resultatet är positiv. Jämförelserna med mindre abstrakta måttenheter gör det lättare att bli något mer medveten om omfattningen av hans arbete.

Även om jag i allmänhet tycker att tjänsten för Website Carbon är informativ saknar jag de individuellt anpassade detaljerna som jag känner till från Google Tools och Ecograder . Dessutom anser jag att jämförelsen med andra testade webbplatser som en måttenhet för professionella projekt och argumentationer är otillräcklig.

Speciellt för utvecklare är webpagetest ett utmärkt verktyg eftersom det går in i detalj. Du kan testa här från olika förinställningar. Från "Enkel testning" till "Avancerade inställningar", som låter dig utesluta olika komponenter på din webbplats, mer exakt lägga till kodavsnitt och samtidigt tillhandahålla en Google Lighthouse-rapport till jämförelsetestningen av två webbplatser, "allt" är möjligt här. Resultaten är också uppdelade till minsta tekniska detalj. Denna webbplats används därför för utökad testning, medan Google och Co är något mer allmänna i sin analys.

Bilder och andra medier

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

Tinypng fungerar utmärkt för att komprimera bilder – och oftast utan märkbar kvalitetsförlust. Du kan uppnå samma resultat med Photoshop och inställningen "Exportera för webben". Om du redan har integrerat dina bilder i ett CMS, till exempel WordPress, kan du därefter optimera upplösningen med ett plugin, till exempel Smush.

Om du har många bilder eller ikoner kan du hantera CSS Sprites. De fungerar på samma sätt som sprites i datorspelsutveckling. Här integreras bilderna en gång via sprite sheet. Sedan används CSS för att bestämma under vilka koordinater vilken bild som finns. Du kan läsa mer om det här ämnet här.

Sprite-ark är flera bilder/ikoner som slås samman till en enda fil. Formgivarna grupperar ofta sina bilder tematiskt. Baserat på motsvarande x- och y-koordinater är arken uppdelade och integrerade i enlighet därmed. Detta läser in ett enda dokument som spelar upp olika visuella komponenter.

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

WordPress

Naturligtvis frågar vi oss också när företagens ekologiska tillvägagångssätt är autentiska: Finns det överhuvudtaget ett hållbart Internet? Hur "grön" kan WordPress faktiskt vara? I artikeln WordPress och Hållbarhet hittar du en uppdaterad status för diskussion i den tysktalande WP-gemenskapen.

Vilket bidrag kan vi ge till hållbar och effektiv webbdesign? Vilka är de viktigaste spakarna i vardagsdesign för att spara resurser? Få plugins och ett lätt tema är de bästa tipsen här.

Genomsnittliga WordPress-webbplatser kommer till cirka 600 KB. Genom att välja rätt tema och ta hänsyn till det tidigare förklarade tillvägagångssättet kan du spara 50 procent och mer. Ett litet urval av testade teman hittar du här.

Om din webbplats redan står och ändringen av ett tema utesluts kan du förbättra din WordPress-prestanda med hjälp av dessa 10 justeringsskruvar.

Hur man övertygar andra att gå med

 Egentligen borde följande nyckelord redan 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 mönster, 
• bättre SEO-ranking, 
• kortare laddningstid och 
• Mobiloptimerade sidor. 

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

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

• https://www.thegreenwebfoundation.org/ (efter kod)
• https://wordpress.org/plugins/the-green-web-widget/ (via plugin)

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

Slutsats om hållbar webbdesign

Under min forskning om detta ämne snubblade jag över otaliga statistik. Att skicka ett e-postmeddelande har samma inverkan på vår miljö som att använda 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 mot våra resurser än att strömma dem. Listan är oändlig. Framför allt skakar denna statistik om vår tidigare allmänna förståelse för att digitalt också betyder "grönt" på samma gång.

Förutom 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 snabbt behöver rengöras: Med ClickClean-verktyget från Greenpeace får du en intressant översikt över dina (favorit) applikationer och tar reda på hur ekologiskt värdefulla de är.

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

• Till exempel har Jack Lenox byggt ett WordPress-tema som bara är 7 KB ljus. 
• Brad Frost uppmuntrar oss på sin blogg DeathToBullshit med en humoristisk twist att göra utan exakt detta. 
• Heydon Pickering ger kodningstips om hur du gör din webbplats smalare.

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

Dessutom finns det kontorsutrymmen som kan minskas tack vare hemmakontoret. Dessutom ger nätverket oss möjlighet att gå samman med andra: vi kan till exempel använda bildelningsplattformar 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 köpa miljövänliga produkter (som vi annars skulle ha mindre tillgång till) är också bland de positiva effekterna av den digitala industrin – för att bara nämna några.

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