Il Responsive design

responsive_design
Nome più balordo forse era difficile trovarlo, ma tant’è orami questo è il termine che si deve usare per descrivere un layout di un sito web che sia studiato appositamente per essere fruibile dagli utenti di smartphones e tablets.
Possiamo quindi dire che il ‘Responsive web design’ si riferisce a un sito in grado di rimodellare se stesso a seconda del formato e della risoluzione del dispositivo con cui si accede al sito, dal più grande desktop allo smartphone.

La tecnica per ottenere questo è quella di utilizzare le ‘media queries’ CSS e più fogli di stile CSS per modificare il layout del sito web di conseguenza. Questo metodo di web design è pensato per dare all’utente la migliore esperienza di visualizzazione dei contenuti sul dispositivo o piattaforma che si sta utilizzando.

Le media queries possono essre utilizzate a livello di pagina web con dichiarazioni del tipo:

<link href="ar169.css" rel="stylesheet" media="screen and (device-aspect-ratio: 16/9)" />

oppure inserendo una media query all’interno di un CSS, così:

@media screen and (device-aspect-ratio: 16/9)
{
   /* nostre regole CSS */ 
}

[ad code=5]

Tale tecnica tenta di modificare il layout a seconda della grande varietà di display utilizzati oggi. Invece di lavorare solo le dimensioni del display “più comuni” e quindi ipotizzando un utente “medio”, il responsive design adatta il layout alle diverse condizioni di visualizzazione e alle esigenze degli utenti.
Ma un responsive design non si limita a cambiare solo il layout di pagina. E ‘abbastanza intuitivo quanto sia importante che le immagini siano regolate e ridimensionate di conseguenza e ci sono alcuni modi per realizzare questo: è possibile ridimensionare l’immagine in modo proporzionale, o ritagliarla in modo dinamico.

Sin qui il lato tecnico della questione. Ma siamo sicuri che sia solo un fatto tecnico? Che tutto si esaurisca col ridisegnare o ridimensionare layout ed immagini? Certamente no. L’importanza del layout e degli accorgimenti tecnici è importante, ma forse lo è ancora di più la revisione dei contenuti necessaria per adattarsi alle differenti esigenze dell’utente. Questo aspetto diventa addirittura determinante per quanto riguarda l’utilizzo in mobilità. Le esigenze ed il modo di utilizzare internet ed un browser sono infatti molto diversi quando si è in mobilità con uno smartphone rispetto all’utilizzo standard da computer.

Sono diverse in primo luogo le informazioni che si ricercano ed è molto diversa la priorità che si da alle informazioni. Facciamo un esempio: se ci colleghiamo al sito di McDonalds in mobilità col nostro smartphone è molto probabile che le informazioni tipo ‘I nostri prodotti’, ‘Novità’, ‘In famiglia’ e via discorrendo (così come appaiono sul menu del sito su un normale computer) siano realmente di poco interesse. In quelle circostanze un utente del sito starà verosimilmente cercando un ristorante vicino a dove si trova in quel momento e sarebbe opportuno presentare il sito anticipando questa probabile esigenza.
Anche la quantità di informazioni andrebbe rivista di conseguenza. Alzi la mano chi è interessato a leggere la storia della società dal proprio smartphone.

Se visitate il sito Microsoft da smartphone verrà correttamente visualizzata la versione mobile. Fantastico. Ora provate a scorrere la lunghissima pagina iniziale ed in fondo trovate ‘download’. Se c’è servirà a qualcosa. Andateci e vi ritrovate nella pagina dove scricare il service pack 3 per Windows XP ecc. !? Sullo smartphone? Considerate che il sito Microsoft è uno dei top ‘responsive design sites’ del 2012 secondo Netmagazine.com.

Non dimentichiamo poi l’importanza del sistema di navigazione. Da uno smartphone, soprattutto se in mobilità non siamo collegati ad un hotspot, richiediamo che ciò che ci interessa possa essere raggiunto con massimo un click.
Questo significa una completa revisione dei contenuti semplificando anche in quantità ed una una riorganizzazione in funzione degli interessi utente.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.