Sito Web
Responsive design: che cos’è e perché è importante
27 Gennaio 2023
•
7 min lettura
Il responsive design è un metodo di progettazione dei siti web che consente di adattare la visualizzazione del contenuto a tutte le principali dimensioni dello schermo. In poche parole, rendere un sito navigabile facilmente da tutti i dispositivi. Grazie al responsive design, un sito web si adatta automaticamente al dispositivo utilizzato dall’utente, ad esempio un […]
Il responsive design è un metodo di progettazione dei siti web che consente di adattare la visualizzazione del contenuto a tutte le principali dimensioni dello schermo.
In poche parole, rendere un sito navigabile facilmente da tutti i dispositivi.
Grazie al responsive design, un sito web si adatta automaticamente al dispositivo utilizzato dall’utente, ad esempio un computer, un tablet o uno smartphone.
Ciò permette una migliore esperienza utente e rende il sito web accessibile.
Ad oggi è molto importante per diversi motivi, come ad esempio:
- Raggiungere un pubblico più vasto: la maggiore degli utenti accede al web attraverso i dispositivi mobili.
- Ridurre tassi di abbandono: gli utenti che si trovano davanti un sito mobile friendly resteranno più lungo
- Aumentare il tasso di conversione: più il sito è ottimizzato per dispositivi mobili, e più il traffico da questi sarà agevolato alla conversione.
- Risparmiare tempo e sforzi di sviluppo, poiché i designer si concentrano solo su alcune versioni principali
- Migliorare il posizionamento SEO, poiché i motori di ricerca premiano i siti web mobile-friendly.
Cosa si intende per responsive design?
Quando pensi al responsive web design, non devi immaginarti una versione diversa del tuo sito web per ogni tipologia di utenti.
Il responsive web design richiede un modo di pensare più astratto: non riguarda solo le l’utilizzo di tecnologie responsive come quelle che conoscerai tra poco (media queries e sistema di griglie), bensì un modo completamente nuovo di pensare al design.
Si tratta proprio di cambiare approccio al modo in cui i designer pensano al web design.
Siamo arrivati ad una situazione in cui, parlare di “cross-device” non è più una questione che affrontano solo i grandi e-commerce, ma una preoccupazione che accomuna chiunque abbia un sito web online.
Scommetto sarà capitato anche a te!
Ecco perché il responsive web design ha preso sempre più importanza.
Immagina: accedi ad un sito col tuo smartphone e ti trovi davanti ad una fotocopia della versione desktop del sito.
Ovviamente, non riesci a leggere nulla perché i testi sono troppo piccoli, il caricamento dura un’eternità e non riesci a cliccare su alcun tasto.
Nel responsive web design, gli elementi della pagina si rimescolano in base alla crescita o alla riduzione della dimensione dello schermo.
Un design a “tre colonne” per il desktop può passare a “due colonne” per un tablet e a una sola colonna per uno smartphone.
Ora che hai scoperto il significato del responsive design…
Qui sotto puoi vedere un tipico esempio di quanto cambia l’esperienza utente quando si ha un sito web responsive.
Perché è importante avere un design responsive
Secondo Think With Google, quando si ha un sito web non layout responsive, la probabilità che i visitatori vengano convertiti in lead o clienti cala del 95%!
Il motivo è semplice: la pagina (non design responsive) si carica molto lentamente a causa dei troppi elementi presenti nella schermata, il risultato è che gli utenti abbandonano il sito.
Attenzione però, non è sufficiente garantire che gli elementi si adattino alla pagina solo nelle loro dimensioni.
Affinché un design responsive abbia successo, deve anche essere utilizzabile, accessibile e soprattutto deve avere senso!
Quando gli elementi si spostano all’interno della pagina, l’esperienza dell’utente può essere completamente diversa da una visualizzazione del sito all’altra.
Inoltre l’assenza di un sito web con un layout responsive peggiora le tue entrate e migliora quelle dei tuoi competitor: ben 60% dei mobile-user si sposta su un altro sito web quando non trova quel che cerca entro qualche secondo.
In sintesi: il tuo bounce rate aumenta, il conversion rate dei tuoi competitor cresce!
A questo punto ti chiederai: “Come fare ad evitare tutto ciò? Come creare un sito che possa soddisfare le esigenze degli utenti di ogni device ed essere quindi design responsive?”
Scopriamolo insieme nei prossimi paragrafi!
I principi del web design responsive
I principi del web design responsive rappresentano le fondamenta grazie alle quali oggi siamo in grado di realizzare una interfaccia responsive per ogni sito web. Ecco alcuni principi del web design responsive:
- inizia a pensare mobile-first
- concentrati sul contenuto
- sfrutta i design pattern
- dai importanza ad accessibilità e usabilità
- sfrutta Media Queries e Breakpoints
Inizia a pensare mobile-first
I dispositivi mobile richiedono ai team di design di concentrarsi solo sui dati e sulle azioni più importanti di un’applicazione. In uno schermo con meno pixel non c’è spazio per elementi non necessari.
Ricordati che quando parliamo di responsive design, non si parla solo di adattare gli elementi a diverse grandezze.
Il vero successo della responsive mobile design è creare un’esperienza di valore su ogni dispositivo.
Grazie all’approccio mobile-first, inizia a stabilire delle priorità.
Il mobile è un dispositivo particolare…
Lo utilizziamo nei posti più disparati: cucina, bagno, macchina, ufficio, al parco, ecc..
Quando un progetti per i dispositivi mobili, il risultato finale dovrebbe essere un’esperienza incentrata sulle attività chiave che gli utenti svolgono quando si trovano da mobile.
Concentrati sul contenuto
Quando lo schermo si riduce, concentrati solo sui contenuti rilevanti
Come abbiamo visto poco sopra, il mobile pone l’utente in condizione di perdere l’attenzione molto facilmente, inoltre spesso la connessione può essere non ottimale.
Questo porta i mobile-user a preferire interazioni brevi e semplici.
Quindi cosa è necessario fare?
Nella user interface responsive per gli utenti mobile, dovrebbero essere mostarti solo i contenuti rilevanti: come titoli, hero image e CTA. I testi lunghi uccidono l’attenzione.
Analizza attentamente i contenuti che mostri sui vari device e prova a snellire (quanto più possibile) l’esperienza di coloro che utilizzano lo smartphone.
Sfrutta i Design Pattern
Secondo Interaction Design Foundation, i Design Pattern della User Interface sono delle componenti ricorrenti che i designer sfruttano per risolvere i problemi di progettazione.
Ad esempio, i breadcrumbs danno la possibilità agli utenti di ripercorrere i loro passi. Questo pattern lo trovi spesso negli e-commerce oppure nel processo di completamento di un percorso.
Dai importanza ad accessibilità e usabilità
Utilizzate efficacemente il contrasto e lo sfondo. Considerate l’opportunità di imparare le scale tipografiche per armonizzare il testo e i titoli. Poiché alcuni utenti si affidano a lettori di schermo, fate in modo che tutto il testo sia “reale” anziché all’interno di immagini.
Sfrutta Media Queries e Breakpoints
Le Media Queries sono un strumento utilizzato nel CSS (ovvero i cosiddetti fogli di stile) che consente di applicare stili diversi alla pagina in modo dinamico in base alle caratteristiche del dispositivo su cui viene visualizzato.
Ad esempio, si possono utilizzare media queries per modificare la dimensione dei font o la disposizione degli elementi in una pagina web in base alla larghezza dello schermo.
Breakpoints, invece, sono punti specifici di larghezza dello schermo in cui vengono applicate le media queries.
Ad esempio, si potrebbe utilizzare un breakpoint per modificare la disposizione di alcuni contenuti in una se la larghezza dello schermo scende sotto una certa soglia.
In poche parole stiamo comunicando al sito: “quando la larghezza dello schermo è inferiore a 400 pixel, riduci questa immagine del 30%”
Insieme, media queries e breakpoints aiutano i designer a creare interfacce utente che si adattano automaticamente alle diverse dimensioni dello schermo.
Come rendere un sito web responsive?
Il primo passo per rendere un sito web responsive è cambiare il proprio approccio alla progettazione, e di conseguenza identificare il caso in cui ti trovi: stai progettando da zero oppure devi ridisegnare un sito web esistente?
Progettare da zero un sito web responsive
Se stai partendo da zero, ed in caso ti serva qualche consiglio puoi approfondire i nostri corsi, devi iniziare a conoscere il Fluid Grid System.
Questo è un metodo di responsive design che utilizza una griglia flessibile per creare interfacce utente che si adattano automaticamente alle diverse dimensioni dello schermo.
Il concetto di base è quello di utilizzare riferimenti e dimensioni percentuali anziché dimensioni per gli elementi dell’interfaccia utente.
Un sistema a griglie utilizza una griglia composta da colonne, dove ciascuna colonna è definita come una percentuale della larghezza totale dello schermo.
Gli elementi dell’interfaccia utente vengono quindi posizionati all’interno di queste colonne utilizzando classi CSS che definiscono le loro dimensioni come percentuali.
In questo modo, quando la larghezza dello schermo cambia, gli elementi dell’interfaccia utente si adattano automaticamente, mantenendo sempre una disposizione ordinata e proporzionale.
Siti responsive: esempi pratici
Di seguito sono riportati alcuni esempi di siti responsive nella pratica.
Per molti di questi esempi di layout responsive, la struttura e lo stile variano su diverse aree oltre a quelle mostrate.
Il primo esempio che vedrai è del responsive design italiano del nostro sito web.
Eye Studios
Il nostro sito web è stato progettato dando molta importanza ai visitatori da dispositivi mobili.
Come puoi notare nell’esempio a destra alcune parti di contenuto sono state omesse per dare priorità alle informazioni più importanti.
Ricordati che il responsive non prevede solo adattare le dimensioni, ma l’intera esperienza.
Nike
Nell’esempio di Nike che vedi riportato sopra, il brand ha deciso di dare la massima importanza alla call to action principale che guida gli utenti alla scoperta del loro online shop.
Ecco perché l’immagine in header nella versione per dispositivi mobili ha preso meno spazio lasciando la priorità al claim, alla descrizione ed alla CTA. Altro esempio di ottimo responsive design.
BMW
BMW ha deciso di riportare su mobile un’esperienza simile alla loro versione web.
Questa è un’ottima intuizione di responsive design, perché analizzando i dati nel loro settore si scopre che la maggior parte dei visitatori preferisce l’utilizzo della versione web durante le fasi di configurazione di una nuova vettura.
La versione mobile è spesso utilizzata solo per scoprire le caratteristiche principali di una vettura, le foto e le specifiche tecniche.
Ecco perché anche nei dispositivi mobili la call to action principale rimane la scoperta delle informazioni.
Zalando
In un ecommerce delle dimensioni di Zalando, come vedi nell’esempio sopra riportato, la priorità sui dispositivi mobili è guidare l’utente alla scoperta dei loro prodotti nella maniera più semplice.
Ecco perché nella parte alta dello schermo, il brand ha deciso di mantenere i filtri, la barra di ricerca dei prodotti, e la suddivisione delle categorie.
Ricordati sempre che i responsive design deve prima pensare all’esperienza.
Conclusioni
Ricordati che per un buon responsive design bisogna sempre concentrarsi sull’esperienza utente.
Come designer abbiamo il compito di assicurarci che questa esperienza sia conforme e di valore su tutti i dispositivi che gli utenti potrebbero utilizzare.
Se hai bisogno di un supporto con il tuo prodotto digitale, puoi contattarci oppure approfondire e migliorare le sue competenze nei nostri corsi di formazione.
Daniele Lunassi
Design Lead