Ancora troppo pochi siti e portali hanno una struttura completamente Responsive (Adattiva) in grado di formattarsi automaticamente in base alle caratteristiche del client che effettua la richiesta della pagina.
Un sito moderno dovrebbe implementare tutti i meccanismi utili per un adattamento automatico alle preferenze dell’utente, rivedendo lo stile delle pagine e modificando le dimensioni delle immagini in considerazione delle caratteristiche del device con cui l'utente è collegato (PC, Tablet o Smartphone).
In molti casi si è ovviato al problema di fornire una visualizzazione grafica differenziata non implementando un sito unico le cui pagine si adattano automaticamente alle dimensioni ed alla risoluzione dello schermo, ma reindirizzando il browser verso altre pagine web parallele che gestiscono gli stessi contenuti (o una quota parte) ma che hanno la struttura giusta per il tipo di client collegato.
Solitamente i siti che adottano questo meccanismo sono riconoscibili per il fatto che l'URL, leggibile sul browser, non è uguale collegandosi con qualsiasi Device, ma nel caso degli smartphone compare una lettera m o la parola mobile.
Alcuni esempi:
sito desktop: www.subito.it sito mobile: m.subito.it
sito desktop: www.ilmessaggero.it sito mobile: m.ilmessagero.it
sito desktop: www.tgcom24.it sito mobile: mobile.tgcom24.it
sito desktop: www.iltempo.it sito mobile: www.iltempo.it/mobile/
Come fa il web server del sito a discriminare se l'utente è collegato da PC, Tablet o Smartphone ?
Lo fa leggendo le informazioni contenute nell' HTTP Header che ciascun browser invia sempre nel momento in cui richiede il caricamento della pagina.
Se non sapete di cosa si tratta, potete collegarvi al sito xhaus.com/headers e verificare la tipologia dei dati contenuti nell'HTTP Header inviato dal vostro browser.
Tra i vari campi presenti, c'è lo User Agent,
una stringa, che descrive il tipo di device, di sistema operativo e di browser che effettua la request, informazioni grazie alle quali il web server può capire verso quale sito deve reindirizzare l'utente.
Di seguito un esempio con User Agent inviati da Device diversi:
PC con browser Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Tablet con browser Chrome
Mozilla/5.0 (Linux; Android 4.4.3; Nexus 7 Build/KTU84L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Safari/537.36
Smartphone con browser Chrome
Mozilla/5.0 (Linux; Android 4.4.2; LG-D405 Build/KOT49I.A1393825652) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Mobile Safari/537.36
Particolare importanza riveste la parola Mobile, presente nello user agent, che consente al web server di riconoscere facilmente che il client è uno smartphone e quindi inoltrare la richiesta verso il sito che ha il formato giusto.
Il browser Chrome e l'opzione Richiedi sito desktop
Talvolta dallo Smartphone o dal Tablet si ha necessità di accedere al normale sito Desktop per avere a disposizione tutte le informazioni e le funzionalità complete.
Per facilitare la cosa, la App Chrome, il noto browser di Google, ha messo a disposizione una comoda opzione Richiedi sito desktop raggiungibile dal menù di contesto una volta che ci si è collegati al sito.
Quando viene impostata, Chrome non fa altro che reinviare la richiesta dopo aver impostato lo User Agent come se si trattasse di un PC e non di un device mobile.
Di seguito lo User Agent della stessa richiesta fatta prima da Smartphone con browser Chrome, ma con impostata Richiedi sito desktop:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Safari/537.36
Come si può vedere non ci sono più riferimenti che fanno pensare ad uno smartphone, quindi il web server indirizzerà la richesta verso le pagine di default, presumibilmente quelle con formato desktop.
Non sempre funziona con siti Fully Responsive Web Design (RWD)
Questa opzione non sempre sortisce effetti quando ci si collega a siti implementati con meccanismi completamente Responsive.
In caso di siti RWD, che non prevedono una differenziazione lato server, ma pagine uniche in grado di formattarsi automaticamente quando vengono ricevute dal client, la riorganizzazione grafica del sito avviene con riformattazioni dinamiche che possono essere:
- predeterminate mediante configurazioni su fogli di stile CSS,
- conseguenti al riconoscimento dello User Agent effettuata lato client da javascript evoluti.
Nel primo caso l'impostazione dell'opzione Richiedi sito Desktop non funziona in quanto lo User Agent non viene preso in considerazione.