Per realizzare un sito web flessibile nel Layout e Responsive

Web design reattivo

Internet è decollato più rapidamente di quanto chiunque avrebbe previsto. Ora, negli ultimi anni, la crescita mobile è esplosa sulla scena. Anche la crescita dell’uso di Internet mobile è di gran lunga superiore a quella della crescita generale dell’uso di Internet.

In questi giorni è difficile trovare qualcuno che non possiede un dispositivo mobile, o multiplo, connesso a Internet. In Italia ci sono più telefoni cellulari rispetto alle persone e, se le tendenze dovessero continuare, l’utilizzo di Internet mobile supererà quello dell’uso di Internet desktop entro l’anno.

Con la crescita dell’utilizzo di Internet mobile, sorge la domanda su come creare siti Web adatti a tutti gli utenti. La risposta del settore a questa domanda è diventata un web design reattivo o responsive.

Panoramica cos’è Responsive

Il responsive web design è la pratica di costruzione di un sito Web adatto a funzionare su ogni dispositivo e dimensione dello schermo, non importa quanto grande o piccolo, mobile o desktop. Il web design reattivo si concentra sul fornire un’esperienza intuitiva e gratificante per tutti. Gli utenti di computer desktop e telefoni cellulari traggono tutti vantaggio da siti Web reattivi.

Per alcuni il termine responsive potrebbe non essere nuovo e altri potrebbero essere a conoscenza dei termini adattivo o mobile. Il che potrebbe farti domandare quale sia esattamente la differenza tra tutti loro.

Il web design reattivo e adattivo è strettamente correlato. Responsive generalmente significa reagire rapidamente e positivamente a qualsiasi cambiamento, mentre adattivo significa essere facilmente modificato per un nuovo scopo o situazione, come il cambiamento. Con i siti Web di design reattivo cambiano continuamente e fluidamente in base a diversi fattori, come la larghezza del viewport, mentre i siti Web adattivi sono costruiti su un gruppo di fattori predefiniti. Una combinazione dei due è l’ideale, fornendo la formula perfetta per i siti Web funzionali. Quale termine viene utilizzato specificamente non fa una grande differenza.

D’altra parte, il mobile significa generalmente costruire un sito Web separato comunemente su un nuovo dominio esclusivamente per gli utenti mobili. Anche se occasionalmente ha il suo posto, normalmente non è una grande idea. I siti Web mobili possono essere estremamente leggeri, ma presentano le dipendenze di una nuova base di codice e che possono diventare un ostacolo sia per gli sviluppatori che per gli utenti.

Attualmente la tecnica più popolare risiede nel responsive web design, favorendo il design che si adatta dinamicamente ai diversi browser e viewport del dispositivo, modificando layout e contenuti lungo il percorso. Questa soluzione ha i vantaggi di essere tutte e tre, reattive, adattive e mobili.

Layout flessibili

Il web design reattivo è suddiviso in tre componenti principali, inclusi layout flessibili, query multimediali e supporti flessibili. La prima parte, layout flessibili, è la pratica di costruire il layout di un sito Web con una griglia flessibile, in grado di ridimensionare dinamicamente a qualsiasi larghezza. Le griglie flessibili sono costruite utilizzando unità di lunghezza relativa, più comunemente percentuali o emunità. Queste lunghezze relative vengono quindi utilizzati per dichiarare valori di proprietà comune griglia come width, margini e padding.

Lunghezze relative della finestra

Il CSS3 ha introdotto alcune nuove unità di lunghezza relativa, specificamente correlate alla dimensione del viewport del browser o del dispositivo. Queste nuove unità includono vw, vh, vmin, e vmax. Il supporto complessivo per queste nuove unità non è eccezionale, ma sta crescendo. Col tempo, sembrano giocare un ruolo importante nella creazione di siti Web responsive.

Massima altezza e larghezza del viewport

Layout flessibili non sostengono l’uso di unità di misura fisse, come pixel o pollici. Il motivo è che l’altezza e la larghezza del viewport cambiano continuamente da dispositivo a dispositivo. I layout del sito Web devono adattarsi a questa modifica e i valori fissi hanno troppi vincoli.

Griglia flessibile

Vediamo come funziona questa formula all’interno di un layout a due colonne. Usando la formula della griglia flessibile possiamo prendere tutte le unità fisse di lunghezza e trasformarle in unità relative.

Prendendo il concetto di layout flessibile e riapplicandolo a tutte le parti di una griglia, verrà creato un sito Web completamente dinamico, scalabile in base alle dimensioni di ogni finestra. Per un controllo ancora maggiore all’interno di un layout flessibile, è anche possibile sfruttare i min-width, max-width, min-height, e max-heightle proprietà.

L’approccio di layout flessibile da solo non è sufficiente. A volte la larghezza di una finestra del browser può essere così piccola che persino il ridimensionamento proporzionale del layout creerà colonne troppo piccole per visualizzare efficacemente il contenuto. In particolare, quando il layout diventa troppo piccolo o troppo grande, il testo potrebbe diventare illeggibile e il layout potrebbe iniziare a rompersi. In questo caso, le query multimediali possono essere utilizzate per creare un’esperienza migliore.

Media query

Le query multimediali sono state create come un’estensione dei tipi di media che si trovano comunemente nel targeting e negli stili inclusi. Le query multimediali offrono la possibilità di specificare stili diversi per le singole circostanze del browser e del dispositivo, ad esempio la larghezza della finestra o l’orientamento del dispositivo. Essere in grado di applicare stili mirati in modo univoco apre un mondo di opportunità e sfrutta il web design reattivo.

Ogni media query può includere un tipo di media seguito da una o più espressioni. Tipi di supporto più comuni includono all, screen, print, tv, e braille. La specifica HTML5 include nuovi tipi di media, anche inclusi 3d-glasses. Se non si specifica un tipo di supporto, la query multimediale imposterà automaticamente il tipo di supporto screen.

L’espressione della query multimediale che segue il tipo di supporto può includere caratteristiche e valori dei supporti diversi, che vengono allocati come veri o falsi. Quando una funzione multimediale e un valore vengono allocati su true, vengono applicati gli stili. Se la funzione multimediale e il valore vengono allocati su false, gli stili vengono ignorati.

Quando si crea un sito Web reattivo, è necessario adattarlo a una serie di dimensioni delle finestre diverse, indipendentemente dal dispositivo. I punti di interruzione dovrebbero essere introdotti solo quando un sito Web inizia a rompersi, apparire strano o l’esperienza viene ostacolata.

Inoltre, nuovi dispositivi e risoluzioni vengono rilasciati continuamente. Cercare di tenere il passo con questi cambiamenti potrebbe essere un processo senza fine.

Mobile First

Una tecnica popolare con l’utilizzo di media query è chiamata prima mobile . Il primo approccio mobile include l’uso di stili destinati a finestre più piccole come stili predefiniti per un sito Web, quindi utilizzare le query multimediali per aggiungere stili man mano che la finestra cresce.

La convinzione operativa alla base del primo progetto mobile è che un utente su un dispositivo mobile, che in genere utilizza un viewport più piccolo, non dovrebbe caricare gli stili per un computer desktop solo per averli sopra scritti con stili mobili in un secondo momento. Farlo è uno spreco di larghezza di banda. Larghezza di banda preziosa per tutti gli utenti che cercano un sito Web scattante.

Il primo approccio mobile promuove anche la progettazione tenendo conto dei vincoli di un utente mobile. In poco tempo, la maggior parte del consumo di Internet verrà effettuata su un dispositivo mobile. Pianificali di conseguenza e sviluppa esperienze mobili intrinseche.