Il blog di ABCFormazione
Il Responsive design, viene ormai adottato come standard di progettazione e sviluppo dei siti, lasciando decadere la ormai vecchia distinzione tra siti web e siti mobile.
Responsive design cos’è
Il Responsive design consiste nello sviluppo di siti che si adattano graficamente alle dimensioni dei dispositivi da cui vengono visualizzati (desktop, tablet, smartphone, pc portatili).
Per comunicare al browser che si tratta di una pagina responsive, è necessario aggiungere un meta tag “viewport” al documento:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Attraverso questa meta tag, si dice al browser di impostare la larghezza (definita con with) in base alla larghezza dello schermo del dispositivo utilizzato (device-with). Attraverso la proprietà initial-scale è possibile impostare il fattore di zoom iniziale. In questo caso (initial-scale=1.0) la dimensione di apertura della pagina è 1 ovvero normale.
I metadati sono informazioni invisibili.
In particolare il metadato viewport è l’area visibile dello schermo su client: pc, desktop ecc. Gestire la viewport permette di definire il modo in cui il layout si deve adattare all’area di visualizzazione che si sta utilizzando in quel momento.
Solitamente è gestita già in modo automatico ma il settaggio di default non va bene per i dispositivi mobili, in quanto è un settaggio fatto principalmente per la versione desktop.
È per questo motivo, che va sempre inserito nella head il metatag viewport, in modo da poter gestire autonomamente le dimensioni della pagina.
Il vantaggio di un sito responsive è non solo quello di avere un sito leggero e ottimizzato ma anche e soprattutto quello di restituire all’utente una navigazione veloce, facile e accessibile, indipendentemente dal dispositivo da cui si collegano.
Immagini responsive
Imparare a gestire le immagini è molto importante nella realizzazione di un sito responsive.
Le immagini responsive sono immagini reattive che si adattano correttamente ai diversi dispositivi, di dimensioni e risoluzioni differenti.
Le immagini non possono essere realizzate direttamente tramite codice e quindi è necessario impostarle con delle regole CSS.
Le immagini infatti hanno un peso, e un peso maggiore può incidere sulla fruibilità del sito. Google fa ancora più attenzione al peso delle pagine. La velocità di caricamento delle pagine è infatti attualmente un elemento cruciale per Google.
Mobile First in sostituzione del vecchio Desktop First
Oggigiorno vale la regola del Responsive al contrario: si parte dalla progettazione del sito su mobile, per poi pensare alle estensioni per i siti desktop.
Mobile First dunque!
In passato i programmatori si occupavano prima delle risoluzioni maggiori, programmando essenzialmente siti per desktop e pensando solo in un secondo momento alla versione mobile.
Oggi non è più così!
La percentuale di utenti che accede direttamente dal telefono è superiore al 70%, mostrando appunto l’importanza di dare priorità alla versione mobile.
Un sito mobile first è:
- fruibile su tutte le tipologie di dispositivi in maniera ottimale
- rende visibile sin da subito gli elementi più importanti di un sito
- le pagine vengono programmate direttamente in HTML
L’obiettivo di un sito mobile è quello di mostrare all’utente un’interfaccia semplice e diretta, dando maggiore importanza ai contenuti piuttosto che alle immagini. Spazio a disposizione, tempo che l’utente ha per visitare il sito e dimensioni dei file utilizzati per farlo navigare sono i 3 elementi fondamentali da tenere in considerazione per garantire un sito che sia responsive.
Ricordiamo che se il sito funziona, deve funzionare su tutti i dispositivi: su desktop, su tablet e su mobile.
Vuoi imparare a realizzare siti web in Design Responsive?
