Il responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, smart tv, cellulari ecc..), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.
Il design responsivo è un importante elemento dell’ accessibilità, la quale tiene conto inoltre di numerosi altri fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali: capacità cognitive, vista, difficoltà fisiche, e così via).
Nello specifico quindi possiamo dire che se parliamo di RWD stiamo parlando di :
- adattare il layout al più ampio numero di risoluzioni di schermo possibile (dai telefoni cellulari al desktop);
- adattare le dimensioni delle immagini (e in genere di tutti i contenuti a larghezza fissa) alla risoluzione e alle dimensioni dello schermo;
- semplificare il layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli;
- nascondere gli elementi non essenziali su questi stessi dispositivi;
- fornire un’interfaccia adatta all’interazione touch per i device che la supportano;Un sito progettato per il RWD utilizza Cascading Style Sheets 3 media queries, un’estensione della regola @media rule[1], per adattare il layout all’ambiente nel quale viene visualizzato, insieme a griglie di proporzioni fluide, e immagini flessibili:- Le Media Queries consentono alla pagina di usare diversi stili CSS sulla base delle caratteristiche del device sul quale vengono visualizzati, principalmente sulla larghezza del viewport, ovvero della finestra del browser nella quale viene visualizzata la pagina.
– Il concetto di griglia flessibile richiede che gli elementi siano dimensionati tramite unità relative come percentuali ed EM, e non come unità assolute come pixel o punti
– Le immagini flessibili devono poter essere visualizzate con dimensioni diverse, in modo da potersi adattare ai layout di diverse dimensioni evitando di sovrapporsi agli altri elementi.
Come risultato, gli utenti che utilizzano diverse periferiche e browser per la visualizzazione hanno accesso ad un singolo sorgente i cui contenuti vengono disposti in modo tale da essere facilmente consultabili, e si possa navigare senza dover fare troppe operazioni di ridimensionamento, scorrimento e spostamento delle pagine.
I principali device identificati sono:
– mobile: per cellulari
– narrow: per tablet
– normal: pc desktop
– wide: schermi di grandi dimensioni
Progettare in responsive design significa essere a passo con le ultime tendenze vista l’enorme e sempre più crescente diffusione dei dispositivi tablet e mobile. Tale tecnica richiede inoltre molta professionalità e tempi di sviluppo ma il risultato ripaga non poco sotto il punto di vista dell’usabilità dell’applicazione web.
