Salta la barra di navigazione e vai ai contenuti


null

Il Responsive Design

Cos’è il Responsive Design?

vari dispositivi: desktop, tablet, smartphone Per chi non lo sapesse, un sito web responsive è un sito web "intelligente", che cambia il proprio layout e i propri contenuti, a seconda del dispositivo dal quale si accede (desktop, tablet, smartphone). Si adatta automaticamente alla grandezza dello schermo, al suo orientamento, alla risoluzione. I dispositivi portatili stanno diventando i protagonisti del web. Secondo una ricerca condotta da un'azienda multinazionale con sede in California, il traffico mondiale sul web proveniente dagli smartphone ha registrato negli ultimi 4 anni, un incremento medio annuale pari al 66% (un traffico tre volte maggiore rispetto a quello che si è registrato sulla rete fissa).
Un utente web su 4 accede alla rete con un dispositivo mobile
(da un notebook, da un tablet o da uno smartphone).
Il responsive design
Un sito web realizzato per adattarsi a qualsiasi formato di schermo e a qualsiasi dispositivo utilizzato dall’utente, è un sito responsive. Un sito responsive è più semplice da navigare e non richiede lo scrolling o lo zoom per ingrandire perché risponde a ogni movimento effettuato col dispositivo (verticalmente o orizzontalmente) adattandosi allo schermo senza compromettere l’estetica del sito.
Come funziona? Un sito web realizzato con responsive design ha un’unica URL, un unico contenuto e un unico codice per tutti i dispositivi.
Perché scegliere il responsive design? Perché si prevede che gli utenti da dispositivi mobili passeranno da 800 milioni a 1,9 miliardi superando di molto gli utenti dal desktop (pc di rete fissa, da tavolo), .

Le ragioni per avere un sito responsive:
1. Sempre più utenti si collegano al web via mobile e se non trovano un sito adattabile e leggibile dal proprio dispositivo tendono a tornare su Google per trovare un'altro sito più adatto alla visualizzazione da smartphone o tablet.
2. Lo raccomanda Google. Dal 2012 Google, il più importante motore di ricerca sul web, raccomanda l'utilizzo di un sito web dal layout responsive. Con una grafica adattabile ad ogni supporto non sarà più necessario creare più versioni del proprio sito cioè una homepage adattata per vederla su un tablet, una per vederla su uno smartphone, e quindi dover costruire un doppione di ogni pagina per ogni dimensione di display, un sito alquanto complicato da gestire poichè caricare un aggiornamento, anche se pur piccola modifica, andrebbe fatta su ogni pagina, su ognuno di questi doppioni.
E per Google sarà di conseguenzan più semplice da indicizzare e analizzare un solo sito web che fa riferimento ad un'unica URL e ad un solo codice HTML.
Il sito web responsive
I dispositivi mobili visualizzano il web in modo diverso, hanno un display più piccolo e gli utenti navigano tramite il touchscreen. Un sito web tradizionale costruito per essere visualizzato su un computer desktop (computer di casa o d'ufficio), potrebbe non essere facilmente usabile dagli utenti di dispositivi mobili.
Perché creare un sito web responsive
Creare un sito web responsive per i dispositivi mobili diventa una scelta quasi obbligata, considerando la rapida diffusione di questi device tra gli utenti internet. La percentuale di utilizzo del web tramite smartphone e tablet oscilla intorno al 30-40%. Alcuni esempi di visualizzazione di un sito web tradizionale, sul computer di casa o dell'ufficio, e su uno smartphone di ultima generazione o su un tablet, permettono di valutare la differenza di visualizzazione e di usabilità anche nella navigazione.

La visualizzazione del sito sul computer di casa
Un sito web sviluppato per i computer desktop, detti anche computer fissi, (vengono chiamati così proprio perché sono progettati per poter essere posizionati sopra un tavolo, desktop in inglese significa infatti scrivania o tavolo), viene visualizzato su uno schermo con una risoluzione di almeno 1024 pixel di larghezza e 768 di altezza, pari a un'area complessiva di circa 786.000 pixel, in una superficie dello schermo da 14 a 20 pollici. I testi si leggono abbastanza bene.

L'immagine sotto raffigura un computer "desktop" e come si visualizza un sito.
desktop L'utente riesce a individuare i link e a cliccarvi sopra per navigare tra le pagine del sito.
L'usabilità durante la navigazione è buona.

Visualizzazione dello stesso sito su uno smartphone
Proviamo ora a vedere come si vede lo stesso sito (non responsive) su un dispositivo mobile, ad esempio su uno smartphone.

esempio di cattiva usabilità su uno smartphone
sito non responsive su smartphone Si tratta di un'operazione di lettura molto scomoda poiché implica molte azioni da parte dell'utente, che per poter leggere, deve costantemente usare il touchscreen e scorrere orizzontalmente e verticalmente per raggiungere le parti del sito che desidera consultare.
Quando l'utente scrolla la pagina in touchscreen può capitare inavvertitamente di pigiare il dito su un link o su una pubblicità. Questo aggiunge un altro problema, l'utente si vede catapultato su un'altra pagina web di un'altro sito e non ha ancora finito di leggere l'articolo.
In conclusione, il sito web usabile sul computer desktop potrebbe non esserlo sullo smartphone.

Per evitare il problema è necessario sviluppare il sito web sia per i computer "desktop" (fissi da tavolo), che per i dispositivi mobili. Quando l'utente utilizza uno smartphone, il sito responsive viene visualizzato in modo adeguato per il display da 320 pixel di larghezza e su quello da 480 pixel. In questo modo l'utente non deve zoomare sulla pagina e può usufruire immediatamente dei contenuti.


La visualizzazione del sito progettato "responsive" su uno smartphone


esempio di buona usabilità su smartphone
sito responsive su smartphone
Come si può notare, ora l'usabilità del sito web sul dispositivo mobile è decisamente migliore rispetto alla precedente. I testi del sito sono immediatamente leggibili e i link ben distanziati tra loro. Tutta l'area del display è dedicata alla visualizzazione dell'articolo, l'utente non deve ingrandire la pagina con lo zoom, e il numero delle operazioni di touchscreen per scrollare l'articolo sono ridotte.

visualizzazione del menu sullo smartphone
sito responsive su smartphone
Su schermi normali come il desktop (così si chiama il computer fisso, cioè da tavolo, di casa o dell'ufficio) oppure di un portatile come un notebook o un tablet, il menu viene solitamente visualizzato orizzontalmente nella parte superiore della pagina o lateralmente (a sinistra o a destra), in senso verticale. Quando lo schermo invece ha una larghezza inferiore a 767px, come ad esempio sullo smartphone, il menu viene nascosto (per motivi di spazio nel display), e reso visualizzabile tramite un pulsante in alto (a destra o a sinistra), solitamente indicato con tre linette orizzontali e chiamato in gergo tecnico “hamburger” (tradotto dall'inglese = un hamburger è un panino), probabilmente perché le tre linette-icona lo ricordano.
Cliccando sull'icona del cosidetto "hamburger", si richiama (tramite una media query nel codice di progettazione), un menu a tendina (dropdown), o a comparsa laterale chiamato "bootstrap".

Come fare in modo che questa visualizzazione si attivi solo sullo smartphone e non sui computer desktop?

Prima di visualizzare la pagina web, il sito web analizza il dispositivo che l'utente sta utilizzando e decide quale visualizzazione adottare.

Questa tecnica di progettazione è detta responsive poiché risponde e si adatta automaticamente al "device" (dispositivo) che l'utente sta utilizzando.







torna alla home ... >>

Vai su