Elaborare una strategia per il Responsive Design

Jared M. Spool

User Interface Engineering

articolo orginale:

Devising a Strategy for Responsive Design

29 Gennaio 2013

Quest’anno, sarà difficile trovare un’organizzazione che non abbia come priorità quella di rendere responsive il proprio sito web. Eppure, parlando alle organizzazioni che si muovono in questa direzione, abbiamo scoperto che non hanno ancora definito la loro strategia per arrivarci.

Tattiche di base

Quasi tutto ciò che si legge sul responsive design comincia con quella che io chiamo la tattica di base, gli elementi di base che rendono ‘responsive’ i siti responsive. Non si possono ignorare, costituiscono le fondamenta della strategia globale.

La prima tattica di base è scoprire i punti di rottura. Sono le larghezze di pagina che produrranno un riordino degli elementi del layout. Fra due punti di rottura gli elementi cambiano le loro dimensioni o scorrono accapo, ma nei punti di rottura, vedrete un cambiamento improvviso nella configurazione del layout.

Un design responsive può avere più punti di rottura, ad esempio: un telefono con schermo piccolo, poi un telefono con schermo grande, poi un tablet, quindi un computer portatile o un desktop. Molti team di sviluppo cercano di stabilire i punti di rottura basandosi sulla dimensione media degli schermi.

Tuttavia, è meglio studiare come vogliamo che sia il contenuto e la navigazione. Lasciando che siano i contenuti e la navigazione a guidare la scelta dei punti di rottura, i team spesso possono cavarsela con un minor numero di configurazioni di layout. Per esempio, un iPad con schermo ad alta risoluzione ‘Retina’, potrebbe facilmente condividere lo stesso layout del display di un portatile ben costruito, mentre un tablet di risoluzione inferiore potrebbe solo aver bisogno di un leggero aggiustamento dello stesso layout.

La seconda tattica di base è mantenere bassi i tempi di caricamento delle pagine. Troppo spesso, nella fretta della progettazione responsive, gli sviluppatori scoprono che hanno creato dei CSS che rallentano le loro pagine su ogni genere di dispositivo.

Un posizionamento intelligente delle ‘media query’ e la tecnica del ‘progressive enhancement‘ possono ridurre drasticamente la dimensione del file CSS sui dispositivi più piccoli e più lenti, aumentando notevolmente la loro usabilità. Imparando ad applicare precocemente questo principio, nel passaggio al web design responsive, i team di sviluppo non si troveranno a dover fare grandi revisioni lungo la strada (e ad affrontare il costo delle domande e risposte che ne derivano), quando scoprono quanto siano lunghi i loro tempi di caricamento.

La terza tattica di base è l’ottimizzazione delle dimensioni delle immagini. In questo momento, questa è la tattica di base più difficile da tenere sotto controllo, perché non ci sono delle linee guida consolidate da seguire. Retina e le altre tecnologie ad alta risoluzione creano un problema per i team di sviluppo, perché per apparire di buona qualità le immagini devono essere di grandi dimensioni, ma quelle stesse immagini sono lente da caricare su display a bassa risoluzione.

C’è un grande dibattito nella comunità degli standard, su come affrontare questo problema. Purtroppo, nessuna di quelle discussioni mette un team di sviluppo nelle condizioni di sapere come comportarsi e le linee guida sembrano cambiare quasi ogni settimana. Una volta che le cose si saranno stabilizzate, questo aspetto dovrebbe essere più agevole da affrontare.

Che cosa stiamo lasciando fuori?

Una volta che un team di sviluppo va oltre le tattiche di base, si trova ad aver a che fare con le implicazioni ben più più rilevanti, derivate dal web design responsive. La prima di queste grosse conseguenze sta nel capire come adattare allo schermo più piccolo, tutto quel materiale che hanno accumulato nella versione desktop del sito.

Naturalmente, non ci vuole molto prima che tutti si rendano conto che non tutto il materiale si adatterà. E’ a questo punto che prendono coscienza che occorre una strategia per tagliare i contenuti della versione desktop.

Il mobile per primo

Qualche anno fa, Luke Wroblewski vedeva i team battagliare su questo. Iniziò proponendo un’idea che chiamò ‘mobile first’ (la versione mobile per prima n.d.t.). L’idea alla base di questa strategia è che il team inizia da zero, ponendosi la domanda: “qual è la minima quantità di navigazione e contenuti, di cui abbiamo bisogno per rendere utile il nostro progetto?” Da qui cominciano a definire la configurazione minimale e percorrono la strada a ritroso, verso il caso con il massimo di contenuti e navigazione.

Il principio guida del ‘mobile first’, è che è più facile da aggiungere ad un design, piuttosto che togliere. Cominciando con una configurazione minima, è possibile aggiungere, via via che si guadagna di più spazio negli schermi e risoluzioni più grandi.

Luke suggerisce, tuttavia, di aggiungere in modo parsimonioso e ponderato. Può darsi che ci siano cose nel design attuale, che non hanno motivo di stare in nessun layout responsive, perché in realtà non sono utili all’utente.

In primo luogo la ricerca

I team comprendono realmente chi sono i loro utenti? Sanno che di cosa gli utenti avranno bisogno dal loro design? Che un team abbia scelto la via mobile first o che abbia deciso di tagliare i contenuti dal loro design attuale, faranno molta fatica se non sanno rispondere a queste domande. Devono prima fare i loro compiti a casa.

Il team può utilizzare la ricerca sul campo, l’analisi e altri metodi di studio per capire quali sono le funzioni importanti e quelle gradite, ma non necessarie. L’utilizzo di un insieme di scenari ben assimilato, può oliare gli ingranaggi delle discussioni su cosa tagliare e cosa tenere.

