Bella serata al Pacino Cafè per l’appuntamento mensile dell’Ux Book Club di Milano nato a maggio grazie @Lallodola, aka Daniela Costantini! 😉 Questa volta si parla di Responsive Web Design di Ethan Marcotte

Libro e argomento di discussione: Responsive Web Design  – scritto da Ethan Marcotte – uno dei temi caldi in tempi di transizione tra la comfort zone del web desktop e le innumerevoli declinazioni che gli scenari mobile – al plurale! – stanno aprendo. Le questioni che emergono sono principalmente legate alle soluzioni tecnologiche praticabili, ai contesti d’uso e al contenuto.

LE DIMENSIONI – DEL MONITOR – CONTANO?!

Al momento, uno dei modi è basarsi sugli user agent e/o sulla dimensione dei display, come nel caso delle media-query, per erogare la versione migliore rispetto al device con cui l’utente accede. Questo approccio empirico è però limitato dal fatto che alcuni dispositivi – come alcuni modelli della HTC e Android – danno problemi e, soprattutto, dall’introduzione di nuovi formati (Mini iPad, 10′, 7′ etc) che rendono ancora più frammentario l’ecosistema.

Alcuni autori, come Luke Wroblewski propongono una versione lato server ovvero Responsive Design + Server Side Components (RESS). Durante la discussione è emersa anche l’idea di utilizzare come parametro discriminante la velocità di connessione (wi-fi vs. 3G).

Il vero problema – penso – rimane la difficoltà di identificare il reale uso che le persone fanno degli strumenti di connessione in mobilità: posso usare il cellulare davanti a una vetrina per comparare i prezzi di un oggetto, in metropolitana nella calca del mattino, per leggere le prime pagine dei quotidiani o in casa, sul divano mentre guardo un film e twitto o socializzo le frasi culto sul secondo schermo. Le esigenze informative, il rumore di fondo – reale e cognitivo! – le motivazioni d’uso saranno profondamente diverse, pur utilizzando il medesimo device.

CONTENT IS KING…

Un altro aspetto critico del responsive web design è il contenuto. Ridurre e scalare quello del sito desktop, o partire da una prospettiva bottom up – ovvero dal piccolo per far poi crescere, aggregando e arricchendo – fino a strutture sempre più complesse, come discusso da Donald Norman in Vivere con la complessità?
Da designer, la risposta sarebbe… dipende! e ovviamente ci sono casi in cui i testi sono tanti, lunghi, per di più scritti con criteri e terminologie lontani dalla sintesi necessaria per il display di uno smartphone.
Meglio, allora, due versioni differenti del sito o, quantomeno, un approccio Mobile first.

UNO, NESSUNO, CENTOMILA

Il rischio è di ritrovarsi – come ai vecchi pessimi tempi della guerra dei browser – a dover sviluppare più versioni. Cosa che genera problemi di aggiornamento e sincronizzazione dei materiali gestiti da redazioni diffuse. Specialmente se non si vuol rinunciare, come auspica Jacob Nielsen in Mobile Site vs. Full Site – chi mi conosce sa quanto mi secchi concordare con lui 😉 – ad avere tutti i contenuti del sito desktop.
La soluzione provvisoria, in questo laboratorio della transizione potrebbe essere uno o più optimized site o, viceversa, un unico responsive web site. L’importante è individuare con i clienti una strategia corretta come illustrato da Theresa Neil nella matrice comparativa web/app in Mobile Design. Strategic Solutions (il suo Mobile Design Pattern Gallery è un’altra interessante lettura).

TRA IL DIRE E IL FARE… PROTOTIPARE!

Chi ci ha già provato, sa quanto sia difficile sviluppare anche solo il proprio sito: figuriamoci per i clienti! Sia per capire quale strategia adottare, sia per capire… quali criteri usare per capire quale strategia adottare!

Le web analytics possono dare sicuramente degli ottimi spunti per capire il traffico realmente generato da dispositivi mobile o quali contenuti sono ricercati in questo contesto d’uso e… provare! Sia utilizzando prototipi, in cui è più facile simulare e comprendere i meccanismi di navigazione, interazione e le differenti gesture. Molto utili i framework o tool-kit come Twitter Bootstrap di Mark Otto & Jacob Thornton per lo sviluppo front-end e di app disponibile su Github.

Per approfondire:

• Marcotte, E. (2011). Responsive Web Design. A Book Apart