Sustainable web design

Web design sostenibile: come progettare siti web sostenibili

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? In questo articolo ho raccolto le risposte a queste domande e alcuni strumenti importanti per te.

Fatti su Internet

Quanto costa il nostro consumo digitale in termini di 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 com'è possibile? Non siamo diventati extra digitali per salvare il nostro ambiente? La realtà qui è un po' diversa: purtroppo, il digitale non significa automaticamente "sostenibile". Dalle server farm ai centri dati fino al dispositivo finale vero e proprio, tutto consuma molta energia per funzionare.

Si stima che un sito web medio produca 1,76 grammi di CO₂. Con 10.000 visitatori al mese, si tratta di 211 kg di CO₂ all'anno - per una singola pagina! 

Hai mai pensato a quante risorse sono necessarie per il tuo sito web? Più di quanto pensi, garantito! Ogni richiesta inviata dal tuo sito web viene ricevuta, elaborata, restituita e, se necessario, salvata in qualsiasi momento. Il risultato è molto alto.

I nostri siti web devono diventare più verdi

1. Hosting WordPress e Web Design sostenibile

Nel frattempo, molti fornitori di hosting WordPress si stanno unendo a loro e si affidano alle energie rinnovabili. Perché una cosa è chiara: l'hosting WordPress consuma energia e provoca notevoli emissioni di CO₂. In Raidboxes , la sostenibilità e la tutela del clima non sono solo frasi vuote, ma parte integrante della cultura aziendale.

Hosting WordPress verde per WordPress a Raidboxes

Se gestisci un sito web o un negozio online, consumi molte risorse. Raidboxes contrasta questo fenomeno con un hosting WordPress sostenibile.

Puoi determinare facilmente se il tuo sito web è "verde" con l'aiuto di questo strumento della Green Web Foundation. Se il risultato è negativo, dovresti cambiare il tuo provider di hosting WordPress. Puoi vedere un confronto qui

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

2. design e web design sostenibile

Il design giusto può evitare un consumo inutile di energia, ad esempio se il tuo sito web non carica contenuti inutili e indesiderati. Come è possibile conciliare 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

Ti ho già parlato dei vantaggi di un'usabilità ben pianificata. Un'esperienza utente ben funzionante aiuta te e i tuoi clienti a rendere il tuo sito web più sostenibile. Riduci al minimo le deviazioni indesiderate dei tuoi utenti. Idealmente, vengono caricate solo le pagine che l'utente vuole effettivamente visitare. Se riduci i clic indesiderati, invii meno richieste di dati e quindi consumi meno energia.

Numero di pagine

Anche in questo caso puoi lavorare sulla tua sostenibilità mentre progetti il sito web. In generale, meno pagine devono essere caricate, meno richieste di dati vengono inviate. Oltre a rendere il tuo sito più facile da navigare, ha senso anche dal punto di vista ecologico combinare i contenuti e ridurre il numero di pagine.

Dovremmo utilizzare media come immagini, animazioni e video in modo più consapevole e mirato. Tutte le immagini, i video, le icone e le animazioni che hai previsto per il tuo sito aggiungono davvero valore? Oppure puoi fare a meno di alcuni di essi?

3. sviluppo e web design sostenibile

Velocità delle pagine

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

Per questo è ancora più importante che tu ottimizzi bene il tuo sito web e il tuo negozio. Questo è il tuo contributo personale alla protezione del clima. Puoi trovare maggiori informazioni su questo argomento nel nostro e-book Velocità e prestazioni della pagina.

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 tuoi obiettivi con i test.

google lighthouse
Questo risultato mi dà lo strumento popolare PageSpeed Insights.
Faro
Google Lighthouse verifica anche l'accessibilità del mio sito, 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 offre un buon approccio all'ottimizzazione della pagina.

Ecograder è stato creato appositamente per testare la sostenibilità dei siti web. Personalmente trovo Ecograder il più facile da usare. Le informazioni sono concise e facili da capire e i suggerimenti per migliorare la velocità delle pagine sono utili.

Anche il sito web Carbon Calculator effettua principalmente test di sostenibilità. Trovo positiva la rappresentazione pittorica del risultato. Il confronto con unità di misura meno astratte rende più facile rendersi conto dell'entità del proprio lavoro.

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

webpagetest
Il popolare strumento Webpagetest approfondisce molto la questione.

Webpagetest è uno strumento eccellente, soprattutto per gli sviluppatori, perché entra nel dettaglio. Puoi testare diversi preset qui. Dai "Test semplici" alle "Impostazioni avanzate", che ti permettono di escludere vari componenti del tuo sito web, o per essere più precisi, di aggiungerli tramite snippet di codice, e allo stesso tempo di fornire un Rapporto Google Lighthouse, fino al test comparativo di due siti web, "tutto" è possibile qui. I risultati sono anche tecnicamente suddivisi nei minimi dettagli. Questo sito web viene quindi utilizzato per test avanzati, mentre Google e co. fanno le loro analisi in modo un po' più generale.

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 si è impegnata fin dall'inizio a realizzare un WordPress sostenibile. Consulta, tra gli altri, i nostri consigli su WordPress e la sostenibilità e sui negozi online ecologici. Vuoi assumerti maggiori responsabilità? Allora leggi il nostro articolo Hosting verde 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 cambiare tema è fuori discussione, puoi migliorare le prestazioni di WordPress con l'aiuto di queste 10 modifiche.

Come convincere gli altri a partecipare

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

  • Miglioramento dell'usabilità e dell'esperienza utente,
  • disegni chiari e di facile comprensione, 
  • migliori classifiche SEO, 
  • tempi di caricamento più brevi e 
  • Pagine ottimizzate per cellulari. 

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

Se scegli un provider di hosting WordPress che utilizza elettricità verde sostenibile e certificata, questo badge può essere incluso:

WebsiteCarbon, ad esempio, offre anche un badge che puoi integrare nelle tue pagine per mostrare che i tuoi contenuti sono sostenibili ed ecologici.

"*" indica i campi obbligatori

Questo campo è per la convalida e non deve essere modificato.

Conclusioni sul Web Design Sostenibile

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 maggiore consapevolezza per un futuro più verde: 

  • Così Jack Lenox ha costruito un WordPress -Theme che è solo 7 KB di luce. 
  • Brad Frost, sul tuo 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 sulla tutela dell'ambiente. Anche l'offerta e l'acquisto di prodotti ecologici (a cui altrimenti potremmo avere meno accesso) rientrano tra gli effetti positivi dell'industria digitale, solo per citarne alcuni.

Se vuoi approfondire l'argomento, ti consiglio il sito web sustainablewebdesign.org come punto di partenza. I punti più importanti sono spiegati in paragrafi chiari e vengono offerte possibili soluzioni tecniche per la loro implementazione.

Sustainable Web Design: Quali domande hai per Sonja?

Sentiti libero di utilizzare la funzione di commento. Vuoi essere informato sui nuovi articoli di web design e sviluppo? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più i nostri contenuti. Grazie!

Scrivi un commento

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