Mobile web e responsive design: stato dell’arte e analisi del caso unipv.eu

17 
INTRODUZIONE 
 
L’argomento centrale di questo lavoro è un tema di scottante attualità: il mobile web, 
ovvero l’accesso alla rete tramite dispositivi non fissi, come il computer, ma tecnologie 
che portiamo con noi in ogni momento e luogo, quali smartphone e tablet. 
Questi device non sostituiscono la navigazione classica con computer fisso, ma si 
affiancano ad essa con problematicità e potenzialità del tutto peculiari. Basti pensare 
alla struttura di un cellulare, ben diversa dal desktop di casa, a partire dallo schermo di 
piccole dimensioni e dall’assenza di mouse e tastiera. Questa apparentemente scontata 
costatazione, - legata alle peculiarità nell’interazione fra utente e dispositivo mobile- 
non ha però spinto buona parte delle aziende ad intervenire per adattare il proprio sito 
web a cellulari e tablet. Infatti come andremo ad analizzare nel corso di questo lavoro, 
gli investimenti in questo settore sono stati limitati, malgrado i potenziali ritorni 
economici del tutto considerevoli. 
Non dobbiamo poi dimenticare che, se da un lato questi dispositivi hanno problematicità 
nella visualizzazione di un sito e portale pensato unicamente per il computer fisso, 
d’altro canto presentano delle funzionalità uniche, dall’onnipresenza di questi 
dispositivi nella vita di tutti i giorni, alla geolocalizzazione con GPS.  
Negli ultimi anni un crescente interesse dell’utenza verso il mondo mobile, sta portando 
sempre più aziende ad investire in questo mondo. Anche se la questione è ben lontana 
dall’essere risolta: come vedremo in seguito i guru del web non si accordano neppure 
sulla creazione di una versione mobile dedicata o di una derivata dal desktop. 
Pertanto abbiamo scelto di analizzare questo tema in quanto estremamente interessante 
e così attuale da essere aperto a possibili teorizzazioni sui futuri trend.  
Questo lavoro presenta una struttura analitica e seppur ogni capitolo si soffermi su 
specifici temi o sul medesimo, ma da prospettive diverse, è stata pensato dall’autrice 
come consecutivo, infatti possiamo paragonarlo alle fasi di svolgimento di un tema 
scolastico: 
1. introduzione: capitolo uno, mobile usability;
18 
2. sviluppo: capitolo due, mobile content; 
3. esemplificazione: capitolo tre, analisi casistica e i quattro metodi; 
4. conclusione: capitolo quattro responsive web design. 
Nel primo capitolo vengono introdotti i principi cardine, che saranno la base di 
tutta la successiva trattazione. Inizieremo con il mondo mobile oggi: lo scenario e il 
panorama di queste tecnologie in termini di numeri di diffusione, velocità di 
connessione e implicazioni economiche. Passeremo poi al tema dell’usabilità: cosa si 
intende con questo concetto e cosa la differenzia e accomuna all’accessibilità. Infine 
questo termine verrà poi calato nello specifico della nostra analisi: l’usabilità del 
mobile.  
I riferimenti del capitolo mobile usability sono istituti ed aziende con una decennale 
esperienza del mondo web: infatti ci riferiremo a diverse ricerche del settore, da quella 
di Google a quella delle Osservatorio del Politecnico di Milano, per ipotizzare le 
possibili evoluzioni del mondo mobile nei prossimi anni.  
Analizzeremo anche in profondità il punto di vista di due fra i più autorevoli e 
riconosciuti riferimenti del web: il World Wide Web Consortium (W3C) con il suo 
gruppo di lavoro Mobile Web Initiative (MWI) e Jakob Nielsen –definito il re 
dell’usabilità-. Partiremo dall’analisi delle 60 linee guida elaborate nell’ultima versione 
delle best practices del MWI e passando per il test del “W3C mobileOK Checker” e 
delle flipcard, concluderemo con il punto di vista di Nielsen. 
In particolare il punto di vista di Nielsen di colui che è considerato uno dei maggiori 
esperti d’usabilità al mondo ci sarà utile per introdurre tematiche centrali del capitolo 
successivo. 
Abbiamo paragonato la parte sul mobile content alla fase di sviluppo di un tema. Infatti 
in questo capitolo troveranno risposta quesiti aperti nella parte introduttiva come 
quando preferire un sito web dedicato al mobile, rispetto ad un unico sito web e il 
problema dei sistemi di input: dal click al touch come cambia l’esperienza utente. 
L’argomento centrale del mobile content è la gestione dei contenuti. In particolare ci 
chiederemo come l’informazione e i dati debbano essere organizzati e strutturati al fine 
d’essere fruibili dai device mobile. Quindi il tema analizzato sarà quello dell’usabilità e
19 
del suo rapporto con l’architettura dell’informazione, il sistema di navigazione e 
l’interfaccia.  
In particolare scenderemo nel dettaglio delle tre fasi che compongono il design 
(information, interaction e presentation)  e le applicheremo al mondo mobile. Oltre a 
risolvere problematiche accennati nel capitolo 1, verranno trattati ulteriori aspetti, che 
troveranno applicazione concreta nel lavoro a seguire. Per queste ragioni il capitolo 2 
può essere inteso come lo snodo centrale di tutto il lavoro. 
Il capitolo 3 si colloca perfettamente nel percorso logico fino ad ora svolto: dopo aver 
analizzato in profondità i concetti di mobile usability e mobile content, l’obiettivo sarà 
mettere in pratica e analizzare esempi lodevoli di tale base teorica. 
Nella prima parte del capitolo prenderemo in considerazione delle versioni mobile 
particolarmente riuscite: Wikipedia, Facebook e Libero Italia. Questa analisi comparata 
ci permetterà di evidenziare come pur partendo da principi d’usabilità comuni, le 
possibili realizzazioni pratiche possano divergere considerevolmente. Per rendere più 
accesa la sfida, stileremo infine una nostra personale classifica, dove verranno assegnati 
10 punti al primo classificato, 7 al secondo e 5 al terzo per ognuna delle tre categorie 
(information, interaction e presentation design). 
La seconda anima del capito sarà focalizzata sui possibili metodi di realizzazione di un 
sito mobile friendly. Per completezza ci soffermeremo su ogni possibile intervento, a 
partire dal non fare nulla (laissez-faire), intervento unicamente sul codice HTML, fino a 
metodi più raffinati come l’utilizzo delle media queries ed infine la realizzazione di una 
versione dedicata al mobile.  
Dopo aver evidenziato per ognuno di essi pro e contro, vedremo che non esiste una 
opzione migliore in termini assoluti, ma che ogni metodo può rappresentare la scelta 
ideale per una azienda, a seconda delle sue specifiche condizioni. Pertanto definiremo i 
parametri per motivare la scelta di una delle quattro strategie sopra esposte, vale a dire i  
fattori che una azienda deve ponderare. 
Infine l’ultimo capitolo è dedicato all’analisi e all’applicazione concreta di una nuova ed 
interessante tendenza: il responsive web design. Rispetto ai quattro metodi analizzati
20 
nel capitolo 3, si tratta di un approccio diverso, anche se in un certo senso 
complementare agli ultimi due metodi analizzati. Infatti come avremo modo di 
constatare approfonditamente l’approccio responsive unisce gli aspetti più positivi delle 
media queries con quelli della versione mobile dedicata. 
Questo tipo di design è reattivo e dinamico, infatti risponde adattando il sito web in base 
al device d’accesso. Risponde attivamente al comportamento dell’utente e al contesto 
d’utilizzo, ovvero a tre principali elementi: grandezza dello schermo del device,  
piattaforma utilizzata ed orientamento verticale o orizzontale del dispositivo 
d’accesso. Il responsive web design consiste quindi nella realizzazione di siti web 
multipiattaforma (desktop, tablet e mobile), senza però ricorrere a versioni dedicate, 
ovvero a markup differenti.  
I metodi di realizzazione di un sito web reponsive troveranno applicazione concreta con 
l’analisi del portale dell’università di Pavia. Il restyling di unipv.eu, online dalla fine di 
luglio 2012, ci è parso l’esempio ideale per più fattori: innanzitutto è il portale 
dell’università presso la quale ho studiato e mi laureo, il sito web è stato realizzato dalla 
azienda con la quale collaboro ed infine è un buon esempio d’utilizzo del responsive 
web design.  
Ci soffermeremo principalmente sulla homepage di unipv.eu in tutte le sue versioni 
esistenti e mantenendo lo schema del capitolo due: information, interaction e 
presentation design. La parte conclusiva del lavoro sarà dedicata al contributo 
personale, ovvero avanzeremo una serie di possibili migliorie della versione esistente, 
anche senza aver paura di “sporcarsi le mani” col codice.
21 
CAPITOLO 1: MOBILE USABILITY 
 
