Come realizzare un layout responsive. Differenze tra layouts

Quale layout scegliere per la realizzazione di un sito web? Qual è il layout migliore per realizzare un sito web responsive? In questo articolo discutiamo proprio delle differenze tra i tipi di layout e ti darò dei consigli per usare quello che è più adatto alla realizzazione di un sito web responsive.

Per anni abbiamo costruito siti web secondo larghezze rigide e fisse. Quella che per anni sembrava la soluzione migliore è stata in seguito soppiantata dalla comparsa sempre più massiccia di differenti risoluzioni di dispositivi;  per questo motivo la flessibilità è diventata la soluzione migliore da adottare perché fa si che il layout diventi responsive in base alle dimensioni del dispositivo.
Ci sono diversi tipi di layout: statico in pixel, liquido in ems, fluido in % ed ibrido che usa combinazioni tra i precedenti layout.
Cominciamo a vedere cosa è un layout a dimensione fissa.

DIMENSIONE FISSA

Con la dimensione fissa il layout e’ limitato da specifiche misure e di solito 960px e’ quella piu’ utilizzata. Successivamente si e’ pensato che la dimensione di 1024px fosse la soluzione ideale. I progetti con layout a 960px sono quelli piu’ comunemente utilizzati perche danno l’illusione di avere tanto controllo. Il problema dei layout a larghezza fissa e’ che se un utente ha una risoluzione inferiore’ visualizza sol una parte del sito con una barra di scorrimento oizzontale molto brutta da vedere. La stessa cosa accade per i layout piu’ grandi ed in tal caso l’utente vedra’ un sacco di spazio bianco non programmato.
Questo tipo di layout oggi non è più utilizzato proprio per la necessità di essere flessibili e per adattarci a tutti i dispositivi presenti sul mercato.

LAYOUT ELASTICI/LIQUIDI

I layout elastici sono quelli che utilizzano la dimensione relativa in em in cui 1em equivale ad 16px.
Questi tipi di layout hanno un forte controllo sulla tipografia proprio perché è possibile definire la larghezza di un contenitore solo modificando il font. Quindi un layout elastico si ridimensiona in base alla dimensione del testo dell’utente.
Ma come facciamo a sapere quanto corrisponde 1 em? di solito in tutti i browser equivale a 16 px.

Più precisamente, un’ interfaccia elastica si ridimensiona in base alla dimensione del testo del browser—solitamente di 16px—che l’utente può cambiare a suo piacimento.
Il design elastico usa valori di em per tutti gli elementi. “L’em” è una misura relativa e può essere specificata con tre cifre decimali, ad esempio: 1.063em.

“Relativo” significa che è calcolato in base alla dimensione del testo dell’elemento genitore. Per esempio, se contenitore “<div>” ha una dimensione di font calcolata di 16px ogni elemento al suo interno—un figlio— eredita la stessa dimensione del font a meno che non venga cambiata. Se la dimensione del font del figlio viene cambiata in 0.75em allora la dimensione calcolata sarà:

0.75 × 16px = 12px.

Se gli utenti incrementano (o diminuiscono) la dimensione del testo nel loro browser, l’intera interfaccia si stira (o si restringe.)
Sapendo che la dimensione del font è 16px, allora 1em = 16px. ed il tag “body” eredita questo valore se non gli viene assegnato altro; tramite CSS possiamo specificare la dimensione di qualsiasi elemento usando gli em!
Purtroppo, IE ha un problema con gli em. Ridimensionando il testo da medium (default) a large in IE5/6 avremo un aumento inaspettato nella dimensione che va oltre quella prevista. Così ci vuole un altro selettore per fare in modo che anche su IE funzioni:

html{ font-size:100%; }

Nel nostro caso per trasformare un contenitore di 960px in elastico dobbiamo fare questo ragionamento. L’elemento figlio il body ha una dimensione di 16px, per cui il nostro layout figlio ( contenitore ) erediterà lo stesso valore. Possiamo calcolare quanto vale 1px in em:

1em = 16px. Quindi, 1px = 1 ÷ 16 = 0.0625em.

Quindi moltiplichiamo per 960 per ottenere gli em:

0.0625em × 960 = 60em

Oppure possiamo fare un unico calcolo mediante la formula:

1 ÷ 16 × 960 = 60em

Il vantaggio di questi layout è che se implementati correttamente possono essere user friendly se l’obiettivo è quello di far incrementare o diminuire il testo in modo proporzionale alle preference degli utenti.
Lo svantaggio è che sono layout molto difficili da realizzare e creano grossi problemi di accessibilità creando per esempio testi e contenitori troppo piccoli.

LAYOUT FLUIDI

Nei layout fluidi le dimensioni sono determinate dalle percentuali e per questo sono molto piu’ malleabili. In questo caso non ha importanza quale dispositivo visualizza il tuo sito perche’ le larghezze di questi elementi nella pagina si riaggiusteranno automaticamente. Un design costruito su un layout fluido evita un sacco di problemi che si hanno con un layout fisso come per esempio la barra di scorrimento orizzontale poiche il sito si adatta da se in base alle dimensioni del browser; di conseguenza il design puo essre sistemato in modo migliore rispetto allo spazio disponibile.
Grazie alle media queries e allo stile è possibile realizzare soluzioni differenti in modo più semplice. Infatti un layout fluido non e’ sufficiente ad assicurare un design ottimo per ogni risoluzione.

LAYOUT IBRIDO

Il layout ibrido è quello che invece utilizza metodi combinati tra il liquido ed il fluido e fisso per esempio settando alcuni elementi della pagina fissi come la sidebar e scegliendo un altro contenitore variabile di larghezza. Ma questo tipo di layout difficilmente è usato e ha degli svantaggi. Semmai la combinazione migliore è quella tra layout liquido e fluido.

DA FLUIDO A RESPONSIVE

Da un layout fluido è semplice il passaggio per farlo diventare in responsive. Per far questo è importante inserire il tag “viewport” nell’header del sito web in modo da riferire con questo comando al browser che la larghezza del contenitore è uguale alla larghezza del dispositivo che la visualizza.
Qual è la larghezza del dispositivo che la visualizza? Il cellulare con una risoluzione di 480px e questo lo definiamo con le “media queries”. Ma prima di far questo dobbiamo vedere e capire qual è il punto in cui il design si rompe (breakpoint) cioè dove dobbiamo intervenire con la mediaquery per modificare lo stile a quella risoluzione dello schermo e far visualizzare i contenuti correttamente.

Il metodo piu’ giusto per un sito responsive dipende dal tipo di progetto che devi realizzare. Ogni approccio ha i suoi benefici e i suoi limiti. Sicuramente il layout fluido prepara una bella base che insieme al css e alle media query e’ trasformano il layout da fluido a responsive.

Personalmente preferisco utilizzare i layout fluidi che ti permettono di arrivare ad un progetto responsive ottimale.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “REALIZZARE UN LAYOUT RESPONSIVE”—

Nome *

Email *

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento