Oggi il design responsivo fa parte degli standard nella creazione di siti web, non importa se si realizza un negozio online, un blog di notizie o il profilo di un’azienda. Infatti, i potenziali clienti non navigano più solo con i tradizionali computer fissi o portatili, ma si è moltiplicato l’uso di dispositivi mobili, come smartphone e tablet. Questa non è una novità, ormai da anni si poteva prevedere stando ai numeri in crescita nella vendita di dispositivi mobili e nell’uso sempre maggiore di Internet dai dispositivi mobili. Avevamo già spiegato in questo articolo quanto un’ottimizzazione mobile sia uno degli standard richiesti che contribuisce al successo di un business online.
Una cosa è certa: in un mondo digitale sempre più legato alla tecnologia da mobile, si riesce ad affermare solo chi offre ai suoi utenti la massima usabilità su tutti i dispositivi. Uno degli aspetti principali dell’ottimizzazione per dispositivi mobili è la conseguente navigazione responsive.
La navigazione su dispositivi mobili rappresenta una sfida ben particolare per i web designer: il comportamento degli utenti su display piccoli e touch è difficilmente confrontabile con quello su grandi schermi, sui quali la navigazione è facilitata ulteriormente dal mouse. Per rendere l’esperienza dell’utente su mobile altrettanto semplice e soddisfacente, si dovrebbe tenere in conto la necessità di investire parecchio tempo nella creazione di una navigazione responsive, perché, così come il comportamento dell’utente è mutato, anche il suo livello di pazienza è cambiato e oggi gli utenti (quindi i potenziali clienti) sono sempre più impazienti. Se la navigazione da mobile non lo porta senza difficoltà da A a B, è un attimo perché decida di cliccare su un’altra pagina, e così il traffico e soprattutto il giro di affari di un’azienda diminuisce rapidamente.
Una buona navigazione ha un ruolo fondamentale in un sito web, perché l’utente deve poter trovare attraverso di essa le informazioni per lui rilevanti. I comandi dovrebbero funzionare senza difficoltà, la struttura dovrebbe essere facilmente comprensibile, auto esplicativa e permettere un uso intuitivo. Le sfide specifiche della navigazione responsive sono soprattutto date dalla mancanza di spazio e dalla presenza del principio touch come metodo di inserimento nei dispositivi mobili. Ma ci sono alcune soluzioni responsive, che permettono comunque una navigazione su di un sito web che sia panoramica e user-friendly.
L’idea alla base del responsive design è che i contenuti e il design di una pagina si adattino in maniera dinamica alle condizioni in cui si trovino, cioè alle dimensioni del dispositivo in uso. Lo stesso vale anche per la navigazione responsive.
La maggior parte dei web designer propone di creare siti web con l’approccio Mobile First. Questo tipo di progettazione mette in primo piano l’ottimizzazione dei dispositivi mobili: la creazione, l’usabilità e le performance della versione mobile sono al primo posto mentre al secondo segue l’adattamento per la visualizzazione su desktop e laptop. Infatti, adattare un sito web da desktop a dispositivo mobile, non solo è spesso difficile e richiede molto tempo, ma i risultati sono spesso insoddisfacenti e non accontentano l’utente.
Prima di iniziare con la pianificazione e la realizzazione della navigazione responsive, ci sono però anche alcune domande di base a cui rispondere. La prima decisione da prendere è dove posizionare il menu nella pagina.
I modelli più comuni sono l’inserimento della barra di navigazione nel footer o all’inizio della pagina. Se il menu è nel footer, l’utente trova all’inizio della pagina su dispositivo mobile solo l’avviso di una barra di navigazione, che lo porta direttamente al footer, dove ci sono le voci del menu.
Le barre di navigazione collocate nel footer non sono sempre user-friendly, al contrario il posizionamento talvolta confonde l’utente. Per questo motivo il focus viene posto sui contenuti della pagina iniziale, cosa che è, a seconda dell’obiettivo del sito web, uno dei vantaggi maggiori. Più spesso che nel footer, la barra di navigazione su dispositivo mobile si trova all’inizio della pagina. Questa è una configurazione classica della navigazione per design responsive ed è quella più familiare alla maggior parte degli utenti.
Ci sono diverse possibilità per strutturare una navigazione. Tra le più comuni ci sono i menu a lista e le responsive grid.
La presentazione classica a lista si usa sia nella navigazione a uno che in quella a più livelli. Il vantaggio di una configurazione relativamente semplice consiste nel fatto che si vada incontro alle abitudini degli utenti.
Una navigazione che usa l’effetto responsive grid presenta voci del menu piuttosto brevi, che vengono mostrate una accanto all’altra nella griglia, il numero delle colonne dipende dalla grandezza dello schermo. Se si ha in mente una griglia a due colonne, il numero di voci dovrebbe essere lo stesso su entrambe, per evitare una presentazione asimmetrica (si veda lo screenshot).
In entrambe le varianti si possono aggiungere ulteriori sottosezioni, che appaiono in dissolvenza.
Arriviamo ora alla domanda centrale: come si apre la barra di navigazione da dispositivo mobile? Il modo in cui il menu si presenta all’utente ne determina il tipo. Le opzioni di presentazione sono molteplici: la barra di navigazione è già direttamente visibile o si apre solo cliccandola, il contenuto si sposta a lato oppure il menu si sovrappone. Abbiamo raccolto alcuni esempi.
Uno dei concept più semplici per realizzare barre di navigazione mobile è l’approccio “Do Nothing”. Si adatta solo in maniera esigua la barra di navigazione originale, aumentando ad esempio la distanza tra le singole voci del menu e rendendo così utilizzabile la barra anche su un piccolo display touch. Una soluzione di questo tipo è relativamente poco complicata nella sua implementazione, richiede solo un piccolo sforzo di programmazione. Tuttavia è adatta solo per i siti web, che dispongono di strutture del menu e di voci brevi. Non appena la struttura del menu o anche una singola voce si allunga, si dovrebbe configurare una barra di navigazione per dispositivi mobili a più livelli, per mantenere una buona usabilità.
Tra i classici della navigazione responsive rientrano anche i menu dropdown, o overlay. Ricordano fortemente la comune struttura della navigazione da desktop, ragion per cui sono familiari agli utenti e spesso si rivelano un tipo di barra di navigazione azzeccato. La navigazione si attiva con un clic su di un pulsante o sul rispettivo tasto e si sovrappone al contenuto.
Il tipo di navigazione che viene usato di più è il menu slidedown, si parla anche di navigazione a più livelli. Con un clic su una delle voci del menu si apre la barra di navigazione. Al contrario del menu dropdown però le varianti dello slidedown non si sovrappongono ai contenuti ma li spostano verso il basso. Questa navigazione è alquanto dispendiosa nella configurazione, ma in compenso è ben scalabile e occupa poco spazio. Grazie alla possibilità di integrare delle sottovoci nel menu, si presenta una soluzione elegante sia per barre semplici che complesse.
In questa soluzione la navigazione responsive si trova al di fuori del campo standard che viene visualizzato. Il menu non è integrato nel layout, quindi la navigazione off-canvas è una soluzione che permette di risparmiare spazio, non prendendo alcun posto nella finestra. Solo cliccando sull’icona del menu, la navigazione si sposta sopra l’immagine e sposta tutto il layout. Questa soluzione è adatta a grandi barre di navigazione con diversi sottomenu. Un esempio conosciuto di navigazione off-canvas è la versione per dispositivi mobili di Facebook. Dal momento che Facebook è un’applicazione enormemente diffusa, oggi questo tipo di navigazione è molto più conosciuto che in passato. L’utente clicca in maniera intuitiva sul simbolo del menu e sa cosa aspettarsi.
Quale tipo di navigazione sia quello giusto per un sito web, dipende da molti fattori. Una cosa è certa: una soluzione unitaria non esiste. Gli stili di navigazione presentati sono un buon punto di partenza, ma devono essere naturalmente adatti alle singole idee e progetti. Per iniziare è in ogni caso importante ragionare su quale sia la struttura di navigazione o le diverse categorie di un sito web. Infatti sarebbe ragionevole decidere precedentemente come costruire la barra di navigazione e su quali punti si vuole porre particolare attenzione.
L’icona hamburger è oggi uno standard per i dispositivi mobili e dovrebbe quindi essere brevemente menzionata. Il piccolo simbolo con tre linee orizzontali parallele si è affermato come segno universale per indicare la presenza di un menu nascosto.
Il grande vantaggio è naturalmente il fatto che è facilmente riconoscibile, ma tra i web designer resta un simbolo controverso. L’oggetto della controversia è l’usabilità: i critici vedono negativamente il suo essere nascosto e ritengono che richieda una maggiore interazione. Originariamente era stato concepito all’inizio degli anni ’80 per Xerox Star, una delle prime workstation con un’interfaccia grafica, ma si trovava già anche nella prima versione di Windows.
Su internet si trovano numerosi testi con diversi caratteri. La diffusione del responsive web design si riflette anche sulla tipografia nei siti web e la visualizzazione dei caratteri dovrebbe adattarsi sempre alla schermata del dispositivo utilizzato. La tipografia reattiva deve avere una visualizzazione flessibile e utilizzare font adatti. In questo primo articolo vi offriamo una panoramica dei...
Internet diventa sempre più Mobile: una tendenza che pone i gestori di siti web di fronte a nuove sfide. Sul web si trovano sempre più offerte che non sempre si possono visualizzare completamente su smartphone e tablet, ma che dopo il Mobile Update di Google rischiano di perdere visibilità. Tuttavia con siti web Mobile separati, layout adaptive e responsive, nonché plug-in Mobile per CMS, ci sono...
Prima di mettere un sito online, bisogna verificarlo nei minimi dettagli. Gli innumerevoli test a cui bisogna sottoporlo richiedono già moltissimo tempo; se poi si opta per un design responsive, bisogna verificare che la pagina si adatti correttamente alle diverse dimensioni dello schermo. Per questo un tool per la verifica della flessibilità si dimostra una preziosa risorsa. In questo articolo vi...
I siti web moderni possono essere visualizzati su una vasta gamma di dispositivi, da telefoni cellulari dal piccolo schermo a dei monitor 4K ad alta risoluzione. Un design responsive è fondamentale per soddisfare questa gran varietà di supporti. Layout, tipografia, immagini e navigazione sono progettati in modo da funzionare correttamente su qualsiasi dispositivo.
Che cosa sono le Media query CSS? In questo articolo vi spieghiamo la relazione che esiste tra le media query e il responsive web design e approfondiamo inoltre ulteriori tematiche correlate. Avrete a disposizione una panoramica completa, dai breakpoint e dalle relative unità CSS fino ai processori CSS e ai moderni framework di utilità CSS.
Offri ai tuoi clienti servizi professionali e affidabili con l'hosting di IONOS.
Dominio gratis