{"id":415,"date":"2013-10-24T09:29:49","date_gmt":"2013-10-24T07:29:49","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/web-design-sostenibile\/"},"modified":"2013-10-24T09:29:49","modified_gmt":"2013-10-24T07:29:49","slug":"web-design-sostenibile","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/web-design-sostenibile\/","title":{"rendered":"Web Design Sostenibile"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2013\/10\/n83carboneweb.png\" border=\"0\" align=\"left\" \/>Un numero crescente di industrie sta cercando di ridurre o almeno limitare la propria carbon footprint e il proprio uso dell&#8217;energia. Sono stati creati degli standard per le emissioni per i settori <a href=\"http:\/\/www.epa.gov\/otaq\/carlabel\/index.htm\">automotive<\/a>, per l&#8217;<a href=\"http:\/\/www.usgbc.org\/leed\">edilizia<\/a> e addirittura per le <a href=\"http:\/\/www.greentouch.org\/\">telecomunicazioni<\/a>. Ci\u00f2 nonostante la carbon footprint di internet \u00e8 fuori controllo: un&#8217;impressionante quantit\u00e0 annua di emissioni di CO<sub>2<\/sub> pari a <a href=\"http:\/\/www.sciencedaily.com\/releases\/2013\/01\/130102140452.htm\">830 milioni di tonnellate<\/a>, un numero maggiore di quello dell&#8217;<a href=\"http:\/\/www.atag.org\/facts-and-figures.html\">intera industria dell&#8217;aviazione<\/a>. Si stima che questa quantit\u00e0 <a href=\"http:\/\/www.theclimategroup.org\/what-we-do\/publications\/SMART2020-Enabling-the-low-carbon-economy-in-the-information-age\/\">raddoppier\u00e0 entro il 2020<\/a>.<\/p>\n<p>\u00c8 ora che i web designer si uniscano alla causa.<\/p>\n<p>Proprio ora, almeno 332 milioni di tonnellate di CO<sub>2<\/sub> &#8211; <a href=\"http:\/\/www.sandvine.com\/news\/global_broadband_trends.asp\">il 40% dell&#8217;impronta totale di internet &#8211; ricade almeno in parte sotto la responsabilit\u00e0 delle persone che creano il web. Non doveva essere cos\u00ec grande, ma con i caroselli di immagini a rotazione, le immagini ad alta risoluzione e molto altro, abbiamo creato dei siti che richiedono un quantitativo di energia sempre maggiore per anni, creando dei mostruosi siti <\/a><a href=\"http:\/\/it.wikipedia.org\/wiki\/High_Mobility_Multipurpose_Wheeled_Vehicle\">HUMVEE<\/a> che avrebbero potuto essere sostituiti benissimo da ibridi slanciati o, meglio ancora, da biciclette.<\/p>\n<p>La buona notizia \u00e8 che abbiamo svariati metodi per sistemare i siti web obesi e attaccare contemporaneamente la carbon footprint del nostro settore, metodi che vanno d&#8217;accordo con le buone pratiche di business: il design mobile-ready richiede un approccio attento e attento al design della pagina e metriche per il ROI del web sempre pi\u00f9 sofisticate stanno gi\u00e0 guidando le aziende a scegliere di realizzare siti pi\u00f9 veloci e pi\u00f9 leggeri.<\/p>\n<p>Prima di addentrarci nella sostanza, diamo prima un&#8217;occhiata alla footprint stimata di un sito web.<\/p>\n<div class=\"paragrafo\">\n<h2>Cos&#8217;\u00e8 la carbon footprint di un sito web?<\/h2>\n<p>Proprio come facciamo riferimento all&#8217;uso dell&#8217;energia di un&#8217;auto in termini di km al litro, possiamo pensare all&#8217;uso dell&#8217;energia di un sito web in termini di quantit\u00e0 di dati scaricati. Questo, a sua volta, ci d\u00e0 un framework in cui individuare la relazione tra la dimensione di pagina e la carbon footprint. Sfortunatamente, trovare la carbon footprint di un sito \u00e8, nel migliore dei casi, un compito impreciso e difficile. Ecco il mio tentativo:<\/p>\n<ul>\n<li>Un paper del 2008 del <a href=\"http:\/\/evanmills.lbl.gov\/commentary\/docs\/carbonemissions.pdf\">Lawrence Berkeley National Laboratory<\/a> suggerisce che ci vogliono <a href=\"http:\/\/en.wikipedia.org\/wiki\/Kilowatt_hour\">13kWh<\/a> per trasmettere 1GB.<\/li>\n<li>Secondo i <a href=\"http:\/\/www.epa.gov\/cleanenergy\/energy-resources\/calculator.html\">calcoli di EPA<\/a>, l&#8217;impianto elettrico medio degli USA emette 1,2 libbre di diossido di carbonio equivalente (detto <a href=\"http:\/\/www.woodlandtrust.org.uk\/en\/why-woods-matter\/woods-carbon\/Pages\/what-does-CO2e-mean.aspx#.Ufv-VWSG0ow\">CO<sub>2<\/sub>e<\/a>) per kWh prodotto (altre nazioni hanno medie pi\u00f9 alte o pi\u00f9 basse a seconda della loro politica energetica).<\/li>\n<li> Se moltiplichiamo 13kWh per 1,2 libbre, otteniamo 15,6 libbre di CO<sub>2<\/sub>e, solo per trasferire 1GB di dati.<\/li>\n<li>Se un milione di utenti scaricasse ciascuno una pagina tipica, che ora <a href=\"http:\/\/httparchive.org\/interesting.php\">si aggira sugli 1.4MB<\/a>, abbiamo un totale di 1,367GB di dati.<\/li>\n<li> A 15,6 libbre per gigabyte, abbiamo pi\u00f9 di 10 tonnellate di CO<sub>2<\/sub>e. <\/li>\n<li> I dati mobile, facendo affidamento sulle reti <a href=\"http:\/\/ieeexplore.ieee.org\/xpl\/login.jsp?tp=&amp;arnumber=6082509&amp;url=http%3A%2F%2Fieeexplore.ieee.org%2Fxpls%2Fabs_all.jsp%3Farnumber%3D6082509\">3G\/4G<\/a>, inquinano cinque volte tanto: 77 libbre di CO<sub>2<\/sub> per gigabyte.<\/li>\n<li>Se un milione di utenti mobile sul 3G scaricasse una pagina da 1.4MB, avremmo 1,367GB per 77 libbre, per un totale di 52 tonnellate di CO<sub>2<\/sub>.<\/li>\n<\/ul>\n<p>Basandoci su queste stime, possiamo dedurre che un sito <a href=\"https:\/\/www.quantcast.com\/tumblr.com\">della dimensione di Tumblr<\/a>, con 183 milioni di pageview al giorno, di cui circa il 10% \u00e8 su mobile, ha il potenziale di essere responsabile per un&#8217;impressionante emissione giornaliera di 2600 tonnellate di CO<sub>2<\/sub>.<\/p>\n<p>Questo non prende in considerazione importanti fattori come la quantit\u00e0 di elettricit\u00e0 del data center che proviene da fonti rinnovabili o da combustibili fossili o dall&#8217;uso dell&#8217;elettricit\u00e0 dell&#8217;utilizzatore finale, ciascuna delle quali potrebbe influenzare significativamente il totale. Ma questi numeri ci danno un framework per vedere la relazione tra la dimensione di pagina e la carbon footprint e rendono chiaro che tagliare i gigabyte fa risparmiare CO<sub>2<\/sub>.<\/p>\n<p>Qual \u00e8 il primo posto da sfoltire? Il design.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Ridurre la CO<sub>2<\/sub> riducendo la dimensione di pagina<\/h2>\n<p>Con gli attuali 1.4MB, la pagina media di oggi \u00e8 <a href=\"http:\/\/www.websiteoptimization.com\/speed\/tweak\/average-web-page\/\">15 volte pi\u00f9 grande di quello che era 10 anni fa<\/a>, principalmente per via delle immagini (881 kB) e degli script (224 kB). I siti fatti solo con il buon vecchio HTML erano di circa 54kB, ma quando \u00e8 stata l&#8217;ultima volta che avete visto un <a href=\"http:\/\/justinjackson.ca\/words.html\">sito solo in HTML<\/a>? Questa media per pagina fa inoltre fare pi\u00f9 di 100 richieste HTTP. Che carichino un piccolo oggetto o uno grande, queste aggiungono pi\u00f9 ritardo e <a href=\"http:\/\/www.mightybytes.com\/blog\/entry\/http-requests\/\">un maggior spreco energetico<\/a>. Il sito medio \u00e8 anche lento: i 2000 top retailer site di Alexa adesso impiegano in media <a href=\"http:\/\/www.webperformancetoday.com\/2013\/03\/27\/top-ecommerce-sites-are-slower-than-they-were-last-year\/\">pi\u00f9 di sette secondi per caricarsi<\/a>, molto di pi\u00f9 di quello  che gli <a href=\"http:\/\/www.websiteoptimization.com\/speed\/tweak\/psychology-web-performance\/\">utenti considerano accettabile<\/a>.<\/p>\n<h3>Pianificare il budget per un sito web snello, medio e green<\/h3>\n<p>Nessuno parte con l&#8217;intenzione di creare una pagina da 1.4MB, ma i clienti richiedono spesso delle immagini accattivanti, delle feature social complesse e molte decorazioni stilistiche. Tutto questo \u00e8 quel che ci vuole per raggiungere tale dimensione. Il modo migliore per prevenire questo tipo di obesit\u00e0 \u00e8 impostare un <a href=\"http:\/\/clearleft.com\/thinks\/responsivedesignonabudget\/\">budget per la dimensione di pagina<\/a>: cominciare con una dimensione di pagina come obiettivo e rimanere fedeli a questa.<\/p>\n<p>In <a href=\"http:\/\/madpow.com\">MadPow<\/a>, abbiamo adottato l&#8217;approccio &#8220;page size budget&#8221; per aiutarci a perseguire una migliore performance nel caricamento della pagina, con il Santo Graal del caricamento di una pagina in <a href=\"http:\/\/blogs.keynote.com\/the_watch\/2009\/09\/the-new-2-second-website-rule.html\">due secondi o meno<\/a>. Ovviamente, pi\u00f9 eliminiamo peso dalla pagina pi\u00f9 sar\u00e0 minore la carbon footprint del sito. Per tenere traccia di questo valore, moltiplico la dimensione della pagina per le analitiche sulle visite utente per arrivare a un totale approssimativo per il traffico del sito, senza dimenticare di separare il traffico mobile che inquina di pi\u00f9 e contare il caching.<\/p>\n<p>Aderire al page budget significa considerare il peso dei dati ad ogni fase del design:<\/p>\n<p><strong>Content strategy:<\/strong> se state facendo l&#8217;aggiornamento di un sito per ridurne il peso delle pagine, un rapido fix potrebbe essere quello di scambiare il contenuto con peso maggiore con delle alternative pi\u00f9 leggere, come immagini fisse al posto di un video o testo al posto delle immagini, purch\u00e9 vengano rispettati gli obiettivi sia degli utenti che dell&#8217;azienda. Meglio ancora, se usate un approccio \u201c<a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1598\">content first<\/a>\u201d, potete inserire le considerazioni sulla dimensione nella pianificazione del contenuto, per fare scelte di contenuti che siano appropriati per il pubblico e per il budget per i dati.<\/p>\n<p><strong>Interaction design:<\/strong> la fase di design riguardante la definizione dell&#8217;esperienza \u00e8 il momento perfetto per intercettare le feature che richiedono pi\u00f9 dati e che intaccano il page budget. L&#8217;onnipresente carosello \u00e8 il primo responsabile: uno tipico ha dalle tre alle sei immagini di grandi dimensioni, pi\u00f9 il JavaScript necessario per farlo muovere, che aggiunge tipicamente centinaia di kilobyte. Comunque, il <a href=\"http:\/\/www.nngroup.com\/articles\/auto-forwarding\/\">valore del carosello \u00e8 questionabile<\/a>: se dovete fare uno studio tenendo in considerazione una metrica per ridurre o rimpiazzare, fate la <a href=\"http:\/\/bradfrostweb.com\/blog\/post\/carousels\/\">Brad Frost Carousel Challenge<\/a>. Altri candidati per la riconsiderazione includono i pulsanti per condividere, le mappe embedded, i video con auto-play, Flash, le pubblicit\u00e0 e i servizi di contenuto sindacato di terze parti, che hanno tutti un notevole overhead di dati.<\/p>\n<p><strong>Visual design:<\/strong> le immagini sono le responsabili maggiori della footprint per la maggior parte dei siti (in media il 60%) e sono mature per la riduzione dei dati. Tanto per cominciare, pu\u00f2 andare bene ridurre il numero di immagini nel vostro caso? Molte immagini sul web vengono inoltre salvate nel formato sbagliato, hanno una dimensione errata o sono ottimizzate male. Servizi gratuiti come <a href=\"http:\/\/www.smushit.com\/ysmush.it\/\">smush.it<\/a> possono ottimizzare le vostre immagini in maniera migliore del vostro solito editor e possono anche fare una lavorazione a batch.<\/p>\n<p>Accorpare tutte le piccole immagini del vostro sito usando <a href=\"http:\/\/css-tricks.com\/css-sprites\/\">CSS sprites<\/a> o <a href=\"http:\/\/css-tricks.com\/flat-icons-icon-fonts\/\">web icon font<\/a> far\u00e0 risparmiare dati e richieste HTTP: le <a href=\"http:\/\/nicolasgallagher.com\/pure-css-gui-icons\/demo\/\">icone puramente in CSS<\/a> saranno l&#8217;opzione pi\u00f9 leggera quando saranno supportati da tutti i browser. E dal momento che i dati mobile inquinano molto di pi\u00f9 dei dati &#8220;wired&#8221;, assicuratevi che i siti responsive utilizzino una soluzione per immagini responsive che funziona. Una buona ottimizzazione potrebbe <a href=\"http:\/\/timkadlec.com\/2013\/06\/why-we-need-responsive-images\/\">farvi risparmiare il 72% del peso delle immagini mobile<\/a>.<\/p>\n<p><strong>Code design.<\/strong> L&#8217;ottimizzazione del front-end \u00e8 in espansione: la riduzione degli script, la compressione dei download, l&#8217;impostazione di tempi di caching appropriati e il combinare file possono tutti aiutare a ridurre l&#8217;overhead dei dati e le richieste HTTP. Per un rapido assaggio, inserite il vostro sito su <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/\">Google Page Speed<\/a>, che identificher\u00e0 quali tecniche potrebbero essere applicate per aiutare a velocizzarlo. Per un&#8217;esplorazione pi\u00f9 approfondita, raccomando la lettura di &#8220;<a href=\"http:\/\/www.webperformancetoday.com\/2013\/01\/31\/web-performance-101-developers\/\">Web Performance 101<\/a>&#8221; o del <a href=\"http:\/\/italianalistapart.com\/articoli\/87-numero-71-2-aprile-2013\/364-migliorare-ux-con-performance-front-end\">recente articolo su ALA di Lara Swanson<\/a>.<\/p>\n<p><strong>Green hosting:<\/strong> ancora prima di cominciare a ridurre al minimo la carbon footprint del vostro sito attraverso il design e l&#8217;ottimizzazione, dovreste considerare di spostarvi su un hosting green. Molti di questi sono alimentati da energie rinnovabili, particolarmente in Islanda, dove hanno aperto dei data center che sfruttano la potenza economica dell&#8217;energia geotermica. Tuttavia, il green hosting potrebbe non essere per tutti (potrebbe essere pi\u00f9 costoso e l&#8217;Islanda potrebbe essere lontana dai vostri clienti), ma stanno cominciando a spuntare degli <a href=\"http:\/\/sustainablevirtualdesign.wordpress.com\/green-hosting\/\">hosting eco<\/a>. Anche alcuni servizi cloud-based stanno diventando pi\u00f9 ecologici: Google, Apple e Rackspace prendono parte dell&#8217;energia da fonti rinnovabili, cosa non vera, secondo Greenpeace, <a href=\"http:\/\/www.greenpeace.org\/usa\/en\/campaigns\/global-warming-and-energy\/cleanourcloud\/greenaws\/\">per Amazon Web Services<\/a>.<\/p>\n<p><strong>Spostare il resto:<\/strong> anche dopo aver applicato un lean design, l&#8217;ottimizzazione e aver spostato il sito su un hosting green, il vostro sito avr\u00e0 ancora una carbon footprint. Per calcolare anche questa, potete comprare un offset, che costa tipicamente 19$ a tonnellata, <a href=\"http:\/\/www.offsetconsumer.org\/providers\/\">a seconda del progetto<\/a>. L&#8217;offsetting non toglie in effetti la CO<sub>2<\/sub> dall&#8217;atmosfera ed \u00e8 un misero sostituto per la riduzione delle emissioni. Tuttavia, molti programmi hanno dei benefit aggiuntivi, come il finanziamento di programmi di istruzione nel terzo mondo o la protezione degli habitat fragili.<\/p>\n<h3>Persuadere le persone ad ottimizzare<\/h3>\n<p>Ottimizzare per ottenere minori emissioni \u00e8 equivalente a ottimizzare per la performance generale, cos\u00ec anche le aziende non green hanno molte ragioni convincenti per mettere il proprio sito &#8220;a dieta&#8221;: pagine pi\u00f9 rapide rendono <a href=\"article\/improving-ux-through-front-end-performance\">gli utenti pi\u00f9 felici<\/a>, specialmente su mobile; <a href=\"http:\/\/www.websiteoptimization.com\/speed\/tweak\/psychology-web-performance\/\">convertono meglio<\/a> e hanno anche <a href=\"http:\/\/googlewebmastercentral.blogspot.com\/2010\/04\/using-site-speed-in-web-search-ranking.html\">un SEO migliore<\/a>.&lt;<\/p>\n<p>Aggiungere i benefici climatici a quella lista rende importantissimo ridurre la dimensione di pagina e i dati, specialmente per le aziende che sono gi\u00e0 attente ai cambiamenti climatici (come quelle che hanno firmato la <a href=\"http:\/\/www.ceres.org\/bicep\/climate-declaration\">Climate Declaration<\/a>).<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Internet come eroe del clima<\/h2>\n<p>Nonostante la sua enorme carbon footprint, internet potrebbe addirittura contribuire a salvare il clima. La transizione delle vecchie industrie e dei vecchi servizi su internet pu\u00f2 potenzialmente far risparmiare <a href=\"http:\/\/www.smart2020.org\/publications\/\">otto miliardi di tonnellate di CO<sub>2<\/sub> entro il 2020<\/a>, molto pi\u00f9 che la compensazione delle 1,4 miliardi di tonnellate previste per l&#8217;impronta di internet.<\/p>\n<p>Ad esempio:<\/p>\n<ul>\n<li>Il teleconferencing ha gi\u00e0 ridotto i viaggi di lavoro del <a href=\"http:\/\/www.slideshare.net\/blake\/why-cleanweb-will-beat-cleantech\">30%<\/a>.<\/li>\n<li>L&#8217;home sharing (come AirBnB) \u00e8 <a href=\"http:\/\/www.fastcoexist.com\/1679964\/whats-the-future-of-the-sharing-economy\"> del 66% pi\u00f9 efficiente che stare in hotel<\/a>.<\/li>\n<li>I servizi di car sharing fanno ridurre il numero delle auto sulle strade, dal momento che <a href=\"http:\/\/www.zipcar.com\/is-it\/greenbenefits\"> ci sono circa 20 auto regolari per ogni macchina in car sharing<\/a>, secondo ZipCar. <\/li>\n<li><a href=\"http:\/\/meshing.it\/\">Meshing.it<\/a>, la directory della sharing economy, elenca ulteriori 8.000 startup, tutte concentrate sulla condivisione del possesso nelle comunit\u00e0, riducendo cos\u00ec i consumi.<\/li>\n<\/ul>\n<p>Man mano che proseguiamo verso un economia online, tuttavia, daremo presto il benvenuto a <a href=\"http:\/\/www.cnn.com\/2013\/04\/15\/tech\/web\/eric-schmidt-internet\">cinque miliardi di nuovi utenti<\/a> su internet. Al crescere del peso di internet nell&#8217;inquinamento che produce i cambiamenti climatici, corrisponde la responsabilit\u00e0 di quelli che lo architettano. Ma creando &#8220;lean and clean&#8221;, possiamo ridurre il danno e rendere i clienti pi\u00f9 felici e le aziende pi\u00f9 ricche.<\/p>\n<p>Forse siamo condizionati ed inquadriamo come sacrifici le scelte ambientaliste, ma non \u00e8 cos\u00ec con il web. Possiamo avere dei siti web pi\u00f9 puliti e pi\u00f9 green rendendo comunque pi\u00f9 felici gli utenti e migliorando la linea di base. Sebbene il problema possa sembrare grande, come vi direbbe un qualunque dietologo, qualsiasi piccolo cambiamento conta. Perch\u00e9 non cominciare?<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Conoscete la carbon footprint del vostro sito web? O come ridurla? Si sono decise le emissioni standard per il settore automotive, per le costruzioni e per il settore delle telecomunicazioni, ma la carbon footprint di internet continua ad essere fuori controllo: un numero impressionante di emissioni, ben 830 millioni di COsub2\/sub all&#8217;anno, di pi\u00f9 dell&#8217;intero settore dell&#8217;aviazione. Almeno il 40% di questa cifra \u00e8 parzialmente responsabilit\u00e0 di chi crea i siti web. \u00c8 ora che i web designer facciano la loro parte. James Christie spiega come snellire i siti e simultaneamente ridurre la carbon footprint usando metodi che si inseriscono bene con le buone pratiche del business e con il design future-friendly.<\/p>\n","protected":false},"author":818,"featured_media":7000714,"comment_status":"open","ping_status":"open","template":"","categories":[269,100,257],"tags":[],"coauthors":[403],"class_list":["post-415","article","type-article","status-publish","has-post-thumbnail","hentry","category-application-development","category-numero-83-24-ottobre-2013","category-stato-del-web"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000714"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=415"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}