Introduzione 
 
L’obiettivo di questo primo capitolo è introdurre i principi cardine, che saranno la base 
di tutta la successiva trattazione, pertanto ci concentreremo principalmente su tre temi: 
il primo di essi è il mondo mobile oggi. Chiariamo innanzitutto lo scenario e il 
panorama di queste tecnologie in termini di numeri di diffusione, velocità di 
connessione e implicazioni economiche. Riferendoci a diverse ricerche del settore, da 
quella di Google a quella delle Osservatorio del Politecnico di Milano, ipotizzeremo le 
possibili evoluzioni del mondo mobile nei prossimi anni. 
Il secondo tema trattato è l’usabilità: cosa si intende con questo concetto e cosa la 
differenzia e accomuna all’accessibilità. Questo termine verrà poi calato nello specifico 
della nostra analisi: l’ultima e la più centrale delle questioni – che dà il nome al 
capitolo- ovvero l’usabilità del mobile. Ampio spazio verrà dedicato alla questione, in 
particolare due sono i principali riferimenti: il World Wide Web Consortium (W3C) con 
il suo gruppo di lavoro Mobile Web Initiative (MWI) e Jakob Nielsen –il re 
dell’usabilità-.   
Un paragrafo verrà dedicato all’analisi delle 60 linee guida elaborate nell’ultima 
versione delle best practices del MWI, mentre in un altro testeremo il funzionamento del 
“W3C mobileOK Checker” e la concreta applicazione delle flipcard. Ampia trattazione 
troverà anche il punto di vista di Nielsen, considerato uno dei maggiori esperti 
d’usabilità al mondo.  
In particolare ci soffermeremo sui suoi metodi d’usabilità per il mobile e sui risultati di 
questa analisi incrociata. Il punto di vista di Nielsen ci sarà molto utile anche per 
introdurre tematiche centrali del prossimo capitolo, come quando preferire un sito web 
dedicato al mobile, rispetto ad un unico sito web e il problema dei sistemi di input, di 
come cambia l’esperienza utente nel passaggio dal click al touch.
22 
1.1. Il mobile web 
1.1.1. Definizione di mobile web 
Per mobile web si intende l’utilizzo di applicazioni e browser per la connessione alla 
rete attraverso un dispositivo mobile, come smartphone o tablet pc. Già nel maggio 
2005, il W3C, il consorzio che guida lo sviluppo del World Wide Web (vedi paragrafo 
1.4.2.), ha dedicato al mobile un progetto specifico: il Mobile Web Initiative (MWI).  
Tim Berners-Lee, il direttore del W3C, nel comunicato stampa per il lancio del MWI, 
ha dichiarato: “l’accesso da dispositivi mobili al web è stata un’esperienza di seconda 
classe per troppo tempo. Il MWI vede nei dispositivi mobili attori di primaria 
importanza, pertanto produrrà materiali che aiutino gli sviluppatori a rendere la 
fruizione del web da mobile realmente significativa”
1
.  
Malgrado siano passati diversi anni dalla fondazione del MWI, l’accesso al web tramite 
device mobili risente ancora oggi di gravi problemi di interoperabilità, usabilità e 
accessibilità. Con queste locuzioni si intende: 
 Problemi d’interoperabilità: assenza di procedure uniche che permettono 
