Dal click al touch. Il responsive web design


La potenza dei dispositivi mobili fa sì che un numero crescente di persone li preferisca ai tradizionali PC, rispetto ai quali non sono più considerati un ripiego per quando ci si trova lontani dalla scrivania.
Il mobile web, ovvero l’utilizzo di applicazioni e browser per la connessione alla rete attraverso dispositivi non fissi, come il computer, ma tecnologie che portiamo con noi in ogni momento e luogo, come smartphone o tablet, è in continua crescita. Infatti, secondo i dati[1] Audiweb sull’audience totale di internet (total digital audience) del mese di novembre 2014, si evince come la fruizione di internet da device mobili sia maggiore rispetto ai computer: la mobile audience nel giorno medio raggiunge 17,4 milioni di utenti unici, che trascorrono online in media 1 ora e 38 minuti per persona; la fruizione di internet da PC nel giorno medio registra 12,8 milioni di utenti, collegati in media per 1 ora e 10 minuti.
Tutto ciò sta, così, spingendo sempre più le aziende ad investire in questo ambito.
Muoversi in questa direzione significa andare incontro alle esigenze del responsive web design[2], ovvero una metodologia di lavoro, per creare siti reattivi, in grado di adattarsi graficamente alle caratteristiche del dispositivo usato dall’utente.
Un sito moderno non deve essere semplicemente funzionale e usabile, ma deve soprattutto offrire soluzioni fluide, poiché, ad esempio, la struttura di un cellulare è ben diversa da quella di un desktop, a partire dallo schermo di piccole dimensioni e dall’assenza di mouse e tastiera.
Il responsive web design non è semplicemente una tecnica, ma un nuovo modo di immaginare il World Wide Web: non più la necessità di versioni diverse dello stesso sito, ma un unico sito auto-adattante rispetto all’enorme e crescente varietà di dispositivi con cui viene o verrà fruito.
Il primo ad utilizzare il termine “responsive design” è stato Ethan Marcotte, in un articolo su A List Apart[3] del 2010 [http://alistapart.com/article/responsive-web-design], in cui scriveva “Piuttosto che creare design sconnessi per un numero sempre crescente di device web, dovremmo trattarli come aspetti della stessa esperienza. Possiamo disegnare per un’esperienza visiva ottimale, ma incorporare le tecnologie basate sugli standard all’interno dei nostri design per renderli non solo più flessibili, ma anche più adattabili al media che li rende. In breve, dobbiamo fare pratica con il responsive web design”. [“Rather than tailoring disconnected design to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design”.]
Tutto ciò significa progettare e sviluppare un’esperienza d’uso, dal click al touch, un unico sito web in grado di fornire le stesse informazioni e gli stessi servizi agli utenti, indipendentemente dallo strumento che stanno usando.
Ciò consente ai diversi dispositivi di adattare il layout delle pagine all’ambiente di navigazione, presentando per ogni risoluzione la rispettiva versione del sito dedicata. Inoltre, aumenta la qualità della fruizione, sia in termini di navigabilità, sia in termini di leggibilità dei contenuti del sito stesso.
In questo modo il sito, attraverso una visualizzazione ottimizzata ed un’attenta organizzazione e gestione dei contenuti, è in grado di far vivere un’esperienza utente positiva nei contesti d’uso più diversi (computer desktop, tablet, smartphone, ecc.).
Luke Wroblewski, autore del libro “Responsive Web Design”, sostiene il concetto di ‘prima il mobile’ (‘mobile first’), ovvero, per progettare un sito è necessario partire dalla strutturazione dei contenuti per lo schermo limitato nelle dimensioni dei dispositivi mobili. Non si parte, quindi, da un layout concepito per il desktop per poi adattarli al mobile, ma si parte proprio dai limiti posti dai dispositivi mobili per concentrarsi al meglio sui contenuti essenziali, per poi arricchire il tutto man mano che aumentano le dimensioni dello schermo e la potenza dell’hardware.
Di seguito alcuni concetti da prendere in considerazione per realizzare siti dal design responsivo: adattamento del layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop); semplificazione del layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli, nascondendo quelli non essenziali; adattamento delle dimensioni delle immagini alla risoluzione e alle dimensioni dello schermo utilizzato; predisposizione di immagini meno pesanti per i dispositivi che non possono sempre sfruttare la banda larga; individuazione e impiego delle funzionalità del mobile, come ad esempio, la geolocalizzazione; realizzazione di un’interfaccia adatta all’interazione touch per i dispositivi che la supportano.

 

[1] Dati Audiweb sull’audience totale di internet (total digital audience) del mese di novembre 2014.

[2] Da Wikipedia
Il responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo con i quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità per l’utente di ridimensionamento e scorrimento dei contenuti. Il design responsivo è un importante elemento dell’accessibilità, la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via).

[3] A List Apart è una rivista online fondata nel 1997 che esplora la progettazione, lo sviluppo ed il significato dei contenuti web.

 

[Stefania Giuseppetti per AZ Franchising]