Non basta essere “responsive”, bisogna essere “adaptive”

Responsive iceberg by Brad Frost
Tempo stimato di lettura: 3 minuti, 16 secondi
Pubblicato il 31 ottobre 2012

Ormai è sulla bocca di tutti: il “responsive web design” è il futuro. Ne sono convinto anche io ma spesso ne sento parlare come di una tecnica innovativa e rivoluzionaria anche se in realtà non è proprio così.

Io stesso 8 anni fa creavo dei design con unità di misura relative solo che non vi era la necessità di adattare il tutto a vari dispositivi perché di fatto non vi erano dispositivi portatili in grado di navigare su internet in maniera decorosa.

I tempi cambiano e internet è diventato uno strumento indispensabile per certi versi. E’ cambiato anche il nostro modo di utilizzare internet: in autobus, per strada, in piedi e perfino in bagno comodamente seduti sul water.

Come vi avevo parlato nel mio precedente articolo sul “responsive web design, vi avevo (spero) convinto a tenere in considerazione tutte queste variabili e a passare a questa filosofia.

Che differenza c’è, dunque, fra un layout costruito con le percentuali che si costruiva 8 anni fa e un responsive design di ultima generazione? In pratica quasi nulla, se non il salto di qualità fatto dai browser web negli ultimi anni e la maturazione delle tecnologie.

La differenza radicale sta nella teoria. L’approccio fa la differenza e dobbiamo imparare a creare delle esperienze utente a partire dalle periferiche mobile fino ad arrivare ai desktop. Esatto, dal piccolo al grande. Dal dispositivo (teoricamente) meno capace a quello più capace. Dico teoricamente perché, ad esempio, Safari Mobile è avanti anni luce rispetto ad Internet Explorer 9. Tuttavia un dispositivo mobile non è detto utilizzi Safari Mobile o abbia pieno supporto a CSS3 o Javascript.

Questo significa essere “responsive”. Purtroppo adesso arriva la tegola: essere responsive non basta più. Di già? No in realtà è da sempre così, solo che non volevo mettere troppa carne al fuoco.

Responsive iceberg by Brad Frost

Responsive iceberg by Brad Frost

In tutta questa corsa all’innovazione non abbiamo tenuto in considerazione alcuni fattori fondamentali che vanno oltre al dispositivo: la lentezza e la latenza della connessione, le condizioni di utilizzo del dispositivo, ad esempio. Che senso ha, in fondo, rendere responsive il nostro design se poi l’esperienza utente di un’utente mobile è la stessa (se non addirittura peggiore) di un’utente desktop?

Ecco perché il responsive web design è solo la punta dell’iceberg. Dobbiamo anche essere “adaptive” e fornire delle esperienze utente basate non solo sulle capacità del dispositivo ma anche sulle condizioni di utilizzo, sulle capacità delle infrastrutture e le necessità dell’utente.

Quale miglior esempio di una galleria di immagini su un sito web? Spesso navigo su siti che mostrano gallerie di immagini con decine (se non centinaia) di immagini l’una a fianco all’altra, ma mi chiedo se ha senso mostrare tutto quel contenuto ad utente che naviga con il suo smartphone, probabilmente con una mano, mentre cammina per strada, obbligandolo a scrollare dei contenuti interminabili per altro eterni da scaricare con una connessione mobile. Forse in questi casi ha più senso mostrarne qualcuna meno e rendere così l’esperienza mobile decisamente meno frustrante.

La soluzione non è di certo l’utilizzo un semplice “display: none” per nascondere elementi di interfaccia: non voglio di certo incoraggiare l’uso di questa pratica sbagliata e inaccessibile. Parlo di fornire agli utenti i contenuti della nostra pagina in modo intelligente e sensato, sfruttando le capacità uniche del dispositivo (dove possibile), prendendo in considerazione i limiti fisici del dispositivo e, se necessario, sfruttando anche le tecnologie server-side per non dover gravare sui nostri utenti.

Non si tratta di creare un unico prodotto che vada bene per tutti i dispositivi e nemmeno di creare un prodotto per ogni dispositivo. Si tratta di creare un unico prodotto che risponda e si adatti alle esigenze dell’utente e delle caratteristiche uniche del dispositivo.

Avete mai pensato a come poter adattare il vostro design? Lo fate già? Se la risposta è “no” allora è proprio il caso di iniziare a darsi da fare perché qualcosa è cambiato e forse è il caso di cambiare anche il nostro modo di progettare per il web.

  • Cavoli…lo da da sempre, non solo da quanto è in voga il termine “responsive”. Un sito web NON è solo layout (responsive oppure fisso). Un sito web è moltooo altro, forse sopratutto altro…usabilità, velocità, consistenza, struttura, accessibilità, trovabilità, etc etc etc

  • Andrea Barghigiani

    Se devo essere sincero fino a qualche anno fa non mi interessava molto costruire un layout con le dimensioni impostate in percentuale o in em, la trovavo una pratica complicata…
    Ma da quando ho incontrato il termine Responsive Design mi sono incuriosito molto e grazie alle Media Query la costruzione di un layout diventa davvero più interessante.

    Leggendo questo articolo mi è venuta in mente una questione che trovo alquanto spinosa, essendo uno sviluppatore, sui miei blog condivido molto codice e mi sono posto la domanda “Come potrei mostrare questo codice in un dispositivo mobile?”

    Ovvero, talvolta il codice condiviso è lungo diverse righe e, anche se non ho ancora avuto il piacere di realizzare un layout responsive per i miei blog (cosa che verrà risolta in tempi brevi), sono preoccupato per i problemi di accessibilità che potrebbe incontrare un utente che visualizza il mio blog con uno smatphone.

    Quasi sicuramente questi blocchi di codice occuperanno l’intera dimensione di un display creando problemi nella visualizzazione e navigazione degli stessi… Pensavo di risolvere questo problema andando a creare un pulsante “Guarda il Codice” che, soltanto a dimensioni ridotte, avrebbe aperto con un effetto lightbox una immagine rappresentante la porzione di codice.

    Cosa ne pensi di questa soluzione?

    Visto che raramente troveremo persone che sviluppano conlo smartphone, credo che una immagine sia più semplice da consultare.

    • Ciao Andrea, la soluzione che proponi è quella che effettivamente avrei implementato anche io: una call to action “Guarda il codice” e al click mostra il contenuto (eviterei un lightbox e un’immagine ma lascerei del testo).

      In questo caso, tuttavia, affronterei il problema in un altro modo: quanto può interessare del codice da copiare e incollare a un’utente che naviga da uno smartphone? Direi poco e quindi migliorerei l’esperienza utente aggiungendo (via JS e tramite il controllo delle media queries) due pulsanti: “salva nei preferiti” e “invia codice via mail”. Così facendo eviti di mostrare troppo contenuto a chi naviga con dispositivi portatili e implementi una funzionalità molto utile che non pregiudica l’usabilità e l’accessibilità del tuo contenuto.

      • Andrea Barghigiani

        Veramente molto interessante la soluzione da te proposta! Mi piace molto l’idea di poter inviare la porzione di codice vie email, nel prossimo design cercherò di implementare questa caratteristica ma ti avverto, probabilmente tornerò a chiederti qualche suggerimento 😀

Shares