Come si accennava nella lezione precedente, la chiave per ottenere un layout realmente flessibile e adattabile consiste nell'utilizzo di unità di misura relative. Gli elementi che compongono la pagina dovranno adattarsi in modo naturale a una vasta gamma di device e risoluzioni di schermo.
Sul nostro sito abbiamo usato per il container una larghezza pari al 95%. In tal modo l'elemento occuperà sempre il 95% dello spazio disponibile, a prescindere dalla larghezza dello schermo. Passando su un iPhone da orientamento portrait a landscape otteniamo questo:
Se avessimo usato come dimensione 320px, passando alla modalità landscape, quando lo schermo è largo 480px, avremmo invece ottenuto questo risultato:
Che non è propriamente quanto desideriamo.
Immagini fluide
Se per il dimensionamento degli elementi HTML possiamo giocare con le unità di misura e ottenere la fluidità che desideriamo, ci sono oggetti che per loro natura hanno dimensioni fisse. Parliamo di immagini, video, filmati Flash, etc. In un contesto responsive questo non va bene. Anche le immagini devono essere fluide, anche le immagini devono adattarsi.
Per fortuna una soluzione esiste. Per avere immagini fluide e adattive rispetto al contesto in cui sono inserite ricorriamo ad una semplice regola CSS:
img {max-width: 100%;}Impostando questa regola, la dimensione orizzontale di un'immagine sarà sempre pari a quella dell'elemento che la contiene. Il contenitore si restringe? L'immagine si restringe con lui. E viceversa. Tutte le immagini che troviamo sulla home page de "Il Viaggio" hanno max-width: 100%, il logo, le immagini dello slideshow, quelle che illustrano gli articoli:
#logo img {max-width: 100%;}
article img {max-width: 100%;}
.flexslider img {max-width: 100%;}Quando si usa questa tecnica l'unica accortezza da avere è quella di usare immagini sufficientemente grandi e adeguate a tutte le dimensioni che il layout può raggiungere. Se l'immagine è troppo piccola ad un certo punto potrebbe infatti risultare sgranata.
Immagini adatte per ogni dispositivo
Con la tecnica del max-width: 100% risolviamo solo una parte dei problemi posti dalle immagini in un contesto responsive. Rimane una seconda questione: se responsive design significa adattamento automatico all'ambiente d'uso del sito, allora dovremmo fare in modo di servire immagini ad hoc a seconda dei dispositivi e delle loro caratteristiche. In pratica: perché far scaricare a chi usa uno smartphone un'immagine ad altissima risoluzione di 500kb e 1300x700px quando lo schermo non supera, per dire, i 480px? Usando max-width: 100% potremo adeguare l'immagine al layout, ma rimane il problema dello 'spreco' di banda e quindi del 'peso' dell'immagine.
Come abbiamo evidenziato nell'articolo Immagini flessibili, le tecniche elaborate per risolvere il problema sono diverse. Essendo la questione complessa e complicata da tanti fattori concorrenti, però, ad oggi nessuna di queste tecniche può considerarsi perfetta e definitiva. Per una disamina approfondita sul tema non si può prescindere dalla lettura di una serie di post sul blog di Jason Grigsby.
Per il nostro sito abbiamo scelto di servire immagini ad hoc usando il servizio Sencha.io Src. Al momento è la tecnica di più semplice implementazione e il servizio è gratuito per utenti singoli. La documentazione ufficiale spiega tutti i passi da compiere. Qui ci limitiamo a illustrare la configurazione che abbiamo usato per "Il Viaggio".
Sencha.io Src non fa altro che individuare il device con cui si accede al sito per poi servire un'immagine adatta in termini di dimensioni e peso. Pertanto, sui nostri server mettiamo le immagini ad alta risoluzione, pensa poi Sencha a fare il lavoro di ridimensionamento.
Il procedimento è tutto meno che complicato, basta configurare nel modo giusto l'attributo src per le immagini nel codice HTML:
<img src="http://src.sencha.io/http://html.it/ilviaggio/pompieri.jpg">Tutto quello che c'è da fare è inserire prima dell'url dell'immagine che risiede sui nostri server (http://html.it/ilviaggio/pompieri.jpg), il prefisso http://src.sencha.io/. Null'altro, per la configurazione di base.
Volete verificare? Aprite la demo, salvate la prima immagine, quella con i pompieri, sul vostro PC, verificate peso e dimensioni. Ora aprite la demo con uno smartphone (noi abbiamo usato un iPhone), salvate la stessa immagine, verificate anche stavolta peso e dimensioni.
Video fluidi
Un discorso analogo a quello appena visto per le immagini può essere fatto per i video.
Rendere fluidi questi elementi quando li incorporiamo con il tag HTML5 video è semplicissimo:
video {max-width: 100%; height: auto;}Ci viene ancora una volta incontro max-width: 100%, bastano i CSS.
Più problematico è lo scenario quando si incorporano video da servizi come YouTube o Vimeo. L'embded, infatti, avviene attraverso un iframe, un fattore che complica non poco le cose. Ad oggi la soluzione più comoda, quella che abbiamo usato su "Il Viaggio", è ricorrere ad un piccolo plugin per jQuery, FitVids.
La configurazione, una volta caricato lo script, è semplice:
<script src="assets/js/jquery.fitvids.js"></script>
<script>
$("article.post").fitVids();
</script>
<!-- Fine FitVids -->Si individua l'elemento (article.post) che ospita il video (in realtà l'iframe) e si inizializza il tutto con il metodo fitvids().
Lo script ha purtroppo dei problemi noti su Internet Explorer 9, pare dovuti alla configurazione del browser in particolari condizioni. Sul browser di Microsoft vedrete probabilmente uno spazio bianco al posto del video. Abbiamo comunque lasciato tutto al suo posto solo per affrontare la problematica dei video fluidi con un esempio che è possibile del resto fruire con altri browser.
