Web Design Responsivo (adattivo), il web multi-piattaforma e multi-device a garanzia della migliore esperienza d'uso.

We don't design web pages.
We design systems.
Andy Clarke      


 
Nella continua ricerca di innovazione abbiamo approfondito e testato l'uso di una tecnologia
(ma soprattutto di un approccio) che cambierà il modo di fare web già nel corso di quest'anno:
il design responsivo (o adattivo).
 
Fino ad oggi è stato il designer a dettare la forma e l'esperienza d'uso di un sito web "imponendolo"
agli utenti, un po' come avviene nella carta stampata con la definizione di un canvas predefinito (il foglio).
Navigare online significava stare seduti davanti a un PC, situazione oggi ormai sempre meno frequente,
con l'esplosione dei dispositivi smartphone, tablet, WebTv, console, ecc…

Si stima che la navigazione internet mediante dispositivi mobili sopravanzerà quella attraverso
dispositivi desktop già nel corso del 2012; già oggi il numero di utenti mobile che accedono a Facebook
è doppio rispetto alla controparte desktop.
L'introduzione di questi nuovi strumenti ha evidenziato come siano profondamentente diverse
le motivazioni con le quali gli utenti sono spinti a interagire con i contenuti di un sito web.
Pensiamo, per esempio, a come cambiano le necessità di un utente che sta cercando un ristorante:
su desktop predilige un'esperienza più immersiva, magari descritta ampiamente da foto e video,
su mobile al contrario ricerca un'esperienza più rapida, informativa, meno suggestiva ma magari
con orari, numeri di telefono e localizzazione ben evidenti.

La sfida che si presenta a noi designer di esperienze web è un cambiamento radicale di approccio
nello sviluppo dei prodotti, volto ora a gestire l'ubiquità del web, regolando il rapporto che esiste
tra contenuto e contesto in cui viene presentato, oltre alle variabili "qualitative" più legate all'utente,
i suoi obiettivi, l'ambiente che lo circonda, la sua attenzione e capacità, garantendo al contempo
una gestione del codice più snella e rapida rispetto a uno sviluppo di molteplici versioni ad hoc.

Atto 1° - La morte della cornice    

In tutti i processi creativi l'artista inizia la sua opera scegliendo lo spazio di utilizzo: la tela per il pittore,
il blocco di marmo per lo scultore ecc… Nel web la definizione di "cornice" oggi non è più valida
perché è completamente appannaggio dell'utente, del suo browser e del device utilizzato
(basti pensare che attualmente le risoluzioni più diffuse sono una decina...)
L'esperienza che ne deriva può quindi essere allo stesso tempo fullscreen o coprire solo parzialmente
il canvas uscendo completamente dal controllo del progettista che non può simulare tutte
le combinazioni di layout possibili.
I designer da anni cercano di gestire questo comportamento attraverso design fluidi (blocchi
in percentuale, immagini in em ecc... ), riuscendo solo parzialmente nell'intento perchè non viene garantito
un uso efficiente dello spazio (pensiamo ai paragrafi al 100% della finestra composti anche
da 20/30 parole, faticosissimi da leggere).
L'accelerazione definitiva verso la necessità di design più efficaci è stata data dall'esplosione
di vendite di smartphone e tablet (anche mini pc): in questi device appare ancora più evidente
l'incapacità di fruire dei contenuti in modo confortevole.
La "tela" diventa quindi un ambiente flessibile e incontrollabile.
A prima vista potrebbe sembrare un aspetto negativo, in realtà apre scenari stimolanti,
fornendo al design del Web potenzialità decisamente elevate rispetto alla progettazione offline.

Atto 2° - Gli ingredienti

Griglie fluide, immagini flessibili, tipografia elastica e media queries sono gli ingredienti
fondamentali per lo sviluppo di un prodotto web responsivo.
Nessuno di questi potrebbe però garantire efficacia se non accompagnato dal cambiamento
di impostazione e filosofia del progetto; mai come ora la figura del web designer (o designer
delle interfacce o UX designer) deve essere riconosciuta come fulcro di un progetto di comunicazione
online, inserendosi in un piano ibrido dove si incontrano comunicazione, grafica, tecnica,
tecnologia ecc...
Tralasciando spiegazioni su griglie e immagini fluide, vale la pena dilungarsi su tipografia e media queries.
La gestione dei pacchetti di testo è un argomento estremamente delicato nell'online quanto nell'offline
e molto spesso tralasciato da grafici e web designer poco sensibili e attenti all'esperienza d'uso.
Nel design responsivo i caratteri sono espressi in em, unità percentuale indipendente dalla risoluzione
ma proporzionale al contesto in cui è inserito il testo, tecnica in realtà adottata da tempo
per rendere i siti accessibili e superare il limite della gestione in pixel di IE e che ora assume
ancora più ragion d'essere per una lettura confortevole (66 caratteri per linea ca.).

