Che cos’è, come funziona e i vantaggi del Responsive Web Design
Definizione
Il design responsivo o responsive web design indica una tecnica di web design per la realizzazione di siti web in grado di adattarsi graficamente in modo automatico al dispositivo con i quali vengono visualizzati (ad esempio: monitor di computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv, 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 di numerosi fattori, incentrati non solo sui dispositivi ma anche sulle caratteristiche dell’utente (quali capacità cognitive, vista, difficoltà fisiche, ecc.). La lingua inglese designa genericamente con l’aggettivo “responsive” tutto ciò che “reagisce o risponde rapidamente e in modo appropriato ad uno stimolo”. In italiano l’aggettivo che rende al meglio il termine inglese (avendo “responsivo” un altro significato) è adattativo (o adattivo). Se questa idea viene applicata ad un sito web, se cioé quest’ultimo fosse considerato come un “sistema adattivo”, si può facilmente ricavare una definizione.
Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del dispositivo.
La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media query CSS.
Quando l’utente passa dal suo PC desktop ad un iPad, il sito dovrebbe automaticamente adattarsi alla nuova risoluzione, modificare le dimensioni delle immagini e le interazioni basate sugli script. In altre parole, un sito dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente.
Perché Responsive Design
Il concetto di responsive design è stato dibattuto da quando è stato introdotto. La ragione più convincente per l’utilizzo del design adattativo è che la creazione di un sito web non solo visivamente piacevole ma che funzioni correttamente sui dispositivi che si trovano sul mercato in un determinato momento, è che questo tipo di sviluppo permetterà il corretto funzionamento e la corretta visualizzazione dei contenuti anche su dispositivi che saranno disponibili in futuro. Inoltre, con il responsive design non si corre il rischio che gli utenti visualizzino la versione mobile di un sito su un monitor desktop, o vice versa. Se si dispone di siti web separati, nel caso si utilizzi il rilevamento del dispositivo per inviare la versione corrispondente del sito per ogni dispositivo o se si utilizza un set separato di URL (come un sottodominio m-dot) per servire un sito mobile, può portare ad un rendering errato dei contenuti. Siti che hanno una versione mobile separata usano comunemente il rilevamento dei dispositivi per determinare quale versione di una pagina web (desktop o mobile) si dovrebbe inviare a qualsiasi dispositivo particolare. In questo modo, ogni pagina del sito potrà avere un solo URL, anche se ci sono in realtà due versioni separate con diversi codici HTML.
Tuttavia, questo processo non è accurato al 100%, e a volte sarà inviata la versione non corretta della pagina. Inoltre, il processo di rilevamento del dispositivo può aumentare il tempo di caricamento della pagina. Con collegamenti che vengono scambiati tra gli utenti attraverso i social media o e-mail, ottenere la versione corretta di una pagina sarà spesso un compito supplementare per gli utenti.
Vantaggi del Responsive Design
Il vantaggio più evidente di utilizzare il design reattivo è che per creare un sito web, un disegno, un set di codice o di contenuti, è necessario un unico progetto. Se si dispone di una versione separata solo per cellulari del sito, si dovrà creare e mantenere due (o più) gruppi completamente separati di istruzioni HTML. Le modifiche dovranno essere effettuate su ciascun sito, e anche se si sta cercando di tenerli allineati, ci saranno quasi certamente problemi e qualcosa finirà per non corrispondere tra le versioni.
Sebbene l’utilizzo di un Content Management System (CMS) o un sistema di template possano rendere il lavoro più facile, non vi sono maggiori contenuti o codice da mantenere, o altri componenti che si possono potenzialmente “rompere”. Con un sito reattivo, si ha un solo set di contenuti, e sarà visualizzato in modo appropriato, non importa quale sia la dimensione dello schermo: future modifiche di progettazione possono essere effettuate tramite interventi mirati apportati al foglio di stile. Per gli sviluppatori inesperti sul responsive design l’iniziale compito di creare un sito web reattivo può richiedere uno sforzo maggiore rispetto alla creazione di un sito a dimensione fissa, ma nel lungo termine si avrà meno lavoro da fare per gestire il sito.