l’interscambio e l’interazione fra i vari elementi della rete e del device. Questi 
problemi sono riconducibili alla frammentazione delle piattaforme, dei sistemi 
operativi e dei browser mobile. 
 Problemi d’usabilità: nell’utilizzo del dispositivo mobile l’utente non riesce 
pienamente a raggiungere i suoi obiettivi, in termini di efficacia, efficienza e 
soddisfazione. Si parla di problema d’usabilità, quando la navigazione non è 
accettabile e gradevole, a causa del limite fisico dello schermo, dell’eccessivo testo 
proposto, delle difficoltà di input, di immagini e mappe troppo pesanti, ecc. 
 Problemi d’accessibilità: nell’utilizzo di dispositivi mobili, l’utente può vedersi 
negato l’accesso a certi documenti, a causa di formati non supportati. È un problema 
d’accessibilità anche i casi in cui le tecnologie assistive per disabili non possono 
fruire un contenuto web, poiché incomprensibile per questi strumenti hardware e 
software. 
                                                           
1
 Tim Berners-Lee, discorso Maggio 2005, lancio Mobile Web Initiative.
23 
Lo sviluppo di standard legati a piattaforme, sistemi operativi e browser mobile, è un 
intervento necessario per aumentare l’interoperabilità, l’usabilità e l’accessibilità del 
mobile web. Questi concetti verranno ampiamente trattati in seguito, ora soffermiamoci 
sulla distinzione fra mobile web e mobile Internet. 
 
 1.1.2. Mobile web e mobile Internet 
