Web Design sostenibile: come progettare siti web sostenibili

Sonja Hoffmann Ultimo aggiornamento 21.12.2020
7 Min.
Sustainable web design
Ultimo aggiornamento 21.12.2020

Cosa significa esattamente "Web Design sostenibile"? Come fai a sapere quanto è ecologico il tuo sito? Come puoi rendere il tuo sito web più sostenibile e quali sono i vantaggi per i tuoi clienti? Ho raccolto le risposte a queste domande e alcuni strumenti importanti in questo post.

Fatti sul guastafeste Internet

Quanto costa il nostro consumo digitale in energia

Secondo Websitecarbon, Internet consuma 416,2 terawattora (TWh) all'anno. È circa quanto consuma la sola Germania. Se Internet fosse un paese, avrebbe già oggi il sesto maggior consumo di elettricità al mondo.

Ma come può essere? Non siamo diventati extra digitali per salvare il nostro ambiente? La realtà qui è un po' diversa: Purtroppo, il digitale non significa automaticamente "verde". Dalle server farm ai centri dati fino al dispositivo finale vero e proprio, tutto consuma energia per funzionare.

Si stima che un sito web medio produca 1,76 grammi di CO2. Con 10.000 visitatori al mese, si arriva a 211 kg di CO2 all'anno - per una sola pagina! 

Avete mai pensato a quante risorse sono necessarie per il vostro sito web? Più di quanto pensiate, garantito! Ogni richiesta che il tuo sito web invia viene ricevuta da qualche parte, elaborata, restituita e memorizzata se necessario. Questo aggiunge un sacco di cose.

I nostri siti web devono diventare più verdi - ma come?

1. hosting

Nel frattempo, molti fornitori di hosting si stanno unendo e si affidano alle energie rinnovabili. Perché una cosa è chiara: il web hosting consuma energia e causa una quantità considerevole di emissioni di CO2. Su RAIDBOXES , la sostenibilità e la protezione del clima non sono solo frasi vuote, ma parte integrante della cultura aziendale.

Green Hosting per WordPress a RAIDBOXES

Se gestisci un sito web o un negozio online, consumi molte risorse. RAIDBOXES si oppone a questo - con un hosting positivo per il clima per WordPress e WooCommerce.

Puoi facilmente determinare se il tuo sito web è "verde" con l'aiuto di questo strumento di The Green Web Foundation. Se il risultato è negativo, dovreste cambiare il vostro fornitore di hosting. Potete vedere un confronto qui

La Fondazione Web Verde
RAIDBOXES si affida all'elettricità verde sostenibile e certificata dall'energia idroelettrica.

2. design

Il giusto design può prevenire il consumo inutile di energia, per esempio se il tuo sito web non carica contenuti inutili e indesiderati in primo luogo. Come si può combinare design e sostenibilità e risparmiare risorse?

Mobile First

Su Mobile First , ottimizzi il tuo contenuto per l'uso dello smartphone fin dall'inizio. Le pagine ottimizzate non devono caricare media sovradimensionati sui dispositivi mobili. Sono programmati in modo che gli stili desktop non debbano essere sovrascritti, ma sono progettati direttamente per il dispositivo più piccolo.

esperienza utente

Vi ho già parlato dei vantaggi di un'usabilità ben pianificata. Un'esperienza utente ben funzionante aiuta voi e i vostri clienti a rendere il vostro sito web più sostenibile. Riduci al minimo le deviazioni indesiderate dei tuoi utenti. Perché idealmente, vengono caricate solo le pagine che l'utente vuole effettivamente visitare. Se si riducono i clic indesiderati, si inviano meno richieste di dati e quindi si usa meno energia.

Conteggio delle pagine

Anche qui, puoi lavorare sulla tua sostenibilità mentre pianifichi il sito web. In generale, meno pagine devono essere caricate, meno richieste di dati saranno inviate. Oltre a rendere il tuo sito più facile da navigare, ha anche senso da un punto di vista ecologico combinare il contenuto e ridurre il numero di pagine.

Dovremmo usare i media come le immagini, le animazioni e i video in modo più consapevole e mirato. Tutte le immagini, i video, le icone e le animazioni che hai pianificato per il tuo sito aggiungono davvero valore? O si può fare a meno di alcuni di essi?

3. sviluppo

Pagespeed

Pagespeed è stato a lungo parte del piccolo 1×1 del web design. Perché è anche un bene per l'ambiente prestare attenzione a una buona performance? Una pagina che si carica più velocemente è la conseguenza di pochi dati da caricare!

Siti web più veloci - meglio per il clima

