Quanto è sostenibile la UX per il nostro Pianeta? Che si tratti di utilizzare Internet per lavoro, per accrescimento personale o semplicemente per staccarsi dalla realtà, tutto questo ha un costo e un forte impatto ambientale. Infatti, la prima frase citata nel Sustainable Web Manifest è la seguente: ''Se Internet fosse un Paese, sarebbe il settimo più grande inquinatore'. Progettare siti web sostenibili per l'ambiente significa tenere conto di parametri come velocità, performance e usabilità: ironicamente, si tratta di caratteristiche che gli utenti in primis premiano. Quindi perchè il web contribuisce ancora così tanto alle emissioni di CO2?

1. UX E WEB
SOSTENIBILE
29/09/2023

2. “If the Internet was a country, it would be the
4th largest polluter”
https://www.sustainablewebmanifesto.com/
ITC’s total emissions from a 2021 study by Freitag et al, compared with fossil CO2
emissions by
country, using data from 2020 from the European Union’s Emissions Database for Global
Atmospheric Research (EDGAR)

4. IMAGE GOES OVER HERE
Valeria Salis
● Software developer @ SparkFabrik
● Grande passione per la musica, lo sport e per la tecnologia da
sempre.
● Nasco come backend developer, in Spark entro a far parte del
Drupal Team e passo al lato oscuro (il frontend).
● Mi porto dietro una particolare sensibilità che mi fa avvicinare
alla sostenibilità e all’accessibilità.
Contatti
● Linkedin: https://www.linkedin.com/in/valeria-salis/
● Email: valeria.salis@sparkfabrik.com

5. Di cosa parlerò oggi?
Quanto è sostenibile la UX per il nostro Pianeta?
● Qualche informazione e dato riguardanti la
contribuzione del Web in termini di inquinamento
ambientale
● Cosa si può fare per ridurre le emissioni derivanti dal
Web
● Una UX più sostenibile ha caratteristiche che
coincidono con quelle che gli utenti già si aspettano e
richiedono?

6. ● Poco meno del 4% delle emissioni di CO2
proviene dal
traffico internet
● Circa l’8% delle emissioni di CO2
proviene dal
trasporto leggero
● Soltanto il 2% delle emissioni di CO2
proviene dal
traffico aereo.
Partiamo da qualche dato

7. ● Una ricerca Google può produrre da 1 a 10 grammi di
emissioni di CO2
(*)
● In media Google elabora 47.000 ricerche al secondo
cioè 3,5 miliardi al giorno (*)
● Un sito web produce in media 1,76grammi di CO2
per ogni pagina visualizzata (*)
(*) Fonte: studio condotto da Carbon Footprint, una delle principali aziende
specializzate nel campo della sostenibilità ambientale
● Fumare una sola sigaretta emette 14 grammi di CO2
● Tenere un freezer in attività significa generare 40 gr
di CO2
all'ora.
Poi…

8. Progettare siti web sostenibili significa seguire le
caratteristiche esposte nel Sustainable Web Manifesto
CLEAN💧
EFFICIENT 🚀
OPEN 🚪
HONEST 👼
REGENERATIVE 🌱
RESILIENT 💪

9. Best practices per un sito web sostenibile
Green Web Hosting
● Principali hosting web che utilizzano energie
rinnovabili
https://www.thegreenwebfoundation.org/directory/
● Il tuo sito web è ospitato da un servizio di
hosting green?
https://www.thegreenwebfoundation.org/green-web-check/
Web Performance Optimization
● Sostenibilità = velocità 🏃
● Più tempo aspettiamo e più energia verrà
consumata

10. Best practices per un sito web sostenibile
Content findability
● L’utente dovrebbe riuscire ad arrivare alle
informazioni che sta cercando più
velocemente possibile.
Usability
● Ogni sito web dovrebbe funzionare in modo
efficiente su tutti i devices e velocità di
banda.