Mobile web e mobile Internet sono espressioni equivalenti ed interscambiabili o 
malgrado una certa superficialità nell’utilizzo di queste due locuzioni, esse rimandano a 
concetti, che seppur legati, sono nettamente diversi e distinti? 
Partiamo dalla definizione di web. Il World Wide Web (spesso abbreviato in web) è un 
servizio di Internet, una sua particolare specificazione, che permette – ad ogni utente o 
una parte specifica di essi- di navigare e accedere ad un insieme enorme di contenuti 
immessi in rete. Questi elementi del web sono fra loro legati tramite link, collegamenti, 
che nel loro complesso formano un ipertesto.  
Malgrado molti concetti base del web siano anteriori, ad esempio quello di ipertesto 
venne ipotizzato da Ted Nelson e Douglas Engelbart  nel 1965
2
, la nascita di questo 
servizio è considerevolmente successiva: il primo sito web fu immesso in rete il 6 
                                                           
2
 La prima teorizzazione di un ipertesto elettronico è in realtà ancora anteriore: il Memex di Vannevar 
Bush fu descritto in un suo articolo nel 1945 (http://www.theatlantic.com/magazine/archive/1945/07/as-
we-may-think/303881/) . Questo strumento nella visione di Bush sarebbe stato in grado di stabilire 
collegamenti fra informazioni, tramite l’uso di etichette (i moderni tag); inoltre l’utente avrebbe potuto 
inserire note personali ai contenuti.  Il Memex non fu però mai realizzato. Il primo ipertesto fu il sistema 
Augment, creato da Douglas Engelbart agli inizi degli anni ’60, così chiamato perché strumento in grado 
di ampliare le capacità umane (human augmentation). Augment permetteva ad una comunità di utenti di 
condividere, modificare, pubblicare e collegare risorse. In contemporanea alle ricerche di Engelbart, Ted 
Nelson conia i termini hypertext e hypermedia. La sua idea è realizzare un universo informativo (da lui 
definito docuverso) contenente tutto lo scibile umano.
24 
agosto 1991 dall’inventore del WWW, il ricercatore del CERN di Ginevra Tim Berners-
Lee
3
. 
Questo servizio è nato molto dopo Internet, la cui origine risale agli anni ’60. I suoi 
padri sono universalmente riconosciuti come Robert Kahn e Vinton Cerf. ARPANET, il 
progenitore di Internet, fu ideato dal ministero della difesa statunitense nel 1969, al fine 
di garantire lo scambio sicuro di informazioni, durante una delle fasi più critiche della 
Guerra Fredda. Questa invenzione così radicale, pur rimanendo inizialmente legata al 
mondo delle università e delle istituzioni, sbarcò oltreoceano negli anni ’70-’80. L’Italia 
fu il terzo Paese europeo a connettersi ad Internet (dopo Norvegia e Gran Bretagna), 
correva l’anno 1986. Internet è un insieme di protocolli e applicazioni con un ruolo più 
generale del web. Anche se, è stato questo suo servizio a proclamare universalmente il 
successo della rete delle reti. 
Veniamo ora ai termini mobile web e mobile Internet, per indicarne puntualmente il 
significato. Con la prima accezione si indica l’accesso con dispositivi mobili a pagine 
HTML ottimizzate per piccoli schermi, siti realizzati in WAP e portali pensati per essere 
usabili in ogni condizione: dal computer desktop di casa come sul più piccolo dei 
device. Il mobile Internet indica, invece, l’utilizzo della rete delle reti in mobilità, 
ovvero un’esperienza più complessa, che non può prescindere dagli operatori di reti 
mobile che forniscono connettività, dall’accesso alla Rete attraverso hotspot pubblici, 
dalle leggi sulla concorrenza sulle tariffe ADSL, ecc. 
Pur senza tralasciare il mobile Internet che lo ingloba, questo lavoro si sofferma 
principalmente sul mondo complesso e perennemente in movimento del mobile web. 
Dopo questo necessario chiarimento, soffermiamoci sul contesto mobile oggi, in termini 
di utenti e di potenzialità economica.  
 
 
                                                           
3
 Secondo alcuni autori è più corretto indicare il 1989 come data approssimativa per la nascita del web, 
quando i due ricercatori del CERN Tim Berners-Lee e Robert Caillau proposero un metodo semplice e 
veloce di scambio delle informazioni.