L'avvento delle specifiche CSS3 e soprattutto delle Media Queries permettono non più solo
l'identificazione del media utilizzato, come accadeva con quelle CSS2, ma di rilevare anche le caratteristiche
fisiche (larghezza - altezza) del dispositivo e del browser utilizzato servendo il giusto stile
in ogni contesto di utilizzo. Si tratta quindi di un progressive enhancement che può essere integrato
anche da tecniche javascript per migliorarlo ulteriormente.
La buona notizia è che il supporto a queste specifiche è robusto da parte dei browser,
su desktop, Firefox 2.5 e superiori, Safari 3 e superiori (Webkit quindi anche Chrome) e soprattutto
Internet Explorer 9 e superiori, scenario positivo anche sulla sponda mobile dove è pienamente
supportato da Mobile Safari, WebOs, Android, Opera mini e Mobile e, grazie a IE9,
anche su Windows Phone.

Atto 3° - Categorizzare gli spazi

In principio fu: "questo sito sito è ottimizzato per Internet Explorer 4 e successivi…".
Sono passati un bel po' di anni dai tempi in cui si facevano i siti ad hoc per un specifico browser
e risoluzione (a dire il vero noi non l'abbiamo mai fatto, ma se ne vedevano tanti in Rete…)
Questo approccio venne presto penalizzato dall'introduzione di nuovi schermi più grandi
e widescreen (conseguenza dell'esplosione degli LCD) e dell'arrivo di nuovi Browser (Safari,
Firefox, Chrome, Opera ecc…).
I possibili scenari di fruizione sono centinaia tra dispositivi e browser a disposizione,
per questo è importante identificare chiaramente delle categorie che permettano al prodotto
di essere quanto più possibile compatibile e utilizzabile da ogni dispositivo sul mercato di oggi
e nel prossimo futuro.

Non si può prescindere dal considerare le seguenti risoluzioni:

Atto 4° - Il processo di sviluppo

Il processo di sviluppo dei prodotti Web nella versione responsiva si arricchisce ulteriormente.
Lungi dall'essere mera espressione di un software (noi lavoriamo su sketch e codice fatti a mano)
prevede prima di tutto la redazione di un piano di comunicazione online, nel quale identificare
i valori aziendali, il target, il contesto e dove si tracciano gli obiettivi a medio e lungo termine.
Questo primo step è importantissimo per individuare le priorità che contraddistinguono
ogni tipo di utente ed ogni contesto, significa identificare con chiarezza gli obiettivi specifici
che ogni layout dovrà soddisfare.

È conseguente la realizzazione di un'architettura delle informazioni e di un design che tenga presente
fin da subito la necessità di essere "fluido" e multi device, elemento che ci richiede un ulteriore step creativo.
Il lavoro di sviluppo è ancora più complesso rispetto a quello "convenzionale", il controllo del layout
su piattaforme e browser differenti allunga i tempi e complica ulteriormente una fase già di per sé
molto dispersiva (pensiamo solo a rendere compatibile il codice con le vecchie versioni di Explorer…);
a questo si aggiungono nel mobile sempre nuovi dispositivi, tipologie di browser, tecnologie.

Perchè scegliere il design responsivo?

Il design responsivo o adattivo non è certamente lo stadio finale della progettazione online,
dove, come già detto, l'innovazione è rapidissima, rappresenta però un valido step
verso uno sviluppo più utente centrico, più volto, cioè, a garantire prima di tutto
un'esperienza e una fruizione dei contenuti sempre ottimale, salvaguardando la coerenza
dell'immagine su qualsiasi dispositivo.

E' evidente, quindi, che un progetto responsivo offra diversi vantaggi:

• fornisce agli utenti sempre la migliore esperienza d'uso per ogni dispositivo
• propone contenuti diversi declinandoli per modalità di accesso, intuendo le necessità
  di chi accede al sito (desktop/mobile tipicamente)
• raggiunge un pubblico più ampio e garantisce visite più profonde e rapide
• non diluisce l'autorità del sito dal punto di vista SEO
• risparmia codice nello sviluppo del prodotto e nella manutenzione
• è efficace nella condivisione delle pagine tra utenti mobile e desktop (una pagina mobile
  non responsiva vista su desktop è frustrante...)

E perchè non sviluppare direttamente un'App nativa?
Nella consultazione web volta a raccogliere informazioni sono palesi gli svantaggi
di un'app nativa al confronto con un design responsivo: i contenuti devono essere gestiti
due volte, è necessario sviluppare prodotti diversi per piattaforme diverse (iOs, Android,
Windows Phone ecc…), passare per i rispettivi Store per approvazione e pubblicazione,
e ultimo aspetto ma più importante si è completamente invisibili ai motori di ricerca.
Di contro, i browser mobile ancora non possono offrire: velocità di esecuzione,
utilizzo del giroscopio, della GPU, ecc… in Quamm abbiamo sempre pensato alle App
come elemento che va ad integrare un piano globale di comunicazione online,
utilizzandolo per indurre comportamenti specifici distanti da una "convenzionale" ricerca in Rete.

Vuoi vivere in prima persona l'esperienza del design responsivo?

Visita i nostri primi due siti adattivi: Federico Nero e BodyVip.

Scrivi un commento

I campi contrassegnati da (*) sono obbligatori.

Nome:
Email: *
Titolo:
Commento: *

Security Code: