Web Design sostenibile: come progettare siti web sostenibili

Sonja Hoffmann Aggiornato il 21.10.2020
7 Min.
Sustainable web design
Ultimo aggiornamento il 21.10.2020

Cosa significa esattamente "Sustainable Web Design"? Come fai a sapere quanto è ecologico il tuo sito? Come potete rendere il vostro sito web più sostenibile e quali sono i vantaggi per i vostri clienti? Le risposte a queste domande e alcuni strumenti importanti che ho raccolto per voi in questo articolo.

Fatti sull'Internet affamato di potere

Quanto costa il nostro consumo digitale di energia

Secondo Sito web carbonio Internet consuma 416,2 terawattora (TWh) all'anno. Questo è più o meno quanto consuma la sola Germania. Se Internet fosse un paese, avrebbe già sesto più grande consumo di elettricità al mondo.

Ma com'è possibile? Non siamo passati al digitale per proteggere il nostro ambiente? Qui la realtà sembra un po' diversa: Purtroppo digitale non significa automaticamente verde. Dalle server farm ai data center fino al dispositivo finale vero e proprio - tutto utilizza energia per funzionare.

Un sito web medio produce circa 1,76 grammi di CO2. Con 10.000 visitatori al mese, si ottiene 211 kg di CO2 all'anno - per una sola pagina! 

Avete mai pensato a quante risorse sono necessarie per il vostro sito web? Garantito più di quanto si pensi! Ogni richiesta inviata dal vostro sito web viene ricevuta, elaborata, restituita e, se necessario, salvata da qualche parte. E' così che molte cose si incontrano.

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

1. hosting

Nel frattempo, molti fornitori di hosting si stanno unendo e si stanno concentrando sulle energie rinnovabili. Perché una cosa è chiara: il web hosting divora l'energia e causa notevoli emissioni di CO2. Sostenibilità e protezione RAIDBOXES del clima non è solo una frase vuota, ma è parte integrante della nostra cultura aziendale.

Green Hosting per WordPress RAIDBOXES

Se si gestisce un sito web o un negozio online, si consumano molte risorse. RAIDBOXES controlli contro di esso - con clima positivo per WordPress e WooCommerce.

Se il vostro sito web è "verde", potete scoprirlo facilmente con l'aiuto questo strumento di The Green Web Foundation. Se il risultato è negativo, è consigliabile cambiare l'hosting provider. Potete fare un confronto qui ...da vedere. 

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

2. progettazione

Il giusto design può evitare un inutile consumo di energia, ad esempio se il vostro sito web non carica affatto contenuti inutili e indesiderati. Come si può combinare design e sostenibilità e risparmiare risorse?

Mobile First

Con Mobile First voi ottimizzate i vostri contenuti per l'utilizzo degli smartphone fin dall'inizio. I siti ottimizzati non devono caricare supporti sovradimensionati su dispositivi mobili. Sono programmati in modo tale che gli stili del desktop non devono essere sovrascritti, ma sono progettati direttamente per il dispositivo più piccolo.

esperienza utente

A proposito dei vantaggi di un'usabilità ben pianificata vi ho detto segnalato in precedenza. Un'esperienza utente ben funzionante aiuta voi e i vostri clienti a rendere il vostro sito web più sostenibile. Riducete al minimo le deviazioni indesiderate dei vostri utenti. 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 consuma meno energia.

Conteggio delle pagine

Qui potete anche lavorare sulla vostra sostenibilità mentre pianificate il sito web. In generale, meno pagine devono essere caricate, meno richieste di dati vengono inviate. Oltre al fatto che questo rende il vostro sito più facile da navigare, ha anche senso dal punto di vista ecologico per riassumere i contenuti e ridurre il numero di pagine.

Dovremmo usare i media come immagini, eventuali animazioni e video in modo più consapevole e più specifico. Davvero tutte le immagini, i video, le icone e le animazioni che avete progettato per il vostro sito portano un valore aggiunto? O si può fare a meno di alcuni di loro?

3. sviluppo

Pagespeed

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

