Negli ultimi tempi, il boom dei dispositivi mobili ha trasformato le abitudini degli internauti: se fino a pochi anni fa chi navigava sul web lo faceva principalmente seduto alla scrivania tramite un computer, oggi la grande maggioranza dei fruitori di servizi e contenuti online lo fa attraverso dispositivi mobili, come smartphone e tablet.
Tale cambiamento radicale ha portato, ovviamente, a nuovi paradigmi di progettazione delle pagine web: se prima i siti web venivano concepiti per essere visualizzati sugli schermi dei PC attraverso mouse e tastiera, oggi devono essere pensati per essere utilizzati, con altrettanta facilità, anche da chi ha nelle mani un telefono e ha la possibilità di interagire con il dispositivo solo attraverso il touch delle dita.
Per questo motivo, nell’ambito del web publishing, si sono fatte strada le tecniche del Responsive Design (o, in italiano, Design Responsivo) e del Adaptive Design (in italiano Design Adattivo).
Ma qual è la differenza tra un sito Responsivo ed un sito Adattivo? I concetti di “responsivo” e “adattivo” sono intercambiabili? La risposta è “no”. In questo post cercherò di spiegarvi la differenza sottile tra questi due aggettivi.
Prima di dare una risposta a questa domanda, tuttavia, è bene soffermarsi su alcuni aspetti preliminari: prima di tutto, è importante sottolineare le differenze che ci sono nella progettazione di un sito web per desktop piuttosto che per dispositivi mobili.
Progettare un sito per computer Vs. dispositivi mobili
Cosa cambia materialmente nel progettare un sito web per desktop piuttosto che per smartphone o tablet? Le differenze sono tante, cerchiamo di riassumerle:
- Dimensione dello schermo: la differenza più evidente riguarda sicuramente la dimensione dello schermo: su un PC avremo tendenzialmente un display molto più grande rispetto a quello di un tablet o, soprattutto, di uno smartphone.
- Orientamento dello schermo: un’altra differenza di non poco conto riguarda la possibilità, per tablet e smartphone, di ruotare lo schermo e passare dalla visualizzazione landscape (panorama) a quella portrait (ritratto): di fatto, la larghezza non sarà sempre la dimensione maggiore dello schermo e ciò deve essere tenuto in debita considerazione dal web designer!
- Interazione con le pagine: mediante un computer, l’interazione con la pagina avviene, normalmente, mediante mouse e tastiera; attraverso un dispositivo mobile, l’interazione avviene esclusivamente mediante il touch delle dita e ciò comporta un ripensamento di spazi e dimensioni delle aree sensibili in quanto il dito non può essere preciso come il puntatore del mouse!
- Velocità di connessione (tempi di caricamento): quando si naviga mediante un PC, solitamente si ha a disposizione una connessione ad Internet a banda larga che garantisce tempi di caricamento molto più veloci rispetto alla maggioranza delle connessioni mobili; ciò significa che un sito ottimizzato per smartphone dovrebbe incorporare elementi “più leggeri” al fine di garantire tempi di caricamento ragionevoli anche in mobilità.
- Modi e tempi di fruizione dei contenuti: quando si visualizza un sito tramite un computer, solitamente si è seduti alla scrivania e si può dedicare tutta la propria attenzione allo schermo; quando si naviga attraverso smartphone, viceversa, spesso lo si fa muovendosi, magari camminando per strada o comunque in contesti nei quali le distrazioni potrebbero essere maggiori; così come il tempo a disposizione per reperire una data informazione potrebbe essere molto minore.
Tutti questi aspetti devono essere tenuti nella dovuta considerazione durante le fasi di progettazione e sviluppo di un sito web se si ha come obiettivo quello di garantire all’utente la migliore esperienza di fruizione (cd. user experience).
Responsivo Vs. Adattivo
I concetti di Responsivo e Adattivo vengono spesso confusi ed i due termini utilizzati come sinonimi. Tuttavia, si tratta di un errore in quanto, pur molto simili, le due terminologie differiscono nel loro contenuto profondo.
- Lo sviluppo di un sito responsivo attiene esclusivamente agli aspetti grafici: gli elementi della pagina “rispondono” alla dimensione/orientamento dello schermo adattandosi a tali caratteristiche. Viene progettata, quindi, un’unica pagina web il cui aspetto cambia in base alla semplice stilizzazione CSS degli elementi.
- Un sito web adattivo non solo adatta la grafica al display, ma implementa una serie di altre caratteristiche che lo rendono idoneo ad essere fruito “al meglio” su vari tipi di device.
Per realizzare un sito responsivo si fa ricorso, come già detto, al Responsive Design, che si basa sull’utilizzo di CSS e delle Media Query. La creazione di un sito web completamente adattivo coinvolge anche l’utilizzo di Javascript e/o di tecnologie Server Side per “adattare” il contenuto della pagina web (non solo l’aspetto!) alle caratteristiche del dispositivo in uso (si parla di siti web adattivi lato client e adattivi lato server).
Un sito web adattivo lato-client viene realizzato implementando al responsive design ulteriori caratteristiche mediante Javascript. Viceversa, un sito responsivo lato server può essere realizzato anche senza far ricorso al design responsivo, in quanto il server può trasmettere pagine web differenti in base allo user-agent dell’utente e quindi non necessità delle Media Query per garantire un aspetto conforme alle specifiche del display.
Ma in che modo possono essere utilizzati Javascript o tecnologie lato server per adattare una pagina web al dispositivo utilizzato dall’utente per accedervi? Per chiarire meglio questo aspetto, facciamo qualche esempio:
- Modifica del codice sorgente della pagina: attraverso il design adattivo lato-server è possibile inviare all’utente pagine aventi un sorgente differente a seconda che siano visualizzate da un dispositivo piuttosto che da un altro; ad esempio sarà possibile inviare agli utenti in mobilità pagine con un codice HTML più leggero ed un minor uso di Javascript al fine di ridurre i tempi di caricamento e di rendering.
- Ottimizzazione di immagini e/o di altri elementi multimediali: se una pagina web incorpora tante immagini ad alta risoluzione, il suo peso complessivo aumenterà, rendendo maggiore il tempo necessario al suo completo scaricamento. Se ciò è accettabile da desktop, in mobilità potrebbe essere un problema: in tal caso, quindi, un sito adattivo (sia lato client che lato server) potrebbe rilevare il dispositivo e trasmettere immagini a risoluzioni differenti a seconda che l’utente utilizzi un computer o un telefono, abbia un display tradizionale o uno di tipo Retina.
Quelli citati sono solo due esempi: esistono diversi aspetti che possono essere ottimizzati lato client e/o lato server mediante l’utilizzo di tecniche di design adattivo.
Conclusioni
In linea di massima possiamo affermare che il modo migliore per sviluppare un sito web pienamente fruibile da ogni device consiste nell’utilizzare contemporaneamente sia il design responsivo che alcune tecniche di sviluppo adattivo. Utilizzare esclusivamente il design adattivo lato server (cioè senza le Media Query) impone allo sviluppatore l’onere di creare materialmente tanti “siti differenti” a seconda del tipo di device utilizzato, rendendo, di fatto, più lungo, complesso ed oneroso sia il processo di sviluppo che quello di aggiornamento e manutenzione.
Quest’ultima soluzione, pertanto, appare consigliabile solo in casi specifici nei quali l’unica via per garantire una adeguata user experience consiste, appunto, nella progettazione di interfacce distinte a seconda del device utilizzato. In tutti gli altri casi, la strada migliore da percorrere è sicuramente quella di sviluppare un sito responsivo, avendo cura di integrare tecniche di design adattivo per migliorare la fruibilità dei contenuti in specifici contesti di utilizzo.