È quindi ancora più importante ottimizzare bene il tuo sito web e il tuo negozio. Questo è il tuo contributo personale alla protezione del clima. Scopri di più su questo nel nostro e-book Page Speed & Performance.

Il motivo per cui la vostra velocità delle pagine è lenta può avere varie ragioni. Molti strumenti forniscono non solo l'analisi, ma anche soluzioni per ottenere maggiori prestazioni.

Per questo articolo, ho messo alla prova il mio sito. Come vedrete dal mio autotest, un'analisi può anche risultare completamente opposta - a seconda dell'applicazione con cui viene testata. Quindi dovreste considerare quali sono i vostri obiettivi con i test.

faro di google
Questo risultato mi dà lo strumento popolare PageSpeed Insights.
gllighthouse
Google Lighthouse testa anche il mio sito per l'accessibilità, tra le altre cose.

Qui come confronto il Chrome Developer Tool Google Lighthouse e Google PageSpeed Insights. Entrambi gli strumenti sono utili punti di riferimento per l'ottimizzazione onpage.

ecograder
Ecograder fornisce buoni approcci all'ottimizzazione onpage.

Ecograder è stato creato appositamente per testare la sostenibilità dei siti web. Personalmente trovo Ecograder il più facile da usare. Le informazioni sono presentate in modo conciso e comprensibile, i suggerimenti per migliorare la velocità delle pagine sono utili.

Anche il sito web Carbon Calculator fa principalmente dei test per la sostenibilità. Trovo positiva la rappresentazione pittorica del risultato. I paragoni con unità di misura meno astratte rendono più facile diventare un po' più consapevoli della portata del proprio lavoro.

Trovo il servizio di Website Carbon generalmente informativo, ma mi mancano i dettagli personalizzati come li conosco dagli strumenti di Google e da Ecograder. Inoltre, trovo inadeguato il confronto con altri siti web testati come misura per progetti e argomentazioni professionali.

webpagetest
Il popolare strumento Webpagetest va molto in profondità.

Soprattutto per gli sviluppatori, Webpagetest è uno strumento eccellente perché va in grande dettaglio. Qui si può testare da diversi preset. Da "Simple Testing" a "Advanced Settings", che ti danno la possibilità di escludere vari componenti del tuo sito web, o aggiungerli tramite snippet di codice, e allo stesso tempo consegnare un Google Lighthouse Report, fino al test di confronto di due siti web, "tutto" è possibile qui. I risultati sono anche tecnicamente suddivisi nei minimi dettagli. Questo sito è quindi utilizzato per test avanzati, mentre Google e Co. fanno le loro analisi un po' più generali.

Immagini e altri media

Per ripensare il contenuto offerto, ho già affrontato prima. Ora si tratta di integrare le immagini in modo ottimale. 

Tinypng funziona meravigliosamente per comprimere le immagini - e di solito senza alcuna perdita notevole di qualità. Potete ottenere lo stesso risultato con Photoshop e l'impostazione "Export for Web". Se hai già integrato le tue immagini in un CMS, come WordPress , puoi ancora ottimizzare la risoluzione dopo con un Plugin, come Smush.

Se hai molte immagini o icone, puoi guardare agli sprites CSS. Funzionano in modo simile agli sprites nello sviluppo dei giochi per computer. Qui, le immagini sono integrate una volta per foglio di sprite. In seguito il CSS determina sotto quali coordinate si trova l'immagine. Maggiori informazioni su questo argomento possono essere trovate qui.

I fogli sprite sono immagini/icone multiple che vengono unite in un unico file. I designer spesso raggruppano le loro immagini in modo tematico. In base alle coordinate x e y associate, i fogli sono divisi e inclusi di conseguenza. In questo modo, viene caricato un unico documento che mostra vari componenti visivi.

Lazy Load è un'altra variante per il caricamento ottimale delle immagini. Qui, le immagini sono caricate quando il visitatore ne ha bisogno. Per WordPress ci sono ora anche innumerevoli (gratis e a pagamento) Plugins.

WordPress

Naturalmente, anche noi ci chiediamo quando gli approcci ecologici delle aziende siano autentici: Esiste un internet sostenibile? Quanto "verde" può essere davvero WordPress ? Nell'articolo WordPress e sostenibilità troverete uno stato attuale della discussione nella comunità WP di lingua tedesca.

Sostenibile WordPress : Partecipa anche tu

RAIDBOXES è stato impegnato in un WordPress sostenibile fin dall'inizio. Vedi, tra le altre cose, i nostri consigli su WordPress & sostenibilità e sui negozi verdi online. Vuoi prenderti più responsabilità da solo? Allora leggete il nostro articolo Green Hosting per WordPress .