Siti web più veloci - meglio per il clima

È tanto più importante che ottimizziate bene il vostro sito web e il vostro negozio. Questo è il vostro contributo personale alla protezione del clima. Potete saperne di più nel nostro e-book Pagina Velocità e prestazioni.

Il motivo per cui la velocità della vostra pagina è lenta può avere diverse ragioni. Molti strumenti forniscono non solo un'analisi, ma anche soluzioni per migliorare le prestazioni.

Per questo articolo ho messo alla prova il mio sito. Come vedrete dal mio autotest, un'analisi può anche rivelarsi completamente l'opposto - a seconda dell'applicazione con cui viene testata. Quindi dovreste pensare a cosa volete ottenere con i test.

faro di google
Questo risultato è fornito dal popolare strumento PageSpeed Insights.
gllighthouse
Google Lighthouse testa il mio sito per verificarne l'accessibilità, tra le altre cose.

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

ecograder
Ecograder fornisce buoni approcci per l'ottimizzazione onpage.

Ecograder è stato creato appositamente per testare la sostenibilità dei siti web. Personalmente trovo che Ecograder sia il più facile da usare. Le informazioni sono concise e facili da capire, i consigli per migliorare la velocità della pagina sono utili.

Anche con il Sito web Calcolatore di carbonio è principalmente testato per la sostenibilità. Trovo positiva la rappresentazione pittorica del risultato. Il confronto con unità di misura meno astratte rende più facile diventare un po' più consapevoli della portata del suo lavoro.

Trovo il servizio del sito web Carbon generalmente informativo, ma mi mancano i dettagli personalizzati come li conosco da Google Tools ed Ecograder. Inoltre, trovo insufficiente il confronto con altri siti web testati come misura per progetti e argomentazioni professionali.

test della pagina web
Il popolare strumento Webpagetest va molto in profondità.

Specialmente per gli sviluppatori è Webpagetest uno strumento eccellente, perché entra nei minimi dettagli. Qui è possibile effettuare il test da diverse preimpostazioni. Da "Simple Testing" a "Impostazioni avanzate", che consentono di escludere vari componenti del vostro sito web, o di aggiungerli tramite snippet di codice, e allo stesso tempo includono un Google Lighthouse Report, fino al test di confronto di due siti web, "tutto" è possibile qui. Anche i risultati sono tecnicamente scomposti nei minimi dettagli. Questo sito web viene quindi utilizzato per test avanzati, mentre Google e Co. sono più generali nella loro analisi.

Immagini e altri media

Ho già accennato in precedenza per riconsiderare i contenuti offerti. Ora si tratta di integrare le immagini in modo ottimale. 

Tinypng funziona benissimo per comprimere le immagini - e di solito senza alcuna perdita di qualità evidente. Lo stesso risultato si ottiene con Photoshop e l'impostazione "Esporta per il Web". Se avete già integrato le vostre immagini in un CMS, ad esempioWordPress , potete ottimizzare la risoluzione con unPlugin, ad esempio, smush, in seguito.

Se avete molte immagini o icone, potete usare gli sprite CSS. Lavorano in modo simile ai folletti nello sviluppo di giochi per computer. Qui le immagini sono integrate una volta per foglio di sprite. Poi si usa il CSS per determinare sotto quali coordinate si trova ogni immagine. Potete trovare ulteriori informazioni su questo argomento qui.

I fogli Sprite sono immagini multiple/icone che vengono unite in un unico file. Spesso i designer raggruppano le loro immagini in modo tematico. Sulla base delle corrispondenti coordinate x e y, i fogli vengono suddivisi e integrati di conseguenza. In questo modo viene caricato un unico documento che riproduce diverse componenti visive.

Lazy Load è un'altra variante per il caricamento ottimale delle immagini. Qui le immagini vengono caricate quando il visitatore ne ha bisogno. Anche per WordPress questo esistono innumerevoli Pluginsversioni (gratuite e a pagamento).

WordPress

