Ieri ho partecipato ad un interessante laboratorio gratuito, all'interno del festival Supernova Creative Innovation Festival a Torino, dedicato alle immagini nel Responsive Web Design (RWD).
Cos'è il festival Supernova (di Torino)
La cupla sotto alla quale si è tenuto il Workshop
In questo fine settimanta, tra il 26 e 27 settembre 2015, si sono tenuti due giorni pregni di incontri tematici, workshop, conferenze e installazioni nella centrale Piazza Carlo Alberto, in centro a Torino dedicati a "Sintonizzare il vivace universo delle buone idee e la dimensione eterogenea della startup italiane con le aziende e le istituzioni che compongono ed animano il territorio".
Il festival continuerà il 2-3-4 ottobre a Brescia e il 15 ottobre a Kaunas in Lituania.
Il laboratorio sulle immagini nel Responsive Web Design
Andrea De Carolis
Organizzato da Modo, web agency dedicata allo sviluppo del front-end dei siti internet con sede a San Mauro Torinese, e condotto dal simpatico e preparato Andrea De Carolis, Senior Front-End Developer, il workshop a cui ho partecipato era intitolato "Cura l'immagine. Nel RWD (Responsive Web Design) le dimensioni contano."
Sessanta minuti di interessante spiegazione (e due esercizi), dedicata agli esperti del settore e in particolare agli sviluppatori di siti internet, su come realizzare e ottimizzare le immagini per la fruizione da diversi device, con monitor di dimensioni e risoluzione diversa.
Cosa ho imparato sul Responsive Web Design
Questo articolo è stato scritto senza visionare le slide del workshop, che potete trocare qui e basandomi solo sui miei appunti, per cui per comprendere nel dettaglio di cosa si è trattato date una occhiata alle diapositive.
La prefazione
Il gioco di Modo in regalo per i più cubo...si
Andrea ha introdotto il laboratorio con una veloce prefazione, in cui ci ha spiegato perchè è necessario ottimizzare e realizzare immagini di diverse dimensioni e risoluzione, al fine di venire visualizzate in maniera ottimale dai diversi dispositivi, accennando al mobilegeddom del 21 aprile scorso e all'enorme diffusione che hanno, al giorno d'oggi i device mobili, quali smartphone e tablet, e computer con monitor dalle più disparate risoluzioni e dimensioni.
Secondo archive.org, il 63% del peso (in termini di kb) dei siti internet è dovuto alle dimensioni delle immagini, e di conseguenza per velocizzare il caricamento delle pagine è necessario ottimizzare le fotografie e le illustrazioni che andremo ad inglobare nel nostro codice.
Per far questo, in termini di layout, possiamo utilizzare le media query che ci vengono fornite dal CSS3, utilizzando un layout a griglia fluida:
@media screen and (min-width: 480px) {
.logo img{background-image:url("image-small.jpg")}
}
@media screen and (min-width: 800px) {
.logo img{background-image:url("image-big.jpg")}
}
Per le immagini all'interno dei diversi articoli dovremo però intervenire utilizzando due attributi particolari del tag IMG: srcset e sizes, oppure utilizzando il tag PICTURES.
Prima di analizzare questi tag e attributi HTML5 è necessario però ricordare che, con un layout fluido, a schermo più grande/più piccolo non sempre corrisponde immagine più grande/più piccola, in quanto le proporzioni della nostra immagine cambieranno in funzione del monitor con cui vengono visualizzate.