Quale contributo possiamo dare al web design sostenibile ed efficiente? Quali sono le leve più importanti nel design quotidiano per risparmiare risorse? Pochi Plugins e un leggero Theme sono i migliori consigli qui.

La media dei siti web WordPress arriva a circa 600 KB. Scegliendo il giusto Themes e tenendo conto dell'approccio spiegato in precedenza, si può risparmiare il 50% o più. Una piccola selezione di Themes testati può essere trovata qui.

Se il tuo sito web è già attivo e funzionante e passare a Themes è fuori questione per ora, puoi migliorare le prestazioni diWordPress con l'aiuto di questi 10 tweaks.

Come convincere i tuoi clienti a partecipare

 In realtà, le seguenti parole chiave dovrebbero già essere sufficienti per convincere i vostri clienti del web design sostenibile: 

  • Miglioramento dell'usabilità e dell'esperienza dell'utente,
  • disegni chiari e facili da capire, 
  • migliori classifiche SEO, 
  • tempo di caricamento più breve e 
  • Pagine ottimizzate per cellulari. 

Se avete ancora bisogno di ulteriori argomenti, varie fondazioni offrono anche i cosiddetti badge, che potete integrare nelle pagine dei vostri clienti.

Quando si sceglie un fornitore di hosting che utilizza energia verde sostenibile e certificata, questo badge può essere incluso:

Per esempio, WebsiteCarbon offre anche un badge che puoi integrare nelle tue pagine per mostrare che il tuo contenuto è costruito in modo sostenibile ed ecologico.

Conclusione, approcci più estremi e materiale di lettura

Durante la mia ricerca su questo argomento, mi sono imbattuto in innumerevoli statistiche. L'invio di un'e-mail ha lo stesso impatto sull'ambiente che l'utilizzo di un sacchetto di plastica. I libri sono spesso più ecologici degli e-book. Comprare gli album di musica è meglio per le nostre risorse che non ascoltarli in streaming. La lista è infinita. Soprattutto, queste statistiche scuotono la nostra comprensione comune che digitale significa anche "verde".

A parte il fatto che noi, come web designer e sviluppatori, ovviamente giochiamo un ruolo importante nel modo in cui il web si svilupperà in futuro, possiamo anche iniziare da noi stessi e usare internet un po' più consapevolmente.

Scopri quali delle tue app sono verdi e quali hanno urgente bisogno di essere pulite: Con lo strumento ClickClean di Greenpeace, puoi avere un'interessante panoramica delle tue app (preferite) e scoprire quanto sono ecologicamente preziose.

Contributi che creano più consapevolezza per un futuro più verde: 

  • Così Jack Lenox ha costruito un WordPress -Theme che è solo 7 KB di luce. 
  • Brad Frost, sul suo blog DeathToBullshit, ci incoraggia a fare a meno proprio di questo con un tocco umoristico. 
  • Heydon Pickering dà consigli di codifica su come rendere il tuo sito più snello.

Non dobbiamo anche dimenticare gli effetti positivi che Internet ha sul nostro ambiente. Per esempio, l'uso della videoconferenza ci fa risparmiare il viaggio. Soprattutto durante gli ultimi mesi, tutti dovrebbero aver preso coscienza di come, con l'aiuto di Internet, possiamo evitare di usare i mezzi di trasporto e ridurre così le emissioni di CO2. 

Inoltre, abbiamo uno spazio per l'ufficio che può essere ridimensionato grazie agli home office. Inoltre, la rete ci offre l'opportunità di unire le forze con altri: Per esempio, possiamo usare piattaforme di car-sharing e prenotare "homestay" come AirBnB, che sono più ecologici degli hotel.

Internet rende anche molto più facile la diffusione di informazioni sulla sostenibilità e la protezione dell'ambiente. L'offerta e l'acquisto di prodotti ecologici (a cui altrimenti potremmo avere meno accesso) sono naturalmente anche tra gli effetti positivi dell'industria digitale - per citarne solo alcuni.

Se volete approfondire l'argomento, vi consiglio il sito web sustainablewebdesign.org come punto di partenza. In paragrafi chiari, vengono spiegati i punti più importanti e vengono offerte possibili soluzioni tecniche per la loro attuazione.

Sustainable Web Design: Quali domande hai per Sonja?

Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul web design e lo sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Dopo aver studiato Game Design e scrittura creativa, si è specializzata nel web e app designe e nel loro sviluppo. La sua attenzione è rivolta alla gamification e al capire la motivazione e l'esperienza dell'utente, insieme alla passione e alla curiosità per i trend tecnologici.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.