Siti web responsive – Creare un sito ottimizzato per mobile

Condividi

This post is also available in English. Click here to go directly to the english version.

I siti web responsive, ottimizzati per i dispositivi mobili, specialmente nell’ultimo decennio, sono diventati talmente importanti da metterli tra le priorità rispetto alle versioni desktop; stando infatti ad una statistica, creata da statista.com, circa la metà di tutto il traffico web avviene proprio da smartphone e tablet.

siti web responsive

Tra questi numeri troviamo anche gli acquisti online: il 45% delle compravendite online avviene proprio da questi dispositivi. Considerando che gli smartphone vengono utilizzati da un decennio, soltanto quando la navigazione da questi (inclusi, ovviamente, i tablet) diventerà più radicata negli utenti e design ed esperienza di navigazione saranno più intuitivi, questi numeri sono destinati a crescere a dismisura.

Ovviamente, se i siti web responsive che hanno concentrato le energie sull’esperienza desktop non dovessero adeguarsi, rischierebbero di rimanere drasticamente indietro rispetto alla concorrenza. Specialmente rispetto a quella che ha aperto i battenti con, e grazie, ad una buona esperienza mobile.

Per riuscire ad adeguarci ed ottimizzare al meglio i nostri siti web responsive per i dispositivi mobili, abbiamo creato questa guida in sette passaggi piena di consigli e trucchetti utili.


  1. Usare un approccio mobile-first
  2. Utilizzare le dimensioni consigliate per i dispositivi mobili
  3. Ottimizzato per la modalità verticale
  4. Ridurre il menu ad icona
  5. Comprimere contenuto secondario
  6. Limitare campi del modulo ed immissione testo
  7. Mobile-friendly equivale a pollice-friendly
mobile first
Approccio mobile-first

1 – Utilizzare approccio mobile-first

Come dicevamo nelle righe sopra, considerando i numeri impressionanti degli ultimi anni sul tipo di navigazione utilizzata dagli utenti, i professionisti hanno dovuto mettere in secondo piano la versione desktop preferendo concentrarsi principalmente su quella mobile. Per questo motivo, negli ultimi anni, la progettazione dei siti web responsive, l’approccio mobile-first, è ormai pratica comune.

Limiti di dimensione a parte, che ovviamente vi sono eccome, l’utente tende spesso ad interagire con una sola mano e l’input tende ad essere più ingombrante di quanto non sarebbe su desktop.

Rendiamolo più chiaro con un esempio, le animazioni al passaggio del mouse: se la nostra versione desktop si basa troppo su questo tipo di feedback visivo, in seguito, per i dispositivi mobili, diventerà un serio problema.

siti responsive - mobile first
Un altro esempio di mobile first

L’approccio, il design mobile-first, tende sin da subito ad evidenziare facilità di utilizzo e semplicità. Teniamo comunque a mente una cosa molto importante: questo approccio non relega la versione desktop ad un design minimalista, anzi; è più facile espandere un layout semplice che passare alla semplificazione di uno complesso.

Altrettanto importante il test dei contenuti multimediali sui siti web responsive, perché tali contenuti, creati per un orientamento orizzontale, potrebbero poi non funzionare bene per un ritratto. In piccole dimensioni, dettagli quali elementi di sfondo o espressioni facciali, potrebbero essere più difficili da leggere chiaramente.

Al contempo, la maggior parte delle volte vi è soltanto lo spazio per un’immagine alla volta. E qualora si progettasse un sito web desktop zeppo di immagini, lo scorrimento di ciascuna di esse su dispositivi mobili potrebbe divenire ridondante.

2 – Utilizziamo le dimensioni consigliate per i siti web responsive

Sui dispositivi mobili, lo spazio di lavoro potrebbe apparire più ristretto rispetto a qualunque altro ambiente di progettazione; per questo motivo, prendere in considerazione sin da subito i limiti di dimensione, è la strada giusta al fine di evitare dei problemi in seguito.

Anche se le risoluzioni dello schermo dei dispositivi mobili variano da dispositivo a dispositivo, stando ad una ricerca condotta da statcounter.com quella ad oggi più comunemente utilizzata è 360 x 640, con proporzioni 9:16.

Google Analytics può venirci in aiuto, elencandoci i dispositivi preferiti dalla nostra utenza, quindi assicuriamoci che il design del nostro sito sia sufficientemente reattivo da adattarsi alle variazioni.

Almeno 16 px per il body copy, queste sono le dimensioni consigliate per il carattere destinato al design mobile, numero che può variare in base al carattere che decidiamo di utilizzare visto che, in base alla loro costruzione, alcuni di questi saranno meno leggibili a 16 px rispetto ad altri.

Titoli e media

Riguardo al carattere dei titoli non vi è una dimensione standard da seguire, dobbiamo invece stabilire una gerarchia tipografica per mezzo di peso, stile e contrasto di dimensioni. Nel caso dovessimo avere dei dubbi potremmo provare noi stessi le dimensioni su un dispositivo mobile.

