Responsive design: come gestire layout, tipografia ed elementi multimediali?
Nella precedente lezione, abbiamo realizzato una pagina responsive attraverso la quale abbiamo analizzato il layout e le media queries offerte dal codice CSS3. La lezione di oggi è dedicata ai contenuti: le unità di misura, la tipografia, le immagini e i video.
Unità di misura del layout
Percentuali o pixel? La scelta delle dimensioni del layout è da analizzare molto attentamente in quanto possono esserci pareri differenti riguardo l’unità di misura da adottare. Da una parte c’è chi dice che un sito responsive debba essere totalmente flessibile. Quindi è d’obbligo usare le percentuali e mai i pixel:
.inner { margin:0 auto; width:98%; } #content { width:74.5%; } #sidebar { width:23.5%; }
In questo esempio, tutte le dimensioni delle classi e degli id sono espresse in percentuale. Il layout sarà quindi totalmente adattabile a qualunque risoluzione dello schermo.
Dall’altra parte invece si nota che l’uso esclusivo dei pixel o la combinazione pixel / percentuali è un aiuto per lavorare meglio su un layout fisso del quale possiamo conoscere fin dall’inizio il comportamento dei box:
.inner { margin:0 auto; width:960px; } #content { width:560px; } #sidebar { width:360px; } .nav { margin: 0 auto; width: 90%; }
Quale delle due soluzioni adottare? Effettivamente un sito responsive dovrebbe usare le percentuali e quindi permettere un adattamento a tutte le risoluzioni degli schermi. In questo modo l’uso delle media queries ci permette di spostare i box come si vuole e di lasciare che sia lo schermo a deciderne le dimensioni in base ai valori percentuali scritti nel codice CSS. Nasce, a mio avviso, un piccolo problema.
Fino a 1200px di risoluzione dello schermo i contenuti si possono adattare e gestire senza problemi. La sidebar potrebbe essere più larga e mostrare qualche informazione (per esempio una foto) in più o il riquadro dei contenuti principali potrebbe mostrare uno slide più grande e un numero di caratteri più elevato su un’unica riga riducendo l’effetto di scrolling in verticale. Cosa fare però se lo schermo dovesse avere una risoluzione elevata (Full-HD) o decisamente elevata (Retina Display)? Gestire i contenuti a risoluzioni così elevate non è sempre facile.
La risposta che ritengo più ragionevole alla questione su quale strada intraprendere (pixel, percentuali, o entrambi) è “a seconda dei casi”. Un sito può essere progettato per essere visto a pieno schermo, e in questo caso è sicuramente doveroso usare le percentuali. Oppure pensato per lo scrolling in verticale, e in questo caso è possibile usare le dimensioni fisse con o senza l’uso delle percentuali.
Tipografia
Altro aspetto da non tralasciare quando si progetta e si realizza un sito, in particolar modo un sito responsivo, è la tipografia.
Unità di misura
L’unità di misura da adottare su un sito responsivo (ma anche non) deve essere sempre quella relativa e mai fissa. Quindi la dimensione dei font deve essere espressa in em. Questo perché il px, l’unità di misura del display, è un’unità di misura fissa; l’em invece è un’unità di misura relativa che si adatta al dispositivo utilizzato. Quindi per il body possiamo impostare il font-size al 100%.
body { font-size: 100%; }
Per tutti gli altri testi, dai titolo ai paragrafi, dobbiamo invece usare gli em.
p { font-size: .7em; } h1 { font-size: 1.2em; } h2 { font-size: 1em; }
Utilizzando questa soluzione sarà sufficiente variare la dimensione del font-size nel body per modificare gli altri testi.
I Font Family
La scelta dei font su un sito responsive è la parte più delicata. I font disponibili su PC sono molti più numerosi rispetto agli smartphone, alcuni dei quali hanno giusto un font per ogni famiglia generica (sans-serif, serif, monospace).
h1 { font-family:Arial, Helvetica, sans-serif; }
Molto probabilmente uno smartphone equipaggiato con un sistema Android non visualizzerà il titolo h1 in Arial nè in Helvetica ma in Droid Sans. Come risolvere il problema?
Il CSS3 e vari servizi, come Google Web Fonts, ci hanno permesso di integrare nel sito font non installati sui dispositivo. Questa soluzione è molto comoda ma solo se si dispone di una connessione velocissima e senza limiti. Con gli smartphone e con i tablet non è molto praticabile.
Il progetto potrebbe complicarsi, visto che scegliere un font adeguato alla comunicazione del sito non è mai facile. In un sito responsive si potrebbe quindi decidere di usare due font differenti: uno specifico e personalizzato per i PC, ed uno generico per i dispositivi mobile.
@media only screen and (min-width: 321px) and (max-width: 1024px) { h1 { font-family:Arial, Helvetica, sans-serif; } } @media only screen and (min-width: 1025px) { @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } h1 { font-family: 'BebasNeueRegular'; } }
Elementi multimediali
Riprendiamo il layout che abbiamo realizzato nella terza lezione.
Avevamo aggiunto sotto la barra di navigazione un’immagine che si adattava allo schermo grazie all’uso dell’istruzione background-size:containt;. Oggi vediamo in dettaglio come realizzare immagini responsive per il nostro sito, sostituiamo l’immagine grande sotto l’header con uno slider e aggiungiamo anche un video. Il tutto in maniera responsiva.
Come rendere le immagini responsive?
Ci sono, teoricamente, quattro possibilità per rendere le immagini responsive: l’istruzione object-fit del CSS3, il tag picture dell’HTML5, il tag figure dell’HTML5 appoggiato da jQuery ed infine una tecnica che utilizza il max-width del CSS2.
Iniziamo dal CSS3:
img { height: 100%; object-fit: contain; width: 100%; }
Con il codice sopra riportato adattiamo le immagini ai loro contenitori grazie a object-fit: contain. Questa è una possibile soluzione facile da implementare ma comporta un enorme spreco di risorse per chi naviga in mobile, in quanto l’immagine originale deve essere di buona qualità. Inoltre l’object-fit è fruibile solo da pochi browser (in particolare Opera 10.6+, e a breve da Firefox 18+ e Chrome 24+).
Il W3C ha proposto come possibile soluzione un nuovo tag da aggiungere all’HTML5, picture, che consentirà di includere più immagini, mostrando quella più adatta al dispositivo.
<picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture>
Questa soluzione è però solo una bozza e richiederà un po’ di tempo prima che venga completata e accolta dalle software house.
La terza soluzione alla quale possiamo ricorrere comprende il tag figure dell’HTML5 e il plugin jQuery Picture.
Il codice da riportare nella pagina HTML5 è:
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea"> <noscript> <img src="assets/images/large.png" alt="A Half Brained Idea"> </noscript> </figure>
Possiamo notare, nel codice dell’esempio, l’utilizzo di quattro immagini differenti, una per ogni tipologia di risoluzione, con l’immagine large.png resa predefinita.
mentre il codice che inizializza il plugin è
$(function(){ $('figure.responsive').picture(); });
jQuery Picture può essere utilizzato anche con il tag picture discusso in precedenza:
<picture alt="A Half Brained Idea"> <source src="assets/images/small.png"> <source src="assets/images/medium.png" media="(min-width:440px)"> <source src="assets/images/large.png" media="(min-width:600px)"> <noscript> <img src="assets/images/large.png" alt="A Half Brained Idea"> </noscript> </picture>
e per inizializzare il plugin:
$(function(){ $('picture').picture(); });
L’ultima soluzione è disponibile utilizzando istruzioni già presenti in CSS2:
.box_immagine { width:90%; /* il contenitore prende il 90% della pagina */ } .box_immagine img { height: auto; max-width: 100%; /* fai espandere l'immagine fino a riempire il contenitore e non oltre */ width: auto; }
Come per l’object-fit, anche in questo caso si ripete il problema del peso dell’immagine. A favore invece ci sono compatibilità con i browser e facilità di implementazione.
Dei quattro esempi, le migliori soluzioni sono le ultime due, quindi: il plugin jQuery Picture e le dimensioni relative dell’immagine (height, max-width, e width). Entrambi sono facili da implementare. jQuery Picture permette un risparmio di banda ma richiede JavaScript e il ritaglio di quattro immagini. Il CSS2 consuma più banda ma è immediato e funziona anche con JavaScript disabilitato.
Slider responsivo
Miglioriamo il nostro tema aggiungendo uno slider responsivo. Ho scelto ResponsiveSlides in quanto molto veloce e altamente compatibile, anche con Internet Explorer versioni 6,7,8. Dopo aver scaricato il plugin dal sito e scelto alcune immagini (possiamo anche usare quelle fornite dallo sviluppatore del plugin), installiamolo sul sito.
Il plugin
<script src="responsiveslides.js"></script>
La lista delle immagini
<ul> <li><img src="slider_1.jpg" alt="Testo alternativo" /></li> <li><img src="slider_2.jpg" alt="Testo alternativo" /></li> <li><img src="slider_3.jpg" alt="Testo alternativo" /></li> <li><img src="slider_4.jpg" alt="Testo alternativo" /></li> </ul>
Attivazione dello slider
<script> $(function () { $(".rslides").responsiveSlides(); }); </script>
Le istruzioni CSS
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
Et voilà… abbiamo installato il nostro slider!
Video responsivo
Infine condividiamo sul nostro sito responsive un video pubblicato su YouTube o su Vimeo. Come adattarlo? Le soluzioni non sono moltissime e presentano ancora qualche difetto di gioventù soprattutto quando lo schermo è troppo piccolo. La soluzione al momento migliore è offerta da fitvids.js, un plug-in jQuery semplice e veloce da installare pensato proprio per il responsive.
Il plugin
<script src="fitvids.js"></script>
Il video da condividere
<div> <iframe width="1280" height="720" src="https://www.youtube.com/embed/oF_dXUkRWrE" frameborder="0" allowfullscreen></iframe> </div>
Anche se le dimensioni del video vengono definiti nel codice html, lo script che segue richiama la funzione fitVids indicando dove si trova il video indicando le nuove dimensioni.
<script> $("#content").fitVids(); </script>
Nell’esempio puoi vedere come il video si adatta al ridimensionamento del browser.
Conclusioni
Con la lezione di oggi abbiamo migliorato la nostra pagina con uno slider di immagini e con un video. Il tutto responsivo.
Cosa manca per completare il percorso che abbiamo affrontato sul responsive design? I test, utili a capire il comportamento del layout della nostra pagina responsive con i vari dispositivi. Nella prossima ed ultima lezione affronteremo questa parte.
24 commenti
Trackback e pingback
[...] Gestione del layout, tipografia ed elementi multimediali [...]
[...] Gestione del layout, tipografia ed elementi multimediali [...]
[...] Gestione del layout, tipografia ed elementi multimediali [...]