Progettare siti che siano facilmente accessibili e fruibili dai vari dispositivi è una condizione indispensabile al giorno d’oggi.
Il Responsive Web Design attualmente è la tecnica migliore per la realizzazione di siti in grado di adattarsi graficamente, in modo automatico, al dispositivo coi quali vengono visualizzati (pc, smartphone, tablet), indipendentemente dalla risoluzione dello schermo.
In questo articolo cercherò di spiegarvi in cosa consiste la realizzazione di un sito web responsive.
Responsive Web Design: gli obiettivi.
L’obiettivo principale di questa tecnica di design è quello di garantire un’esperienza utente ottimale, in tutti i contesti. In particolar modo ha l’obiettivo di:
- adattare il layout grafico del sito al maggior numero di dispositivi;
- adattate la dimensione dei contenuti e delle immagini;
- ridimensionare ed “alleggerire” le immagini;
- non visualizzare gli elementi che non sono necessari su mobile;
- sfruttare funzionalità importanti da mobile come la geolocalizzazione o la chiamata diretta.
Responsive Web Design: consigli utili.
1. I contenuti prima di tutto.
Il primo obiettivo da porsi durante la progettazione di un sito responsive, è come disporre i contenuti (testi, immagini, logo, menù di navigazione) affinché gli utenti riescano ad interagirci facilmente.
L’errore da evitare infatti, è quello di ordinare, posizionare e gestire i contenuti nello stesso modo della versione desktop del sito.
L’approccio da prediligere è quello della priorità dei contenuti fruibili da mobile: dagli elementi più importanti fino ai meno importanti.
2. Il layout.
Il problema principale nella disposizione del layout mobile è rappresentato dalla poca disponibilità di spazio.
La prima regola quindi è quella di semplificare gli elementi e disporli in un’unica colonna, uno sotto l’altro.
3. Le dimensioni.
Nell’ottica della massima adattabilità degli elementi (larghezza, altezza, margini ecc…), risulta necessario definirli con unità di misura relative, cioè attraverso percentuali o em (e non pixel).
La stessa cosa vale per la dimensione del font e dei tasti.
4. Il caricamento dei contenuti.
Per caricamento condizionale dei contenuti intendiamo la possibilità di nascondere o rappresentare diversamente sui dispositivi mobili certi contenuti che riteniamo inutili o poco adatti al device, al verificarsi di specifiche condizioni.
5. La navigazione.
Uno degli elementi che occupa molto spazio in un sito, e che non può essere omesso è il menù di navigazione. Una delle tecniche maggiormente usate per risparmiare spazio nella navigazione è predisporre la navigazione compatta, cioè lasciare il menu come una lista verticale che appare e scompare.
6. Funzionalità.
Esistono due funzionalità particolarmente utili per l’utente che naviga di dispositivi mobile: la chiamata diretta e la geolocalizzazione.
- La chiamata diretta consiste nell’iniziare una telefonata con un semplice “tap” sul numero di telefono.
- La geolocalizzazione invece è una funzionalità che fornisce all’utente informazioni a seconda della posizione in cui si trova.
Con un sito web Responsive Web non importa con quale dispositivo viene visualizzato.
Sarà sempre perfetto!
Cosa aspetti? Richiedi il tuo preventivo per la realizzazione di un sito web professionale!