Senza che la ricerca e gli scenari, i team probabilmente si troveranno a discutere opinioni e dibattere su ogni decisione progettuale. Saltare la ricerca utente per una strategia di riduzione dei costi a breve termine, avrà un alto costo di progettazione a lungo termine, quando inizieranno le guerre di opinione.

Stabilire un processo di adeguamento dei contenuti

E’ probabile che tutte quelle parole e immagini che oggi vivono nel design attuale ingaggeranno una battaglia quando il team cercherà di inserirle in un layout più piccolo. Anche se alcuni team potrebbero cavarsela condensando o potando il contenuto, la maggior parte si ritroveranno con contenuti diversi per layout differenti.

Contenuti non completamente diversi, sia chiaro, ma piuttosto i contenuti giusti, che si adattano al dispositivo. Ad esempio, un titolo che sembra eccezionale visto alla risoluzione di un portatile, potrebbe non funzionare affatto sullo schermo delle dimensioni di un cellulare. Come Karen McGrane ama dire, “il troncamento non è una strategia per i contenuti …”

Una strategia adattativa dei contenuti accompagna la strategia del responsive design, modellando le varie forme che assumeranno i contenuti del sito, in tutti i suoi layout. Una volta che è stata pensata la strategia, il team può mettere insieme un processo di supporto editoriale e gli strumenti di gestione dei contenuti. L’alternativa è quella di combattere con il contenuto che cerca di adattarsi a configurazioni per cui non è stato progettato.

Cambiare l’informazione in interazione

Avere un sacco di spazio sullo schermo dà un ampio margine di manovra per la progettazione, in particolare quando si visualizzano le informazioni in modo massivo. Per esempio, è facile mettere tutte le caratteristiche di un prodotto su una tabella di più prodotti a confronto, con tutte le sue gloriose righe e colonne, proprio lì davanti agli occhi di tutti. Su un piccolo schermo, a bassa risoluzione, quella tabella dei dati utili diventa esponenzialmente inutilizzabile e per quanto pinch-zoom si faccia (gesture di zoom con due dita n.d.t.) non si riuscirà a dargli un senso.

I team di sviluppo che si approcciano al responsive design hanno bisogno di una strategia per riuscire a creare delle interazioni dove un tempo le stesse informazioni erano semplicemente spiattellate sullo schermo. Utilizzando un’interfaccia interattiva, gli utenti possono manipolare direttamente i filtri per scegliere i dati di cui hanno bisogno.

Perfino la navigazione del sito, che prima poteva essere stata risolta attraverso un mega-menu (o, almeno, il team pensava di avergli dato una soluzione), ora deve essere interattiva e pensata accuratamente. Schermi di piccole dimensioni richiedono che i dati siano il punto di partenza di interazioni, con azioni di tipo ‘touch’ evidenti per le funzioni più importanti e con gesture più nascoste, per le scorciatoie.

Cosa fare con quella immagine

Tutta la strategia è legata alle immagini. Una eccellente strategia di progettazione responsive saprà cosa fare con ogni immagine, mentre una scadente costringerà il team a scontrarsi con risultati non ottimali e rallentare i tempi di produzione.

Prendete un articolo di notizie online con foto e diagrammi di supporto. Per ogni immagine, qualcuno dovrà decidere la giusta linea di condotta. Ridurrete l’immagine per le risoluzioni inferiori? Ritaglierete l’immagine? Che ne dite del ridimensionamento più ritaglio? Ci metterete una funzione touch-to-zoom? O forse è possibile togliere del tutto l’immagine, dal momento che è più un elemento di contorno, che necessaria per la storia?

Se lavorate in un sito di notizie, una strategia a lungo termine per il trattamento delle immagini può aiutare moltissimo. Questo significa saper decidere, per ogni immagine, quale alternativa verrà utilizzata e dare alla redazione un modo semplice per indicare il miglior risultato. Dal momento che la maggior parte dei siti ha a che fare in qualche misura con le immagini, i team dovranno avere una strategia simile.

La vostra strategia deve fornirvi il percorso per arrivarci

Quando cercate di convincere i manager di un’azienda quanto sia importante il responsive design, è facile non rendersi conto fino a che punto sarà profondo il suo impatto. Dire sì al responsive design richiede modifiche al processo di redazione, alle modalità con cui ci si avvicina al progetto visuale e al progetto dell’interazione ed a come pensate ai vostri utenti ed ai loro obiettivi. Essere preparati con una strategia solida renderà più facile la transizione verso il responsive e ridurrà le sorprese lungo la strada.

Volete saperne di più sul responsive design?

Se il vostro team si dibatte su come progettare in modo responsive, dovreste unirvi a noi nel seminario virstuale di Stephen Hay ‘Responsive Web Design Workflows‘ del 12 Dicembre.
Stephen Hay ha un approccio pratico per migliorare il vostro workflow nel responsive design.

Sull’autore

Jared M. Spool è il fondatore di User Interface Engineering. Trascorre il suo tempo di lavoro con i gruppi di ricerca presso la società e aiuta i clienti a capire come risolvere i loro problemi di progettazione.

Condividete le vostre opinioni con noi

Quali sono le vostre strategie per la preparazione di un disign o modello responsive? Fatecelo sapere sul nostro blog

Jared M. SpoolJared M. Spool

Questo articolo è stato ripubblicato con l’autorizzazione di User Interface Engineering. Per altri articoli e informazioni, visitate il sito http://www.uie.com/

Traduzione di

Stampa articolo Scarica il file in formato PDF

Elenco Articoli di Jared M. Spool

 Iscriviti alla newsletter


Argomenti correlati: mobile · usabilità web.

Lascia un commento