Il responsive web design è una tecnica di sviluppo dei siti web che tutti ormai dobbiamo conoscere ed utilizzare poiché la maggior parte dei clienti ci chiede di sviluppare un sito web che si adatti in maniera appropriata su tutti i dispositivi mobili. Da qualche anno a questa parte il responsive design ha scombussolato il modo di progettare dei web designer poiché fino ad allora eravamo abituati a pensare ad un’unica risoluzione, di solito quella di 960px senza preoccuparci di altro. Con il RWD il nostro lavoro è diventato più difficile perché dobbiamo considerare tantissimi altri elementi legati a loro volta a concetti e principi che vanno attuati per step.
Differenze tra layout fluido e layout fisso
Il primo step è proprio quello di impostare un layout o una griglia in modo fluido e vediamo perché cominciando a parlare dal layout fisso. Il layout fisso di 960px ci permette un maggior controllo del layout del sito ma presenta notevoli svantaggi. Se visualizziamo il sito web che ha un layout fisso di 960px in uno schermo di dimensioni più piccole di questo, compare la fastidiosissima e bruttissima barra di scorrimento orizzontale. Se invece lo visualizziamo in uno schermo più grande come quello degli Imac, visualizzeremo un sito così piccolo e circondato da tantissimo spazio bianco che ci servirebbe una lente d’ingrandimento per riuscire a navigare il sito stesso.
l layout fluido invece ci permette di superare questi problemi. Il layout fluido è quel layout realizzato con dimensioni in percentuali e non in pixel e ciò fa si che sia più malleabile proprio perché si adatta in percentuale alla risoluzione del video che lo visualizza. Facciamo un esempio pratico: abbiamo un header di dimensione 100%, un contenitore generale costituito a sua volta da una box del 60% ed una sidebar del 30% separati da un margine del 10%. Questo fa si che, indipendente dallo schermo che sia di 1440px o di 768px, la larghezza degli elementi che lo compongono si adatteranno appropriatamente. E questo è il primo step più importante per cominciare a realizzare un sito web responsive.
In ogni caso non è detto che il layout fluido sia necessariamente quello da utilizzare poiché nella progettazione di un sito web ci sono sempre tante variabili da considerare e quindi bisogna valutare anche la possibilità di utilizzare un layout ibrido conservando alcune parti fisse ed altre fluide. La mia esperienza personale, mi porta a dire che però il layout fluido è un’ottima soluzione per la maggior parte dei siti web e quindi utilizzabile nella maggior parte dei case, ma certo è sempre necessario valutare sempre il vostro obiettivo finale.
Se sei interessato a convertire un layout fisso in uno responsive leggi questo articolo!
Ems invece dei pixel!
Nella realizzazione del layout fluido dobbiamo tenere conto anche di altri elementi che completano un sito web e che sono il testo e le immagini. Per quanto riguarda il testo, è importante utilizzare la misura relativa degli ems invece dei pixel. Dichiarando la dimensione del carattere del vostro corpo in percentuale, si fornisce una base flessibile, da cui è possibile ridimensionare il testo verso l’alto o verso il basso con unità relative come l’ em. Impostando la dimensione del carattere sul corpo al 100 % vuol dire che la dimensione del testo relativa di 1 em è pari a 16px, la misura di default della maggior parte dei browser. Gli ems essendo una misura relativa fanno si che anche il testo si adatti alla dimensione dello schermo visualizzato. Inoltre se vogliamo cambiare successivamente la dimensione del font, mentre con i pixel dobbiamo modificarlo in ogni parte del sito web, con gli ems è sufficiente cambiarlo nel body ed una sola volta poiché tutti gli altri font si adatteranno proporzionalmente.
Dobbiamo anche considerare la non scalabilità dei pixel in IE nei browser più vecchi e a differenza degli altri browser come Chrome o Mozilla che danno la possibilità di zoommare la pagina e quindi anche il testo. In IE il font settato in pixel rimane nella stessa dimensione e a volte è difficilmente leggibile danneggiando la accessibilità del sito poiché molti utenti per problemi alla vista non riescono ad accedere ai contenuti. Anche gli ems però presentano un piccolo svantaggio che è quello di dover considerare il contesto in cui si trovano se vogliamo mantenere un testo reattivo, cioè che si adatti ai nostri contenuti in misura proporzionale rispetto al contesto. Dobbiamo quindi utilizzare la formuletta introdotta da Ethan Marcotte nel suo famoso articolo sul Responsive web design:
TARGET/CONTENUTO=RISULTATO
per cui se ho un h1 di 24px devo effettuare la seguente operazione:
16/24=0.6666666em
Per superare questo piccolo inconveniente è stata introdotta l’unità relativa del testo espressa in rems (root em) che si ridimensiona in modo relativo alla dimensione dell’elemento dell’elemento radice, l’html, invece che del corpo. La differenza tra ems e rems sta nel fatto che è possibile ridimensionare il testo del vostro intero contenuto nel contesto dell’elemento radice, non nel contesto del suo contenitore. Io vi consiglio, visto che il supporto non è ancora elevato di utilizzare gli ems e di utilizzare la formuletta sopra che dopo un po’ di tempo diventa abbastanza intuitiva e semplice da applicare. Tutto questo ragionamento sul testo vale anche per l’interlinea e cioè lo spazio che divide un rigo di testo da un altro. Tenendo conto di questi elementi possiamo già costruire un layout fluido e vedere come questo tipo di layout sia la base per la realizzazione di un sito web responsive poiché:
- si restringe senza fare alcun danno fino ad una risoluzione di circa 780px accontentando gli utenti che utilizzano dispostivi con questa risoluzione;
- si allarga fino ad una risoluzione di 1280px
e questo significa che accontenta gran parte degli utenti senza aver neppure utilizzato le media queries. Nel mio esempio ho realizzato un layout fluido con i seguenti elementi:
- header
- contenitore principale
- sidebar
- footer
tenendo conto delle seguenti regole.
- Ho settato il contenitore generale in dimensione percentuale;
- tutto quello che contengono questi contenitori viene fluttuato a destra o sinistra a seconda del caso sempre con dimensione in percentuale se invece c’è un solo elemento lo potete posizionare al centro;
- il testo viene settato in ems
- le immagini sono inserite in dimensione percentuale e con il max-width:100%
Provate a restringere il browser e noterete che il layout fluido è un ottimo punto di partenza del nostro sito web responsive. Tutti gli elementi contenuti si restringeranno in maniera appropriata fino ad un certo punto, ed è a quel punto che dobbiamo intervenire con le media queries. La stessa cosa per risoluzioni più grandi. La mia conclusione è che se adotti il layout fluido nella progettazione di un sito web sei al 60% del tuo sito responsive e ti serviranno innanzitutto le media-queries e altri piccoli accorgimenti per ottenere il tuo sito web responsive.
Sei d’accordo con me? Cosa ne pensi? Quale layout utilizzi nella progettazione dei siti web?
Dillo nei commenti!
