Se vi siete mai chiesti cos’è il Responsive design e come può influenzare la visualizzazione di un sito web, questo articolo vi fornirà le informazioni necessarie. Progettare un sito web attraverso l’approccio Responsive design significa adattarlo alle nuove esigenze del mercato. Sempre più utenti usano dispositivi mobile per accedere ai siti web; pertanto è necessario che un sito web sia mobile friendly. Si tratta di un’altra interessante sfida per i web designers: pianificare accuratamente la progettazione di un sito, in modo tale che gli utenti non abbiano problemi nel visualizzarne i contenuti su piccoli dispositivi.
Il Responsive design è un approccio alla realizzazione di siti web in modo da garantirne la visualizzazione ottimale dei contenuti su qualsiasi dispositivo, anche smartphones o tablets, adattandosi alle diverse risoluzioni. Prendiamo il caso di un sito di e-commerce dalla navigazione lenta, o dalla grafica difficile da visualizzare su dispositivi mobili: ciò non favorirà certamente l’aumento del numero dei visitatori. Oppure il caso di un sito web che non permetta layout flessibili: se sul computer sono visualizzabili le tre colonne di un sito, cosa accadrà dovendo visualizzare lo stesso layout su un tablet?
Alcuni elementi potrebbero non essere visualizzabili o soltanto in orientamento orizzontale. Le tecniche di responsive design rispondono a questa e a simili altre esigenze, adattando il layout del sito alle risoluzioni di qualsiasi dispositivo. Vediamone in dettaglio il funzionamento. Il termine è stato coniato da Ethan Marcotte, che lo ha utilizzato per indicare un nuovo modo di progettare siti web, che ne garantisca la visualizzazione di ogni componente, adattando immagini e contenuto alla risoluzione del dispositivo, attraverso l’utilizzo di alcuni elementi fondamentali.
Principali componenti del Responsive Design:
- Griglie fluide, divise in un numero specifico di colonne, con linee orizzontali e verticali, che regolano le diverse dimensioni, quali larghezza e altezza, utilizzando i pixel in termini di proporzioni (trasformando pixel in ems), in base alle caratteristiche del dispositivo. L’utilizzo di griglie fluide è fondamentale perché permette di creare un ordine nei contenuti, mostrandoli o nascondendoli, in modo da visualizzare quelli fondamentali nel caso si riduca il layout ad una colonna, come per i dispositivi mobili, disegnando il mockup grafico del sito stesso. Esistono alcuni strumenti che forniscono griglie per photoshop, come 960 grid system, Fluid 960 grid, cssgrid.net.
- Layout fluidi, che consentono di adattare la pagina alle varie risoluzioni e alla larghezza della finestra del browser, nonché di stampare in maniera migliore una pagina web. I layout flessibili, infatti, si contraddistinguono perché le dimensioni del layout sono a larghezza variabile e possono dipendere dalla larghezza della finestra del browser (layout fluidi) o dalla dimensione del testo (layout elastici);
- Immagini flessibili, create utilizzando diverse tecniche, ad esempio attraverso gli attributi height e width in percentuali o creando più versioni della stessa immagine per adattarla a seconda del dispositivo;
- Media queries CSS, utilizzate per ottenere un layout adatto al dispositivo attraverso parametri che indicano colore, risoluzione, orientamento dello schermo;
- Server-side components, che permettono di rilevare il dispositivo a livello di server e ridurre i tempi di accesso al sito.
Focus
Un approccio Responsive Web Design deve tener conto di alcuni nuovi elementi che entrano in gioco nel design per dispositivi mobili.
- Touch screen rispetto al mouse: l’approccio deve garantire una navigazione semplice anche su dispositivi mobili che utilizzano il touch screen rispetto al mouse utilizzato sui personal computer.
- Velocità di visualizzazione dei contenuti. La grafica del sito deve rispondere alla specifica esigenza di permetterne di visualizzare i contenuti del sito facilmente e velocemente anche su dispositivi mobili.
- Creazione di app e versioni mobili. L’approccio deve mettere in atto specifiche tecniche per la creazione di apps o versioni adatte a dispositivi mobili del proprio sito web.