11. Quindi, su quali elementi posso agire per rendere il mio sito web più
sostenibile?
1. Immagini
2. Font
3. Video

12. Immagini
● Utilizziamo il formato .webp
● Le immagini Webp lossless sono il 26% più piccole rispetto ai
png
● Le immagini Webp lossy invece possono essere tra il 25 e il
34% più piccole comparate con immagini jpeg
https://developers.google.com/speed/webp/docs/compression?hl=it
Compressione lossless → non comporta
una perdita di informazioni, elimina i
metadati e i dati che non influiscono
sull’aspetto o sulla qualità dell’immagine
Compressione lossy → comporta una
perdita di informazioni che influiscono
sull’aspetto e sulla qualità dell’immagine

13. Font
I font meno impattanti sono quelli di sistema.
Per fortuna ci vengono incontro Google Fonts o Adobe Fonts.
Google Fonts ad esempio include più di 1300 font family e
mantiene più di 30 varianti ottimizzate per ogni font.

14. Font
La terza opzione sono i font custom.
Sfruttiamo comunque dei formati che garantiscano una buona
compressione come ad esempio: EOT, TTF, WOFF, WOFF 2.0.
La scelta migliore però sembra essere un mix: utilizzare meno
font e relative varianti e scegliere font più leggeri dove
possibile.

15. Video
La loro inclusione dovrebbe arricchire l’esperienza dell’utente
e non dargli fastidio.
Meglio ridurre il numero di video aggiunti e minimizzare la
singola durata al solo scopo di aggiungere qualcosa di utile per
l’utente.

16. Video & Autoplay
L’autoplay infastidisce l’utente. Sempre.
Per l’utente con disabilità:
● Può rendere difficoltoso l’ascolto e contrastare l’attività
dello screen reader nonchè la naturale navigazione
● Possono verificarsi reazioni fisiche come convulsioni
L’utente viene costretto ad abbandonare la pagina.

17. Video & Autoplay
● Rimuovere l’autoplay → uno studio del 2016 ha mostrato che
il 76% dei partecipanti avrebbe silenziato l’audio ove
possibile e, nel caso contrario, la maggioranza avrebbe
chiuso la pagina
● Aggiungere i comandi per far partire e mettere in pausa il
media
● Aggiungere opzioni di usabilità e fornire warnings per i
contenuti presenti
● Includere dei sottotitoli accessibili

18. Passare ad una UX
più sostenibile è
davvero necessario?
Spoiler: sì! 🎊
Optando per scelte sostenibili rispondiamo
indirettamente a caratteristiche che gli utenti
apprezzano e cercano in un prodotto digitale.

19. Sostenibilità VS Creatività
https://www.vw.ca/carbonneutralnet/en/ https://formafantasma.com/

20. Sì, ma come posso verificare se il mio sito è sostenibile?
https://www.websitecarbon.com/
Verifica l’impronta ecologica del tuo
sito o di un sito che ti interessa!

21. The internet should be a global public good—healthy for the
planet and for the people who use it

22. IMAGE GOES OVER HERE
Valeria Salis
● Software developer @ SparkFabrik
● Grande passione per la musica, lo sport e per la tecnologia da
sempre.
● Nasco come backend developer, in Spark entro a far parte del
Drupal Team e passo al lato oscuro (il frontend).
● Mi porto dietro una particolare sensibilità che mi fa avvicinare
alla sostenibilità e all’accessibilità.
Contatti
● Linkedin: https://www.linkedin.com/in/valeria-salis/
● Email: valeria.salis@sparkfabrik.com

23. THANK YOU!
https://joind.in/talk/daf64

24. Risorse utili e approfondimenti
● The real climate and transformative impact of ICT: A critique of estimates, trends, and regulations
● EDGAR - Emissions Database for Global Atmospheric Research
● Air travel emissions and some data
● Carbon Footprint of the Internet Over Time Since 1990
● Some more tips about images
● Why Autoplay Is an Accessibility No-No