Riguardo a media e immagini, queste possono arrivare alla larghezza che consente il dispositivo; non dobbiamo comunque adattare l’intera immagine ma ingrandire il soggetto e ritagliare elementi estranei allo sfondo.

Infine, non in ordine di importanza, le dimensioni dei pulsanti: questi sono altamente importanti nella progettazione di un sito web destinato, quindi ottimizzato, per i dispositivi mobili.

Non dimentichiamo che i touchscreen, rispetto a tastiere e mouse, sono nettamente meno affidabili nel raccogliere l’input dell’utente (uno studio condotto sugli utenti della terza età suggerisce pulsanti touch tra i 42 e i 72 px al fine di un’accessibilità ottimale).

3 – Ottimizziamo per l’orientamento verticale

La modalità verticale è quella più comune, sebbene i siti ottimizzati per i dispositivi mobili possono essere tecnicamente utilizzati in modalità orizzontale con il dispositivo girato su di un lato.

Negli anni 2000 fu il Blackberry a rendere popolare la presa del cellulare a due mani ma, con l’ascesa degli smartphone e con l’utente sempre più abituato alla modalità verticale con una sola mano, questo approccio è oramai scomparso.

Per i siti web responsive con layout a colonna singola, la ristrettezza della modalità verticale è ottima e i vari elementi che il sito incorpora vengono posizionati in sequenza dall’alto al basso.

Anche se è più comune, per il contenuto, un allineamento centrato, la giustificazione alternata destra sinistra può creare interesse visivo nonché l’illusione di un layout a due colonne.

Poi, i caroselli di immagini possono fermare lo scorrimento verticale con quello orizzontale mentre elementi più piccoli come icone e foto possono essere presentati in una griglia.

Vi sono molti modi per utilizzare il layout a nostro vantaggio, oltre a quello di trovare metodi creativi per la colonna singola; visto che le app sociali hanno abituato l’utenza per ore e ore di scorrimento, possiamo diffondere i contenuti con padding e spazi bianchi. Questo li manterrà leggibili e puliti, aumentando il coinvolgimento per mezzo dello scorrimento continuo.

Progettare in sezioni è utile anche al fine di raggruppare informazioni simili in modo che l’utente, senza bisogno di dover arrivare in fondo nella lettura, comprenda lo scopo generale di ciascuna sezione. Variare con gli sfondi colorati aiuta nella differenziazione di tali sezioni, mentre i bordi delle sezioni creative bloccano quella sensazione squadrata che queste promuovono.

4 – Ridurre ad icona il menu

Anche qui ci troviamo davanti a qualcosa che, in base al numero di opzioni e destinazioni fornite all’utenza, potrebbe diventare davvero complicata: la navigazione.

Il sito desktop tende a possedere una barra di navigazione con più sottomenu e menu, con intestazione completa, ed è quindi diventato standard contenere il tutto all’interno di un’icona conosciuta come “ad hamburger”. Naturalmente, la maggior parte delle intestazioni dei siti per dispositivi mobili, tende ad essere ridotta al logo e proprio alla suddetta icona.

siti responsive hamburger menu

Un approccio comune sta nella barra laterale a scorrimento che si va a sovrapporre a una parte dello schermo con le opzioni di navigazione. Questo da la possibilità al menu di lavorare su di una dimensione separata dal resto del contenuto della pagina, lasciando al navigante lo spazio per tornare al menu precedente e uscire dal menu.

In base alla complessità del menu, ciascuna delle sue opzioni può contenerne altre nidificate o un sottomenu.

Quando l’utente va a cliccare uno di questi sottomenu, al fine di mantenere l’elenco breve è bene che il nuovo elenco di opzioni vada a sostituire il menu esistente.

Fixed position e menù

Al fine di evitare che l’utente non debba scorrere fino in cima, non dimentichiamo di fissare la barra di navigazione sullo schermo.

E’ comune, nei dispositivi mobili, nascondere la navigazione fissa mentre l’utente scorre verso il fondo, focalizzando il contenuto nel modo giusto e rivelando la navigazione quando il visitatore inizia a scorrere indietro.

In aggiunta ai menu standard esistono altri utilissimi mezzi di navigazione alternativi; le schede consentono un facile scroll nelle altre sezioni di contenuto senza dover caricare una pagina completamente nuova.

Sono diversi i professionisti UX che stanno sperimentando altre soluzioni di navigazione diverse dall’input basato sul tocco: il più comunemente utilizzato, in questi periodi, è lo scorrimento orizzontale/verticale.

Nel momento in cui fallisce tutto il resto, la cara-vecchia-pratica icona di ricerca è comune sui mobili al fine di permettere all’utente di trovare, nello specifico, ciò che stanno cercando.

siti responsive - fixed menù
L’approccio “fixed menù” può tornarci utile nei design responsive

5 – Comprimere il contenuto secondario

Spesso, i siti web ottimizzati per desktop, possiedono lo spazio per le specifiche dei prodotti, per il testo approfondito e svariati altri contenuti; ma visto che i mobili “pretendono” informazioni pertinenti, tutti i contenuti non essenziali devono passare al taglio. Proprio qui tornano utili le sezioni comprimibili/espandibili.

