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? Ho raccolto le risposte a queste domande e alcuni strumenti importanti per voi in questo articolo.

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 CO₂. Con 10.000 visitatori al mese, si arriva a 211 kg CO₂ all'anno - per una sola pagina! 

hai 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, elaborata, restituita e, se necessario, salvata in qualsiasi punto. Questo aggiunge un sacco di cose.

I nostri siti web devono diventare più verdi

1. WordPress Hosting e Web Design sostenibile

Nel frattempo, molti fornitori di hosting WordPress si stanno unendo e si affidano alle energie rinnovabili. Perché una cosa è chiara: l'hosting WordPress consuma energia e causa notevoli emissioni di CO₂. Su Raidboxes , la sostenibilità e la protezione 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 un sacco di risorse. Raidboxes contrasta questo - con un hosting WordPress positivo per il clima.

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

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

2. design e web design sostenibile

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ò 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

Vi ho già parlato dei vantaggi di un'usabilità ben pianificata. Un'esperienza utente ben funzionante aiuta voi e i tuoi clienti a rendere il vostro 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 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 vengono 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. stiluppo e web design sostenibile

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. Puoi scoprire 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 tuoi 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 concise e facili da capire, e i consigli per migliorare la velocità della pagina 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 che conosco da Google Tools 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à.

Webpagetest è uno strumento eccellente, soprattutto per gli sviluppatori, perché va in grande dettaglio. È possibile testare da diversi preset. Dal "Simple Testing" alle "Advanced Settings", che permettono di escludere vari componenti del vostro sito web, o per essere più precisi, di aggiungerli tramite snippet di codice, e allo stesso tempo consegnare un Google Lighthouse Report, 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 si è impegnata fin dall'inizio per un WordPress sostenibile. Vedi, tra gli altri, i nostri consigli su WordPress & sostenibilità e sui negozi online verdi. Vuoi prenderti più responsabilità da solo? 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 i temi è fuori questione, è possibile migliorare le prestazioni di WordPress con l'aiuto di questi 10 tweaks.

Come convincere gli altri a partecipare

 In realtà, le seguenti parole chiave dovrebbero già essere sufficienti per convincere i tuoi 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 hai ancora bisogno di ulteriori argomenti, varie fondazioni offrono anche i cosiddetti badge, che potete integrare nelle pagine dei tuoi clienti.

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

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

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

Conclusione 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 più 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 la protezione dell'ambiente. L'offerta e l'acquisto di prodotti ecologici (a cui altrimenti potremmo avere meno accesso) sono anche, ovviamente, 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. I punti più importanti sono spiegati qui in paragrafi chiari e sono 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.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.