Photo Credits @ Thinkstockphotos // iStock - 181165290
Responsive design è ormai la parola magica presente in ogni Web Project Plan. Questa esigenza nasce dal fatto che è impensabile progettare un sito web senza tenere conto della moltitudine di device dai quali accedono gli utenti.
Uno dei lavori più impegnativi di un’azienda che realizza la propria presenza digitale è considerare l’intero ecosistema del brand e l’esperienza di navigazione dell’utente attraverso i diversi canali. L’aspettativa è che il tone of voice, le funzionalità e il design siano quanto più possibile coesi.
Dal multi-channel al cross-channel
Luoghi fisici, pc, smartphone e tablet sono i canali attraverso cui gli utenti si muovono in maniera simultanea e non più soltanto sequenziale. Da ciò ne deriva l’esigenza di passare da una strategia multi-channel a una strategia cross-channel, come evidenziato nell’articolo di Nielsen Norman Group che identifica i 4 elementi necessari per la definizione di questa strategia:
- Coerenza. Dal design ai contenuti alle funzionalità, bisogna dare all’utente dei riferimenti univoci in maniera che sappia orientarsi sempre all’interno del sito a prescindere dal device con cui accede.
- Senza soluzione di continuità. Se lo desidera, l’utente deve poter completare un’azione attraverso più canali. Ad esempio, se un utente inserisce un prodotto in un carrello mentre è connesso in un sito e-commerce su un dispositivo mobile, quello stesso prodotto dovrebbe essere nel carrello quando accede al sito da un computer portatile.
- Disponibilità. L’utente deve essere in grado di completare le attività indipendentemente dal dispositivo. Ad esempio, il controllo di un volo dovrebbe essere disponibile attraverso il web, una applicazione mobile, il desk dell'aeroporto o un agente al terminal dell'aeroporto.
- Contesto. L'esperienza deve essere ottimizzata per il canale. Ad esempio, le applicazioni mobile devono integrare informazioni sulla località in base alla posizione corrente dell'utente, come il meteo, i buoni sconti nei supermercati, la distanza da negozi o luoghi fisici.
I vantaggi del responsive design
I vantaggi di questo approccio sono sia per l'utente sia per l'azienda. Lato utente in quanto il responsive design è sicuramente una delle modalità che consentono di applicare una strategia cross-channel per quanto riguarda l’esperienza online che diventa senza soluzione di continuità.
Lato azienda, questo approccio consente di creare una singola versione del sito che si adatta al dispositivo di accesso, che significa risparmio. In quanto, il tempo e le risorse necessarie per creare una versione mobile, tablet e desktop di un sito è quasi tre volte lo sforzo necessario per creare un unico sito responsive.
Per scoprire velocemente se un sito è responsive, provate ad aumentare o ridurre la finestra del browser, se gli elementi si ricollocano in base alla dimensione ecco, siete su un sito responsive.
Dimensione schermo vs Dimensione utente
Tuttavia, come sottolinea Luca Orlandini, bisogna considerare che "il vero responsive non pensa agli schermi dei dispositivi, ma agli utenti".
Quando un utente accede a un sito dal mobile ha sicuramente delle esigenze diverse rispetto a quando accede da desktop, diventa quindi necessario scremare e selezionare i contenuti e le aree più importanti in modo che l’utente, che magari si trova in viaggio, arrivi subito alle informazioni che cerca. Se una volta 3 era il numero perfetto di click per arrivare al contenuto desiderato, adesso con il mobile questo numero deve essere ridotto a 1, massimo 2 click.
Ethan Marcotte ha individuato tre componenti chiave per il responsive web design:
- Griglie flessibili;
- Immagini flessibili;
- Media query.
I contenuti e il layout diventano fluidi adattandosi naturalmente alle dimensioni del dispositivo di accesso al sito. Il responsive web design non cambia il contenuto di un sito, ma piuttosto la presentazione del contenuto. L’uso di media query consente di restituire delle specifiche informazioni solo a determinate risoluzioni oppure alternare porzioni di testo in funzione del dispositivo che viene utilizzato per navigare il sito.
Responsivator
Per testare quanto è responsive il vostro sito e come viene visualizzato con le diverse risoluzioni, inserite il link nel Responsivator. Scoprirete quanto e come dovete affinare il vostro sito per renderlo davvero cross-channel.
