Fino a poco tempo fa si poteva scegliere fondamentalmente tra due strade principali nella progettazione di un sito: layout fisso o fluido. Una struttura fissa prevede una larghezza stabilita, normalmente sui 960 pixel, mentre una fluida si adatta allo schermo, comprimendo o sparpagliando i contenuti su spazi più o meno ampi, a seconda delle varie risoluzioni.
Entrambe le strategie hanno dei punti deboli: un layout fluido su monitor molto grandi crea una spiacevole dispersione dei contenuti, mentre una larghezza fissa rende difficile la visualizzazione su schermi piccoli, come quello di un tablet o di uno smartphone.
La soluzione adottata di recente da alcuni siti, e che si diffonderà sempre più, fino probabilmente a diventare uno standard, è quella del responsive design. Responsive significa “adattabile”. Un sito responsive ha una larghezza fissa su monitor medi o grandi, ma si trasforma in fluido nel caso in cui l’ampiezza del monitor gli vada stretta.
Non si tratta semplicemente di un passaggio da layout fisso a fluido: l’organizzazione di tutti i contenuti, degli strumenti di navigazione, dei pulsanti, dei form, delle immagini e la loro presentazione vengono adattate al dispositivo che sta visualizzando il sito.
In altre parole, lo stesso sito apparirà in un modo su uno schermo da scrivania, in un altro sull’iPad, in un altro ancora sull’iPhone o sull’iPod. Ogni visualizzazione sarà la migliore per ognuno dei dispositivi usati. Su iPad potrebbe sparire la barra laterale del sito e i contenuti che erano in essa finirebbero sotto il contenuto principale. Su iPhone il menu da orizzontale potrebbe diventare verticale e i pulsanti potrebbero diventare più grandi (per facilitarne il tap).
Tutto questo è fondamentalmente possibile grazie ad alcuni accorgimenti nella scrittura del CSS3 e a un po’ di Javascript (che entra in gioco in tutti quei casi in cui il CSS3 non è supportato). In particolare sono molto utili le Media Query. Queste sono semplicemente delle condizioni che, sulla base dell’ampiezza della risoluzione, visualizzano alcune regole o ne ignorano altre, oppure implementano uno o più file CSS in aggiunta a quelli di base.
Un esempio pratico all’interno di un file CSS:
#box {width:500px;}
@media only screen and (max-device-width: 600px) {
#box {width:100%;}
}
I dispositivi con risoluzione orizzontale inferiore o pari a 600 pixel visualizzeranno il “riquadro” #box largo quanto lo schermo (100%), mentre su schermi più grandi sarà limitato a 500px (ad esempio per lasciare spazio a una barra laterale di 460px, che su iPad sarà invece posta sotto il riquadro, perché diventerebbe scomodo gestire un’ampiezza di 960px o più).
Anche questo approccio ha i suoi svantaggi, per esempio le Media Query non sono universalmente compatibili e richiedono una fase di test più attenta del solito, su un gran numero di dispositivi mobile, tutti diversi tra loro, oltre ai classici browser da pc. Diventa fondamentale avere le idee chiare già in partenza e basarsi su un’architettura a “grid” per i propri progetti, pulita, semplice e razionale.
Anche Studio Boraso.com si sta orientando verso questa nuova frontiera del web design, in risposta alle nuove esigenze del web, generate dall’uso sempre più ampio dei dispositivi mobile, come i tablet e gli smartphone. Un ottimo esempio di questo approccio è il sito recentemente restaurato di www.immobiliare.com, visualizzandolo con Google Chrome (altri browser non sono sempre efficaci per questi test), allargendo o stringendo la finestra del browser è possibile apprezzare l’adattabilità delle pagine.
