Vai ai contenuti

LAU



Home > progettare > usabilità: la progettazione utente-centrica > Progettare pagine web per i dispositivi mobili


Progettare pagine web per i dispositivi mobili

Panoramica sui dispositivi mobili e consigli pratici per progettare un sito che possa essere fruito tramite smartphone.

a cura di: Fabio Regina | 28 marzo 2008


1. Introduzione

L'evoluzione tecnologica che ha contribuito allo sviluppo dei comuni PC ha anche coinvolto i dispositivi di telefonia mobile che, con il passare del tempo, sono diventati oggetti ricchi di funzionalità e con una notevole velocità di connessione a internet.

Il mercato attuale della telefonia mobile vive un vero e proprio boom che ha visto in pochi anni moltiplicare la diffusione di dispositivi nel mondo. Leggere la posta elettronica, visualizzare una mappa, scattare una foto e caricarla subito on-line, visionare gli orari dei mezzi di trasporto, eseguire pagamenti: tali azioni, che in passato potevano essere fatte solo attraverso l'uso di un PC desktop connesso alla Rete, oggi possono essere eseguite anche attraverso l'uso di cellulari e palmari.

In un recente articolo pubblicato sul sito LAU dal titolo "One Web" avevamo accennato come il W3C si sia adoperato negli ultimi anni a migliorare l'interoperabilità e l'usabilità del web dando vita alla Mobile Web Iniziative [link esterno], un gruppo di lavoro che ha redatto un insieme di "buone prassi" denominate "Mobile Web Best Practices 1.0 [link esterno]" (l'ultima release del documento pubblicato come Candidate Recommendation risale al 2 novembre 2006) con le quali si intende migliorare la trasmissione e la visualizzazione dei contenuti su dispositivi mobili.

Anche se uno degli obiettivi che si prefigge il W3C è rendere fruibili le informazioni e i servizi presenti sul web indipendentemente dal dispositivo utilizzato, bisogna dire che le tecnologie chiamate a soddisfare questo obiettivo non sono ancora del tutto mature.

In questo articolo cercheremo di approfondire:

  • quali sono le caratteristiche dei dispositivi mobili più diffusi
  • quali sono le necessità informative che bisogna soddisfare per consentire una navigazione efficace sui dispositivi mobili
  • quali sono le buone prassi da adottare per progettare pagine web per i dispositivi mobili

Concluderemo affrontando un caso di studio: una ipotetica versione mobile del sito LAU.

torna su

2. I dispositivi mobili più diffusi

Sostanzialmente, malgrado le differenze in molti casi siano labili, le tipologie di dispositivi più diffuse presenti sul mercato sono tre: i telefoni cellulari, i PDA (Personal Digital Assistant) e gli smartphones.

Sia i cellulari, sia i PDA (palmari), sono nati come strumenti con funzioni specifiche: il primo come telefono portatile, il secondo con funzioni da pc tascabile (rubrica, agenda, archivio). Oggi, con l'avvento della connessione UMTS, sia i telefoni cellulari sia i PDA consentono di effettuare videotelefonate, di registrare e visualizzare filmati, vedere programmi televisivi dedicati e accedere al Web.

Immagine raffigugurante lo smartphone Nokia N95Fig. 1
Nokia N95. La risoluzione del monitor è 240x320 pixel. Si basa su sistema operativo Symbian.

Praticamente la differenza tra queste due tipologie di dispositivi è nella loro capacità di memoria e nella risoluzione dello schermo. La risoluzione di un PDA, ad esempio, è mediamente superiore a quella di un telefono cellulare. Pertanto, con un'area di pagina superiore a quella visualizzata da un cellulare, la navigazione con un palmare consente potenzialmente un'esperienza d'uso più efficiente per l'utente.

Immagine raffigurante il PDA HP iPAQFig. 2
HP iPAQ hx2490 Pocket PC. La risoluzione del monitor è 240x320 pixel. Si basa su sistema operativo Microsoft Windows Mobile 5.0.

Tuttavia, l'evolversi della tecnologia mobile ha reso sempre più labile il confine tra i PDA e i telefoni cellulari. Oggi i cosiddetti smartphone combinano funzionalità tipiche sia di un PDA che di un telefono cellulare: diciamo che può essere un'evoluzione del PDA a cui si aggiungono funzioni tipiche di un telefono cellulare.

Immagine raffigurante lo smartphone HTC TouchFig. 3
HTC Touch. La risoluzione del monitor è 240x320 pixel. Si basa su sistema operativo Microsoft Windows Mobile 6.0.

torna su

3. Sistemi operativi e browser

Attualmente i principali sistemi operativi utilizzati dai dispositivi mobili sono Symbian e Windows Mobile. Quest'ultimo è il sistema sviluppato da Microsoft (attualmente è in commercio la versione 6 [link esterno]) pensato per gestire sia architetture smartphone che PDA.

Symbian è il sistema operativo più diffuso ed è supportato dalle più importanti case di telefonia tra cui (Nokia, Sony, Motorola, Ericsson, Panasonic, Samsung). Tra i maggiori competitors di Windows Mobile e Symbian vi sono Palm OS (primariamente diffuso su architetture PDA, di recente è stato utilizzato anche in strumenti di tipo smartphone come Treo di PalmOne) e Linux (pur trattandosi di un sistema ancora di nicchia per il settore dei device mobili, Linux attrae i produttori per l'assenza di costi di licenza e per le elevate potenzialità di portabilità e di configurazione).

Per quanto riguarda i browser, attualmente, i più diffusi sono:

  • Opera Mobile Browser (la versione 9 [link esterno] sarà presto disponibile sul sito Opera) e Opera mini (giunto alla versione 4 [link esterno]). Il grande vantaggio offerto da questi browser è dovuto alla loro capacità di adattare i contenuti dei siti web alle dimensioni limitate degli schermi dei vari dispositivi (grazie alla tecnologia denominata "small-screen rendering").
  • Access NetFront (giunto alla versione 3.5 [link esterno]) è un prodotto disponibile sia per smartphone che per palmari. Questo browser, che supporta i principali linguaggi standard per il web, dispone anche di una versione in grado di rappresentare in forma vocale il contenuto testuale delle pagine (text-to-speech).
  • Pocket IE è la versione per dispositivi mobili di Internet Explorer ed è presente su smartphone e PDA su cui è presente un sistema operativo Microsoft (Windows Mobile, Pocket PC 2003/2002).

Alcuni mesi fa Mozilla ha lanciato una versione beta di Minimo [link esterno], un browser per dispositivi Windows Mobile. Recentemente il team Mozilla ha affermato che sta lavorando per la realizzazione di Mobile Firefox che sarà rilasciato molto probabilmente entro il 2008.

Esistono, comunque, diversi emulatori dei browser per palmari e cellulari, installabili su normali PC desktop. Attraverso questi strumenti è possibile simulare la navigazione sui dispositivi mobili.

Alcuni tra i più diffusi emulatori presenti in rete sono:

torna su

4. Le tipologie di connessione

Con l'avvento della trasmissione digitale del traffico telefonico cellulare, la prima innovazione fondamentale è stata l'introduzione del servizio GPRS. Il GPRS (un sistema basato sulla commutazione di pacchetto tramite onde radio) consente di raggiungere velocità di connessione paragonabili a un modem telefonico (57.6 Kbit/s in download e 14.4 Kbit/s in upload)

Con l'evolversi della tecnologia mobile e con la crescita di efficienza della banda disponibile è migliorata molto la performance della Rete. La tecnologia UMTS, ad esempio, consente di raggiungere velocità di circa 2 Mbit/s, prestazioni paragonabili a quelle di una linea DSL.

Una tecnologia superiore alla attuale UMTS è la HSDPA che permette di ampliare la larghezza di banda nelle attuali reti raggiungendo velocità massima di 14 Mbit/s, raggiungibili prima solo attraverso collegamenti fissi ADSL.

Una tecnologia molto diffusa è anche il Wi-Fi che, sebbene confrontata con il GPRS, l'UMTS e l'HSDPA consenta di raggiungere velocità decisamente superiori (fino a 54Mbit/s), incontra alcune limitazioni tecnologiche. Infatti, un accesso Wi-Fi è possibile solo se il dispositivo si trova nei pressi di uno "hotspot", ossia di un'area presso cui è stato installato un punto d'accesso che ha funzione di commutare e instradare il traffico wireless sulla rete locale o globale. Più ci si allontana dall'access-point e più il segnale è debole, con conseguente diminuzione della velocità di trasferimento.

Dal 2004 è stato esportato dal Giappone in Italia il servizio I-mode. Si tratta di un servizio costruito sul protocollo HTTP, dunque pienamente compatibile con l'architettura del web per personal computer. Le velocità di trasmissione non sono attualmente molto elevate (paragonabili ad una connessione GPRS) ma sono sufficienti per siti web graficamente semplici e dalla struttura informativa essenziale. I fornitori di servizi I-mode, (Wind per l'Italia) offrono ai propri utenti un portale di accesso che raccoglie un gran numero di siti web suddivisi in categorie: news, sport, giochi, tempo libero ecc. Solitamente ciascun sito è consultabile dopo aver sottoscritto un abbonamento che ammonta a pochi euro al mese. A questa cifra vanno aggiunti i costi delle connessioni, che sono calcolati sulla base della quantità di dati trasmessi. Esistono anche siti I-mode che non prevedono abbonamento, per i quali valgono solo i costi di connessione.

torna su

5. Le tecnologie assistive per dispositivi mobili

Il rispetto degli standard W3C e delle linee guida sull'accessibilità dovrebbe garantire la piena fruibilità dei siti web anche con i dispositivi mobili, che godono tra l'altro di ampia diffusione in molte categorie di utenti disabili. Purtroppo, le peculiarità di questi dispositivi pongono dei forti limiti all'accessibilità.

I limiti più evidenti sono di tipo congenito:

  • schermi troppo piccoli per gli ipovedenti
  • tasti troppo piccoli per utenti con difficoltà motorie

Esistono software che consentono, in parte, di risolvere problemi di accessibilità legati a particolari disabilità. Ad esempio il browser Access NetFront dispone di una versione in grado di leggere il contenuto testuale delle pagine. Ci sono diversi lettori di schermo per cellulari e palmari in grado di assistere l'utente non vedente o ipovedente in tutte le operazioni: uno realizzato da Code Factory è Mobile Speak [link esterno] (per sistemi operativi Symbian e Windows Mobile) o Talks [link esterno] prodotto da Nuance. Un altro prodotto della Nuance è Zooms [link esterno], un software per ingrandire porzioni del contenuto dello schermo.

torna su

6. Progettare per il web mobile

Prima di cimentarsi nella progettazione, bisogna aver chiari quali siano gli obiettivi, ovvero capire quanto i contenuti del nostro sito possano essere utili a chi naviga con dispositivi mobili. Bisogna cioè porsi alcune domande:

  • Quali sono i vantaggi che gli utenti possono trarre dalla visualizzazione del nostro sito attraverso il proprio smartphone?
  • Quali contenuti si aspettano di trovare?
  • Quanto tempo sono disposti a spendere per arrivare alle informazioni desiderate?
  • Ha senso riproporre per lo smartphone la stessa architettura dei contenuti del sito per PC?

Capire quali sono gli obiettivi e le esigenze degli utenti che fruiscono dei servizi su dispositivi mobili potrebbe orientarci ad una progettazione centrata sugli utenti.

Rebubblica.it, ad esempio, ha realizzato una versione del sito ad hoc per il mobile, raggiungibile da un indirizzo diverso dalla versione PC. Scorrendo la home page della versione mobile [link esterno] ci si accorge immediatamente come la pagina sia stata “ripulita” di tutti quegli elementi ritenuti superflui. In particolare si è ritenuto opportuno mettere in evidenza le ultime tre notizie riportando un breve abstract delle stesse. Di seguito, invece, vengono elencati semplicemente i link di approfondimento agli altri articoli. Inoltre, per dare maggiore dinamicità al sito, si è deciso di riportare anche un collegamento alle notizie classificate come "ultim'ora" e un altro collegamento alle aree tematiche del sito. E' stata quindi realizzata una versione ad hoc per mobile che tiene conto della specifica modalità di fruizione che esso permette.

Fondamentale è capire quale sia il target a cui ci si rivolge. Sicuramente si tratta di utenti che hanno la necessità di reperire informazioni anche quando sono lontani dalla "postazione" classica: utenti in viaggio, fuori ufficio, in vacanza, etc. L'utente che si collega ha la necessità di rintracciare con facilità e velocemente determinate informazioni e di riceverle quanto prima. Parola d'ordine diventa, dunque, "semplificazione".

torna su

7. Architettura delle informazioni

Nel contesto web per dispositivi mobili è fondamentale strutturare l'informazione nel modo più semplice possibile.

A differenza dei siti web adatti ad una visualizzazione su monitor di un PC, dove l'utente ha almeno un'idea, una visione generale della struttura del sito, l'architettura informativa di un sito visualizzato sui dispositivi mobili non è immediata a causa delle limitate dimensioni dei loro schermi. Caricare le pagine di eccessive informazioni può generare un senso di frustrazione e disorientamento agli utenti.

Alcuni consigli, a tal proposito, ci vengono forniti dal punto 5 delle "Mobile Web Best Practices 1.0" [link esterno] dove vengono date utili raccomandazioni riguardo: al contenuto, alle logiche di navigazione, al peso delle pagine, allo scrolling delle pagine, etc.

Il punto 5.3.1 [link esterno]: Page Content (Contenuto della pagina)

5.3.1 Page Content

[SUITABLE] Ensure that content is suitable for use in a mobile context.

[CLARITY] Use clear and simple language.

[LIMITED] Limit content to what the user has requested.

Traduzione:

5.3.1 Contenuto della pagina

[ADEGUATEZZA] Assicurarsi che il contenuto sia adatto per l'uso in un contesto mobile.

[CHIAREZZA] Usare un linguaggio semplice e chiaro.

[LIMITATO] Limitare il contenuto a ciò che l'utente ha richiesto.

L'esigenza di adattare il contenuto al contesto d'uso, limitandolo all'essenziale, è dettato in gran parte, come detto precedentemente, dai limiti tecnici e fisici del dispositivo (dimensioni ridotte, tempi di caricamento lunghi).

La stessa considerazione vale, ad esempio, per il punto 5.3.4 [link esterno]: Navigation Bars etc. (Barre di navigazione etc.)

5.3.4 Navigation Bars etc.

[CENTRAL_MEANING] Ensure that material that is central to the meaning of the page precedes material that is not.

Traduzione:

5.3.4 Barre di navigazione etc.

[SIGNIFICATO CENTRALE] Assicurarsi che il materiale che è centrale per il significato della pagina preceda il materiale che non lo è.

Porre in primo piano i contenuti centrali è anch'essa una pratica dettata innanzitutto dai limiti fisici dei dispositivi mobili.

Quest'altra raccomandazione è esplicitamente connessa ad un altro limite tecnico: la scarsa capacità di memoria dei dispositivi mobili.

Il punto 5.3.2 [link esterno]: Page Size (Peso della pagina)

5.3.2 Page Size

[PAGE_SIZE_LIMIT] Ensure that the overall size of page is appropriate to the memory limitations of the device.

Traduzione:

5.3.2 Peso della pagina

[LIMITE DEL PESO DELLA PAGINA] Assicurarsi che il peso complessivo della pagina sia appropriato alla limitata memoria del dispositivo.

La leggerezza delle pagine va a beneficio dell'esperienza dell'utente, riducendo i tempi di attesa per il caricamento della pagina. Ad esempio, la dimensione delle immagini è fondamentale per il peso della pagina. L'uso dell'attributo alt per le immagini è fondamentale in questo caso, non tanto perché descrive il loro contenuto ma perché veicola il contenuto anche quando queste non sono visualizzate dal dispositivo.

Il livello di usabilità, per quanto riguarda questo punto, può essere valutato automaticamente:

[PAGE_SIZE_USABLE] Machine Test: Measure the total size of the markup for a page; check that it does not exceed the allowable size for the device - 10 kilobytes for the Default Delivery Context.

Traduzione:

[PESO DELLA PAGINA IN TERMINI DI USABILITÀ] Test Automatico: misurare il peso complessivo di ogni pagina; controllare che non ecceda il peso consentito dal dispositivo - 10 kilobytes.

Il punto 5.2.5 [link esterno] Access Keys

5.2.5 Access Keys

[ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality.

Traduzione:

5.2.5 Access Keys

[ACCESS_KEYS] Assegnare gli access keys ai link nel menu di navigazione e a funzionalità con un accesso frequente.

Con l'aiuto degli accesskey si consente all'utente di esplorare funzionalità tipiche dei dispositivi mobili, come i cellulari, ad esempio, in cui la combinazione di due o più tasti (le cosiddette funzioni "softkeys") possono consentire di eseguire determinate azioni in modo più veloce.

Prendendo in esame solamente alcuni dei punti delle Mobile Web Best Practises 1.0 si evince già chiaramente che, un sito web per mobile non può essere una mera trasposizione del sito ottimizzato per PC. Notiamo infatti, che i siti ottimizzati per PC seguono degli schemi ben precisi, ovvero: una testata con un logo e un menu di navigazione principale, una colonna sinistra o destra con un menu di navigazione secondario, una colonna per i contenuti, e un piè di pagina. Evidentemente, tale schema non può garantire una visualizzazione ottimale anche su dispositivi mobili a causa dei loro limiti fisici (le risoluzioni dei monitor, ad oggi, difficilmente superano le dimensioni di 320x320). Sebbene esistano browser (ad esempio Opera Mini) in grado di adattare i contenuti alla larghezza dello schermo di un dispositivo mobile, una progettazione basata sull'uso di un'impaginazione non troppo complessa, gestita, ad esempio, per mezzo di unità di misura relative e proporzionali, favorirà ulteriormente l'adattamento tentato dal browser, consentendo una navigazione tra i contenuti più adatta ad una fruizione su schermi piccoli come quelli di un cellulare, di uno smartphone o di un palmare.

Pertanto, durante la fase progettuale è bene tener conto di questi fattori: un layout a due o più colonne superiore ai 320 pixel di larghezza, ad esempio, potrebbe generare un fastidioso scrolling orizzontale con quei browser che non sono in grado di adattare i contenuti alla risoluzione dello schermo. A questo proposito il punto 5.3.3 [link esterno] (Scrolling) delle MWBP 1.0 è abbastanza chiaro:

5.3.3 Scrolling

[SCROLLING] Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

Traduzione:

5.3.3 Scrolling

[SCROLLING] Limitare lo scrolling a una solo direzione, a meno che lo scrolling secondario non possa essere evitato.

È buona norma, pertanto, realizzare schemi di navigazione più semplici possibili:

  • preferire il layout ad una colonna
  • mostrare solo le opzioni relative alla pagina visualizzata
  • rendere evidenti gli strumenti di navigazione
  • limitare lo scrolling verticale

Ecco un esempio schematico di layout per mobile:

Immagine raffigurante un layout schematico per mobileFig. 4

Al di là della testata che rappresenta la vera e propria intestazione del sito web, è da notare come il menu di navigazione sottostante la testata sia ripetuto anche in fondo alla pagina, subito dopo i contenuti centrali.

Ottimi ausili alla navigazione sono anche le cosiddette "briciole di pane" che indicano la posizione gerarchica della pagina che si sta consultando. Addirittura, secondo una ricerca [link esterno] recententemente condotta con utenti fruitori dei servizi Web su dispositivi mobili, è emerso che gli utenti preferiscono orientarsi all'interno delle pagine con le "briciole di pane", e, quindi, preferiscono non avere ripetuto il menu di navigazione su ogni pagina.

torna su

8. Un sito ad hoc?

Come abbiamo visto precedentemente, Repubblica.it ha realizzato una versione del sito ad hoc per il mobile raggiungibile all'indirizzo www.repubblica.it/mobile [link esterno]. La scelta di realizzare un sito ad hoc semplificato è attualmente la più adottata: ma è la soluzione giusta? È in linea con gli obiettivi del W3C? Sia le WCAG 1.0 che la Legge Stanca sconsigliano tale scelta.

Ci si potrebbe chiedere: ma fino a che punto è giusto progettare versioni ridotte dei propri siti destinati ai soli dispositivi mobili? La strada indicata dalle linee guida e normative vigenti in materia di accessibilità sembrerebbe quella di ottimizzare le versioni già esistenti dei siti.

In merito a tali questioni sono sorti numerosi dibattiti tant'è che, ad oggi, il problema si pone in termini dicotomici:

  • fare uno stesso sito e adeguarlo a più dispositivi
  • fare una versione ad hoc

Nell'ottimo articolo di Andrea Crevola "Guida siti per dispositivi mobili [link esterno]" (pubblicato nel 2006) vengono già riportati i pro e i contro di entrambe le strategie.

Nel primo caso significa dare la possibilità all'utente di consultare le medesime pagine (al medesimo indirizzo web) sia che vi acceda tramite un PC desktop sia che stia utilizzando un cellulare o un palmare. Una scelta simile comporta notevoli vantaggi in termini di costi (relativi alla progettazione, alla realizzazione e alla manutenzione), ma non vanno trascurati gli svantaggi, connessi principalmente a problemi di visualizzazione dei contenuti (si pensi, ad esempio, ai possibili problemi di scrolling in piuttosto che al peso della pagina). È difficile ottenere una versione mobile di buona qualità cercando di adattare un sito che è stato costruito con tecnologie obsolete o deprecate. Tuttavia, pur cercando di aderire il più possibile agli standard oggi le tecnologie non garantiscono un supporto ottimale (ad esempio, i browser mobili non riconoscono ancora adeguatamente l'attributo "media" utilizzato per specificare a quale canale fa riferimento un determinato foglio di stile, per cui il valore "handheld", pensato appositamente per fornire un corretto CSS ai dispositivi portatili, non ha spesso l'effetto desiderato.

Bisogna comunque considerare che alcuni di questi problemi sono legati all'attuale momento di transizione verso tecnologie mobili più mature: in futuro molte criticità saranno probabilmente risolte.

D'altro canto fare un sito ad hoc significa ideare e realizzare un sito web con un'identità propria. Si tratta di effettuare un lavoro di riorganizzazione della struttura informativa. Se il sito nasce da una progettazione centrata sugli utenti esistono buone probabilità che si pubblichino contenuti e servizi di valore per loro. Tuttavia, trattandosi di un prodotto che possiede una sua autonomia, sono spesso necessari costi di progettazione e di sviluppo extra legati al mantenimento e aggiornamento dei servizi gestiti in parallelo con il sito ottimizzato per PC. Da non sottovalutare è anche la difficoltà di garantire un'interfaccia-utente universale a causa della grande varietà di dispositivi, sistemi operativi e browser presenti nel mercato.

È difficile stabilire quale delle due scelte progettuali sia la più corretta. Ogni progetto ha le proprie specificità e bisogna di volta in volta analizzare i pro e i contro di ciascuna scelta.

torna su

9. Codice aderente agli standard

Il primo passo verso la realizzazione di pagine web facilmente fruibili attraverso dispositivi mobili riguarda l'ottimizzazione del codice.

Originariamente WML era il linguaggio basato su XML e sulla tecnologia WAP 1.0 che garantiva agli utenti l'accesso alla Rete e a un insieme di contenuti web relativamente ristretto. Con il rilascio delle specifiche della versione 2.0 dell'architettura di protocolli WAP (nel gennaio 2002) si ottiene una versione dei protocolli TCP/IP ottimizzata per il mondo mobile. Ciò apriva la strada alla diffusione dei linguaggi html anche sui dispositivi mobili.

A partire dalle specifiche di XHTML basic definite dal W3C (l'ultima versione XHTML Basic 1.1 [link esterno] Candidate Recommendation risale al 13 luglio 2007), viene creata una versione del linguaggio supportata dalle tecnologie mobili: l'XHTML Mobile Profile. XHTML MP rappresenta il formato figlio di XHTML e, pertanto, ne eredita le caratteristiche formali e la filosofia: codice più leggero, "pulito" da tutti gli elementi di formattazione e valorizzato semanticamente.
I tag ammessi da XHTML MP sono:

  • body, head, html, title (per la struttura del documento)
  • dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var (per la struttura del testo)
  • a (per i collegamenti:)
  • dl, dt, dd, ol, ul, li (per le liste)
  • form, input, label, select, option, textarea, fieldset, optgroup (per le form)
  • caption, table, td, th, tr (per le tabelle)
  • img (per le immagini)
  • object, param (per gli oggetti incorporati)
  • b, big, hr, i, small (per la presentazione)
  • meta, link, base (per le meta-informazioni)
  • style (per lo stile)
  • script, noscript (per la programmazione lato client)

La presentazione dei contenuti va affidata, invece, ai fogli di stile. Per i dispositivi mobili è in via di definizione da parte del W3C uno standard denominato CSS Mobile Profile [link esterno] (l'ultimo Working Draft della versione 2.0 risale al 19 ottobre 2007).

Il supporto dei fogli di stile sui dispositivi mobili è, ad oggi, limitato. I problemi più evidenti si riscontrano soprattutto quando si cerca di adeguare un sito già esistente ai diversi dispositivi. Infatti, alcuni browser non sono ancora in grado di interpretare correttamente le istruzioni fornite dall'attributo media="handheld". Per cui, trovandoci nell'ipotesi in cui in una pagina siano state specificate due alternative di presentazione dei contenuti, uno per il PC e l'altra per i dispositivi mobili,

<link rel="stylesheet" type="text/css" 
href="stile.css" media="screen" />
<link rel="stylesheet" type="text/css" 
href="stile.css" media="handheld" /> 

spesso si genera una sovrapposizione di regole che rendono inefficaci le proprietà espresse per i dispositivi mobili.

Un metodo molto diffuso che consente una soluzione parziale del problema, è quello di suddividere il foglio di stile in più file e sfruttare a proprio vantaggio l'interpretazione a cascata dei CSS da parte dei browser, ovvero:

  • in un file indicare le regole comuni a tutti i dispositivi (ad esempio, per la formattazione degli elementi testuali)
  • in un altro file specificare le regole per il controllo dell'impaginazione su PC (con metodo @import per evitare che i dispositivi meno performanti scarichino anche queste informazioni)
  • in un altro file, infine, specificare le regole per la presentazione su mobile, andando a riscrivere le regole che potrebbero creare problemi.

Inoltre, con la proprietà "display: none" si possono nascondere tutti quegli elementi ritenuti "superflui" per una fruizione su dispositivi mobili.

Al metodo dei tre fogli di stili se ne aggiunge un altro che richiede, invece, un intervento lato server. Grazie a questo metodo è possibile sfruttare le potenzialità dei linguaggi di programmazione (ASP, PHP, JSP) i quali, riconoscendo il dispositivo che sta richiedendo una determinata pagina, forniscono in risposta solo il foglio di stile ottimizzato.

torna su

10. Un caso di studio: il sito del LAU

A conclusione di questo breve iter che ci ha guidato alla scoperta delle principali caratteristiche dei dispositivi mobili, cerchiamo di affrontare un caso di studio che ci consentirà di porre le basi progettuali di un'ipotetica versione mobile del sito LAU.

Al momento che il sito è ottimizzato per una visualizzazione su PC desktop, presenta un codice XHTML 1.0 Strict valido ed una rigorosa separazione tra il contenuto e la sua presentazione (quest'ultima affidata ai fogli di stile esterni).

Il fatto che il sito sia realizzato secondo gli standard internazionali e in conformità ai 22 requisiti della legge 4/2004 (Legge Stanca) garantisce un elevato grado di portabilità.
Solitamente, le pagine realizzate secondo questi criteri garantiscono un buon adattamento a quei programmi di navigazione che non sono in grado di applicare i fogli di stile. L'utente visualizzerà semplicemente tutti i contenuti testuali della pagina disposti in un unico flusso e non più lungo due dimensioni (la larghezza e l'altezza della finestra del browser).

La lettura delle pagine secondo tale sistema è tipica non solo degli screen reader o dei browser testuali ma è anche di molti browser per dispositivi mobili che tentano di riorganizzare la pagina sulla base dei vincoli fisici imposti dal display.

Se i contenuti del sito fossero stati impaginati con le tabelle la sequenza di lettura avrebbe potuto non garantire lo stesso livello di comprensibilità (soprattutto nel caso di annidamento di tabelle). Il problema dell'utilizzo delle tabelle è legato anche al loro scarso supporto sui dispositivi mobili. Infatti, la consultazione di tabelle su palmare o smartphone spesso obbliga allo scorrimento orizzontale su alcuni browser che non sono in grado di adattare i contenuti alle dimensioni limitate degli schermi.

Le Mobile Web Best Practices 1.0 al punto 5.4.4 [link esterno] si esprimono così a proposito dell'uso delle tabelle:

5.4.4 Tables

[TABLES_SUPPORT] Do not use tables unless the device is known to support them.
[TABLES_NESTED] Do not use nested tables.
[TABLES_LAYOUT] Do not use tables for layout.
[TABLES_ALTERNATIVES] Where possible, use an alternative to tabular presentation.

Traduzione:

5.4.4 Tabelle

[SUPPORTO TABELLE] Non usare tabelle a meno che non si sia sicuri che il dispositivo le supporti.
[TABELLE ANNIDATE] Non usare tabelle annidate.
[TABELLE PER IL LAYOUT] Non usare tabelle per il layout.
[ALTERNATIVE ALLE TABELLE] Dove possible, ricorrere ad un'alternativa alla presentazione tabulare.

Accanto al rilevamento del grado di portabilità delle pagine del sito è comunque necessario affrontare una valutazione relativa agli obiettivi della versione per dispositivi mobili e alle caratteristiche e alle aspettative informative di chi effettivamente fruirà del sito.

Possiamo innanzitutto ipotizzare che gli utenti che utilizzano uno smartphone, nel caso accedessero al sito del LAU, possano essere interessati a conoscere subito le ultime notizie legate a eventi o iniziative previste nell'ambito dell'accessibilità; oppure a ricavare spunti pratici sulle tecniche legate allo sviluppo di pagine accessibili da sperimentare e utilizzare magari successivamente davanti a un PC desktop.

È evidente, in ogni caso, che i contenuti del sito del LAU (nella maggior parte dei casi si tratta di articoli con diversi livelli di approfondimento su tematiche relative alla progettazione e allo sviluppo di pagine accessibili) si prestano meglio ad una fruizione su PC desktop.

Il nostro lavoro di adattamento consisterebbe nel cercare di semplificare, ove possibile, la struttura delle pagine rendendole più adatte ai bisogni informativi dell'utente in movimento, che necessità di una consultazione rapida.

Se, senza fare alcun intervento, andiamo ad esplorare la home page del sito con uno smartphone, ci accorgiamo che gli elementi della pagina si dispongono secondo l'ordine che segue:

  • il link di salto ai contenuti principali
  • il logo
  • il menu di navigazione primaria
  • il menu nascosto che elenca i contenuti principali della pagina
  • il link per la personalizzazione dei contenuti
  • l'abstract descrittivo del sito
  • la sezione relativa al download dei materiali del sito
  • la lista con gli ultimi 10 articoli pubblicati
  • il motore di ricerca
  • la sezione relativa alle ultime 3 notizie
  • la sezione risorse
  • la sezione mappa
  • la sezione rss
  • la sezione contatti il piè di pagina

Sebbene il sito sia già privo di elementi di "disturbo" quali possono essere, ad esempio, banner pubblicitari, oggetti flash, etc., può essere ottimizzato in alcune sue parti.

Ad esempio,

  • le dimensioni del logo possono essere ridotte e adattate alle dimensioni dei monitor dei dispositivi mobili, in modo da evitare sovrapposizioni con altri elementi presenti nella pagina;
  • alcuni accorgimenti stilistici utilizzati per la versione PC desktop potrebbero essere eliminati per aumentare la visibilità degli elementi su dispositivi mobili;
  • il link alla sezione di personalizzazione dei contenuti del sito potrebbe essere omesso (è una funzione più utile per una visualizzazione su PC desktop);
  • l'abstract contenente una breve descrizione del sito non è fondamentale.

Ecco alcuni screenshots della home page LAU modificata per lo smartphone:

Immagine raffigurante una schermata del sito LAU su smartphoneFig. 5

Immagine raffigurante una schermata del sito LAU su smartphoneFig. 6

Immagine raffigurante una schermata del sito LAU su smartphoneFig. 7

Da notare come siano presenti quei collegamenti ("Vai ai contenuti", "Torna all'inizio della pagina") che consentono di navigare la pagina senza dover utilizzare obbligatoriamente la barra di scorrimento verticale.

In termini tecnici, la scelta progettuale adottata è quella di utilizzare un foglio di stile dedicato ai dispositivi mobili specificato dall'attributo media="handheld". Una scelta simile comporta notevoli vantaggi in termini di costi e di manutenzione ma non va trascurato il fatto che, nonostante si cerchi di aderire il più possibile agli standard, non tutti i browser mobili potrebbero garantire un supporto ottimale dell'attributo.

Andiamo ad aggiungere nel codice Xhtml della home page del sito LAU il richiamo al foglio di stile ottimizzato per i dispositivi mobili, attraverso la seguente istruzione:

<link rel="stylesheet" href="mobile.css" 
type="text/css" media="handheld" /> 

Con questo foglio di stile andremo a sovrascrivere tutte le informazioni per la versione mobile. I contenuti che non devono essere visualizzate sui dispositivi mobili, invece, sono semplicemente nascosti attraverso l'utilizzo dell'attributo "display:none". Ad esempio:

p#personalizzazione{display:none;}

La struttura efficace del sito originario ci consente di ottenere risultati soddisfacenti agendo esclusivamente sul foglio di stile dedicato ai dispositivi mobili, senza apportare modifiche alla struttura Xhtml.

torna su

11. Risorse

W3C e specifiche

Mobile Web Initiative [link esterno]

W3C Mobile Web Best Practices Working Group [link esterno]

Mobile Web Best Practices 1.0 [link esterno]

W3C mobileOK Basic Tests 1.0 [link esterno]

XHTML Basic 1.1 [link esterno]

CSS Mobile Profile 2.0 [link esterno]

W3C Mobile Web Best Practices checker (Beta) [link esterno]

Come migliorare interoperabilità e usabilità dei siti web

Device Independence Principles [link esterno]

in italiano

Guida siti per dispositivi mobili [link esterno]
di Andrea Crevola su html.it

Progettazione e realizzazione di siti web per dispositivi mobili
di Andrea Crevola

Tecniche per adattare contenuti in ambito mobile [link esterno]
di Cristina Gena su html.it

Testare siti web con Microsoft Device Emulator [link esterno]
di Cristina Gena su html.it

Rubrica a cura di Gianluca Affinito [link esterno]
su webxtutti.it

in inglese

Mobile Web Design: State of the Mobile Web [link esterno]
di Cameron Moll e Brian Fling su cameronmoll.com

Pocket-Sized Design: Taking Your Website to the Small Screen [link esterno]
di Elika Etemad, Jorunn D. Newth su alistapart.com

10 Reasons to Publish to Mobile [link esterno]
su blueflavour.com

The Future of Mobile [link esterno]
su blueflavour.com

XHTML Mobile Profile/XHTML MP Tutorial [link esterno]
Tutorial completo su XHTML MP

Mobile Web Developer's Guide
Guida completa sul mondo web mobile

7 usability guidelines for websites on mobile devices [link esterno]
7 linee guida basate su una ricerca condotta con utenti Web Mobile

Sistemi operativi

Symbian [link esterno]

Windows Mobile [link esterno]

Palm OS [link esterno]

Linux [link esterno]

Browser

Opera Mobile [link esterno]

Opera mini [link esterno]

Access NetFront [link esterno]

Pocket IE [link esterno]

OpenWave [link esterno]

Minimo [link esterno]

Emulatori

Microsoft Device Emulator [link esterno]

Opera mini demo [link esterno]

Access NetFront [link esterno]

YOSPACE [link esterno]

Libri

Accessibilità Guida completa [link esterno]
di Michele Diodati

Wed Design - La progettazione centrata sull'utente [link esterno]
di Andrea Crevola e Cristina Gena

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Dichiarazione di accessibilità

[ Torna all’inizio della pagina ]