Andare a comprimere il contenuto implica il creare informazioni esplicative facoltative per mezzo di un’icona, come un triangolo o un segno “+” che va a rivelare o espandere il contenuto nascosto.

Andare a nascondere il contenuto potrebbe sembrare negativo, eppure i vantaggi della navigazione semplificata, con il sostegno di titoli persuasivi, battono nettamente il potenziale di informazioni perse. La micro interazione del toggling consiste in un ulteriore invito all’utenza ad interagire con la pagina piuttosto che leggere passivamente.

Bisognerebbe riservare il contenuto compresso per la copia di livello inferiore sotto l’intestazione. Anziché essere impilati l’uno sull’altro, i contenuti ripetitivi possono essere uniti per sovrapporsi nello stesso spazio.

Ciò che dovremmo totalmente evitare nel corso della creazione di un sito web ottimizzato per i dispositivi mobili sono interstitial e popup.

Anche se questi possono farci risparmiare spazio andando a sovrappore i contenuti in una finestra separata, i siti web zeppi di popup estranei sono davvero frustranti, oltre che penalizzati da Google.

6 – Limitare campi modulo e immissione di testo

Chi non si è mai lamentato quando un sito ottimizzato per mobile richiede un indirizzo email, costringendoci a scorrere lettere, maiuscole, punteggiatura e menu di simboli con una mano? Per questo motivo dovremmo ridurre al minimo sindacale i campi del modulo.

Le opportunità di auto-fill, come individuazione di gran parte dell’indirizzo da un codice postale o la fornitura di selezioni precompilate per i suffissi di posta elettronica comuni, possono andare a risolvere i problemi di alcune delle interazioni sopra citate.

Al contempo, le informazioni di accesso e personali dell’utente, possiamo semplificarle in pochi clic per mezzo di integrazioni di altri software basati sul profilo, come Facebook e Google ad esempio.

Anche le integrazioni di terze parti con fornitori di servizi a pagamento (come PayPal) possono tornaci utili nelle pagine di siti web di shopping, dove la pesca dei dettagli della carta di credito può essere più dispendiosa anche su desktop.

siti responsive - limitare i campi moduli

Nel caso questa opzione non fosse disponibile, potremmo dar modo all’utente di effettuare il checkout più rapidamente come ospite, ripetendo le informazioni di spedizione in quelle di fatturazione.

7 – Mobile-friendly equivale a pollice-friendly

Stando ai risultati di svariate ricerche, l’utenza interagisce con il pollice per almeno ben il 75% delle interazioni mobili, inclusi scorrimento, clic e immissione del testo mentre il resto delle dita sono impegnate a sorreggere il dispositivo. Ovviamente, i professionisti devono dare la priorità al pollice per quanto riguarda l’intero comparto delle interazioni mobili.

Il pollice è grande, quindi è impreciso; durante la creazione dei pulsanti dovremmo utilizzare la dimensione più grande consentita perché il touch screen non registrerà l’input se parti del pollice andassero fuori dal pulsante.

La stessa importanza va data alla posizione degli elementi interattivi sulla pagina; solitamente, un dispositivo mobile viene sorretto dalla parte inferiore e il pollice posto al centro; al fine di raggiungere gli elementi interattivi piazzati in alto, l’utente dovrebbe riposizionare la mano oppure utilizzare le dita dell’altra mano. Ebbene, è dimostrato che la zona di interazione ideale è vicino all’area medio bassa.

In pratica, la zona adatta al pollice, che varia in base al dispositivo in uso, è quella centro/inferiore dello schermo. E’ quella con la più facile interazione.

Negli ultimi anni vi è stata una gara tra i professionisti di UX per piazzare la barra di navigazione nella parte inferiore dello schermo piuttosto che in alto.

Sebbene ciò garantisca un accesso semplificato con il pollice, i risultati possono essere inaspettati e ritorcersi contro, visto che andremmo ad infrangere le convenzioni di progettazione a cui gli utenti sono abituati. Nel frattempo, in attesa che il tempo ci dica qual è la posizione ideale, sarebbe meglio passarle entrambe al test.

Adottiamo un sito web ottimizzato per i dispositivi mobili

Non è un segreto, indipendentemente dai risultati delle varie ricerche, che la via del futuro è la navigazione dai dispositivi mobili; e considerando tutte le limitazioni che il design deve affrontare rispetto alle versioni desktop (mancanza di spazio e periferiche utente) più che un’opportunità potrebbe sembrare un fardello. Anche se non sono insormontabili, queste sfide non devono essere prese alla leggera.

layout per dispositivi mobile

Questi suggerimenti forniscono una linea di base per soluzioni pratiche alle sfide di creazione di siti web ottimizzati per dispositivi mobili, ma necessitano di cura e pratica per padroneggiarle.

Quindi, al fine di ottenere un sito web che sia di aiuto per i nostri utenti e non si riveli, invece, un ostacolo, nel caso non fossimo in grado di mettere in pratica questi e altri suggerimenti pensiamo ad ingaggiare un professionista.

Buona fortuna!

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo