Responsive design: il web declinato su tutti gli schermi

Il web è andato oltre il desktop. Le statistiche ci dicono che più del 50% degli utenti navigano su internet da dispositivi diversi dai classici desktop o laptop. Ecco un’anteprima del talk dedicato al responsive design che Marco Casario terrà al prossimo Codemotion.

Questo dato non può essere trascurato oggi, per questo rilasciare un’applicazione o un sito web che non sia completamente navigabile e fruibile dai dispositivi mobili come tablet e smartphone è una sentenza di morte per il sito stesso.

L’approccio per la realizzazione di un’applicazione web che sia cross-screen e responsive, ovvero che sia in grado di essere fruita indipendentemente dalla dimensione dello schermo all’interno del quale viene caricata, non impatta solo sulle scelte tecnologiche ma parte dalla progettazione della user experience e degli elementi dell’interfaccia utente.

Dovrebbe esser scartata la soluzione che prevede di creare una versione alternativa completamente ottimizzata per ogni famiglia di dispositivi, perchè questo renderebbe l’applicazione difficile da scalare e da manutenere. Inoltre significherebbe correre dietro alla tecnologia, che in questo settore, va alla velocità della luce. Per ogni nuovo dispositivo con caratteristiche tecniche diverse, come risoluzione e dimensione dello schermo, si dovrebbe creare una nuova versione ottimizzata che prenda in considerazione queste nuove features.

L’approccio del Responsive Web Design rappresenta una soluzione percorribile ed economica a questa problematica.

Quali sono gli ingredienti che permettono di creare un’applicazione web di questo tipo?

Si comincia dalla progettazione degli elementi dell’interfaccia grafica e si definisce come questi dovranno ridisporsi all’interno dello schermo alla varie dimensioni.

Sarà quindi inizialmente compito dello user interface designer quello di declinare le diverse versioni della stessa applicazione. In questa fase si usa la tecnica delle griglie per definire il layout e il designer si concentrerà sul rapporto tra elementi della pagina e i rispettivi containers.
La grafica dell’applicazione verrà poi passata al team tecnico che avrà il compito di creare un layout liquido, in grado cioè di ridisporre gli elementi al suo interno al variare della dimensione dello schermo. Si raggiunge questo risultato utilizzando i CSS e le misure relative espresse in EM, per esempio, e calcolate con la seguente formula:

target / context = misura desiderata in em

Una volta che il layout fluido è stato creato si può passare a definire come gli elementi della pagina si dovranno ridisporre alle differenti dimensioni dello schermo, e quindi dei dispositivi.

Si usano le Media Queries dei CSS3 che permettono di definire degli statement CSS secondo il verificarsi di alcuni parametri:

@media screen and (min-width: 960px) {

body {

font-family: ‘Merriweather Sans’, sans-serif;

font-weight:300;

font-style:normal;

}

}

In questo esempio verranno applicate al body gli statement CSS definiti, solo se la pagina web è caricata all’interno di uno schermo con larghezza minima pari a 960px.

Così facendo definiamo per le varie famiglie di dispositivi come il contenuto verrà renderizzato dal browser.

A questo punto abbiamo un’applicazione in grado di adattare e ridisporre il suo contenuto ed i suoi elementi all’interno di qualsiasi area e si può passare alla fase in cui viene inserita la logica, ovvero come l’applicazione reagisce all’interattività dell’utente.

Anche questa fase è molto delicata  in quanto bisogna tenere conto di fattori cruciali come per esempio:

• la connessione (di solito lenta)
• le performance
• il consumo della batteria
• l’usabilità
• l’ interattività attraverso touch gesture (gli eventi touch hanno un ritardo di circa 300ms per essere eseguiti rispetto al click del mouse)
• l’inconsistenza grafica tra i differenti sistemi operativi.

La fase di testing, fixing e optimizing è una delle più delicate e spesso più complesse. Ma è anche quella che determina il successo dell’applicazione.

È quindi cruciale usare gli strumenti giusti e le tecniche di ottimizzazione del codice per ridurre i tempi di caricamento delle pagine web. Riuscire a risparmiare anche solo qualche Kb può fare la differenza.

In conclusione, l’approccio alla progettazione e allo sviluppo di un’applicazione responsive per i diversi dispositivi richiede competenze e un workflow diverso rispetto allo sviluppo di una classica applicazione. Non usare questo approccio per le applicazioni web significa impedire ad una grossa fetta di utenti di poter navigare i contenuti delle vostre pagine web.