Naturalmente, ci chiediamo anche quando gli approcci ecologici delle aziende sono autentici: C'è almeno un Internet sostenibile? Quanto "verde" può essere in WordPress realtà? Nell'articolo WordPress e sostenibilità troverete uno stato aggiornato della discussione nella comunità del WP di lingua tedesca.

Sostenibilità WordPress : Essere parte di esso

RAIDBOXES si impegna fin dall'inizio a sostenibile WordPress uno. Vedi tra le altre cose i nostri consigli su WordPress e la sostenibilità così come a Negozi online verdi. Vuoi assumerti maggiori responsabilità? Leggi il nostro contributo Green hosting per WordPress attraverso.

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

La media WordPress delle pagine è di circa 600 KB. Scegliendo l'approccio giusto Themes e tenendo conto dell'approccio precedentemente spiegato, è possibile risparmiare il 50% o più. Troverete una piccola selezione di Themes quelli testati qui.

Se il vostro sito web è già attivo e il cambio di uno Themes è impossibile, potete cambiare il vostro WordPress Migliorate le prestazioni con l'aiuto di queste 10 viti di regolazione.

Come convincete i vostri 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 di facile comprensione, 
  • migliori classifiche SEO, 
  • tempi di ricarica più brevi e 
  • Pagine ottimizzate per i cellulari. 

Se avete ancora bisogno di ulteriori argomenti, diverse fondazioni offrono anche i cosiddetti badge, che potete integrare sui siti web dei vostri clienti.

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

Ad esempio, anche WebsiteCarbon un badge che potete integrare nelle vostre pagine per dimostrare che i vostri contenuti sono sostenibili ed ecologici.

Conclusioni, approcci più estremi e materiale di lettura

Durante la mia ricerca su questo argomento mi sono imbattuto in innumerevoli statistiche. L'invio di una e-mail ha lo stesso effetto sul nostro ambiente che l'utilizzo di un sacchetto di plastica. I libri sono quindi spesso più ecologici degli e-book. Acquistare album musicali è meglio per le nostre risorse rispetto allo streaming. La lista è infinita. Soprattutto, queste statistiche scuotono la nostra precedente comprensione generale che il digitale significa anche "verde".

Oltre al fatto che noi, come web designer e sviluppatori, abbiamo naturalmente un ruolo importante nel modo in cui il web si svilupperà in futuro, possiamo anche iniziare da noi stessi e usare internet in modo un po' più consapevole.

Scoprite quali delle vostre app sono verdi e quali devono essere pulite con urgenza: Con lo strumento ClickClean da Greenpeace si ottiene un'interessante panoramica delle vostre applicazioni (preferite) e si impara quanto siano ecologicamente preziose.

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

Non dobbiamo inoltre dimenticare gli effetti positivi che Internet ha sul nostro ambiente. Ad esempio, l'uso della videoconferenza ci risparmia i viaggi. Negli ultimi mesi, in particolare, tutti avrebbero dovuto rendersi conto di come Internet possa aiutarci ad evitare l'uso dei trasporti e quindi a ridurre le emissioni di CO2. 

Inoltre, c'è uno spazio ufficio che può essere ridotto grazie all'ufficio a domicilio. Inoltre, la rete ci offre l'opportunità di unire le forze con gli altri: Ad esempio, possiamo utilizzare piattaforme di car sharing e prenotare "homestays" come AirBnB, che sono più rispettosi dell'ambiente rispetto agli hotel.

Internet rende inoltre molto più facile la diffusione di informazioni sulla sostenibilità e la tutela dell'ambiente. L'offerta e l'acquisto di prodotti ecologici (a cui altrimenti potremmo avere meno accesso) è naturalmente anche uno degli 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 chiaramente disposti, vengono qui spiegati i punti più importanti e vengono offerte le possibili soluzioni tecniche per la loro realizzazione.

Web Design sostenibile: quali domande avete per Sonja?

Sentitevi liberi di usare la funzione di commento. Volete essere informati sui nuovi contributi al web design e allo sviluppo? Poi seguiteci su TwitterFacebook o nella 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 mail non sarà pubblicato. I campi obbligatori sono contrassegnati con * marcato.