Progettazione e realizzazione di siti web per dispositivi mobili

Progettazione e
realizzazione di siti web
per dispositivi mobili
Andrea Crevola
[email protected]
Sommario
Introduzione alle tematiche del laboratorio
Lo scenario tecnologico
Il modello di fruizione
Le Mobile Web Best Practices (MWBP)
Mobile web
È comune pensare al web come a un medium fruito attraverso un
personal computer.
L’innovazione digitale sta conducendo tuttavia a una sempre minor
identificazione del contenuto con il contenitore.
Il numero di dispositivi di accesso al web è sempre maggiore e
differenziato: telefoni cellulari, PDA, sistemi di gioco portatile e non,
TV media center).
Questa varietà è destinata a crescere e a portare con sé ulteriori
elementi di innovazione.
Accanto a una conoscenza delle caratteristiche tecniche dello
scenario attuale è importante acquisire un metodo e un approccio
alla progettazione orientato agli utenti e alle loro esigenze.
Ubiquitous computing
Il mobile web si inserisce in una prospettiva teorica più ampia denominata
ubiquitous computing (Mark Weiser).
Il personal computer dovrebbe mantenere un ruolo specializzato nelle
operazioni di programmazione e di pubblicazione delle informazioni, ma la
fruizione di contenuti e servizi può essere mediato da altri dispositivi.
I dispositivi mobili si allineano a questo paradigma portando l’informazione
nella realtà, laddove gli utilizzatori ne hanno realmente bisogno.
Il web ha, in questa prospettiva, un ruolo chiave: per definizione è un
sistema aperto e multipiattaforma, vettore ideale di contenuti che non
desiderano essere limitati a un’unica piattaforma di consultazione.
Per maggiori informazioni, si può partire da:
http://en.wikipedia.org/wiki/Ubiquitous_computing
Mobile e Web 2.0
Gli ultimi anni sono stati contraddistinti dal concetto di web 2.0: un
web più interattivo, più partecipativo e “maturo”.
Le sue caratteristiche sono state descritte in un articolo dell’editore
Tim O’Reilly:
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-isweb-20.html
Il web diventa una piattaforma su cui gli utenti possono condividere
e diffondere informazioni con sempre minore difficoltà e limitazioni.
I dispositivi mobili sono una finestra di accesso a dati e servizi che
un tempo erano relegati ad ambienti di fruizione ben precisi e
confinati.
Le attuali tecnologie web consentono di garantire esperienze di
fruizione personalizzate in funzione del dispositivo di accesso, a
dispetto delle attuali limitazioni hardware e software;
I dispositivi
PDA
Smartphones
Tablet PC
Sistemi di gioco
(portatile)
I dispositivi: caratteristiche comuni
Possibilità di essere a conoscenza della posizione
geografica del dispositivo.
Connettività di rete (wireless e/o a collegamento fisico).
Limitate capacità di calcolo e di memoria (rispetto ad un
PC desktop).
Alimentazione a batteria con possibili criticità sui tempi di
autonomia.
Numerose varianti in termini di piattaforme, componenti
hardware e sofware, interfacce-utente (anche all’interno
di una stessa classe di dispositivo).
Input e output
Alcune risoluzioni frequenti:
160 x 160 (smartphone)
240 x 320
480 x 640
320 x 480
320 x 320
176 x 208
208x320
240 x 260
1400 x 1050 (tablet PC)
Modalità di input
Tastiere alfanumeriche
Tastiere QWERTY
Frecce direzionali
Joystick
Touch screen
Stili (“pennini”)
Software
Sistemi operativi
Windows Mobile
Palm OS
Symbian
Linux
Apple Mac OS X (IPhone)
Browser
Openwave Mobile Browser
Nokia browser
Opera Mobile Browser
Pocket IE
NetFront Browser
Web browser 3.0 (Palm)
Safari (IPhone)
Connettività
GPRS (General Packet Radio Service): 57.6
Kbit/s in download e di 14.4 Kbit/s in upload.
UMTS (Universal Mobile Telecommunications
System): 384Kbit/s per la trasmissione di dati in
download, paragonabile a una ADSL.
IEEE 802.11 (Wi-Fi): velocità fino a 54Mbit/s
IEEE 802.16 (Wi-Max);
Attenzione: tariffe a tempo Vs tariffe a dati
Il modello di fruizione
Uno scenario “innovativo” può far porre la
concentrazione soprattutto sulla dimensione
tecnica che, per molti motivi, tende ad
accentrare su di sé l’attenzione.
La conoscenza del piano tecnico è
fondamentale ma presuppone una
consapevolezza relativa a come e perché gli
utenti accedono al web con i dispositivi mobili.
Caratteristiche dell’accesso
all’informazione
Ravvicinato: la distanza dal display è pochi centimetri anziché di alcune decine o
interi metri.
Individuale, mentre di fronte a uno schermo di PC o a una TV possono sedere
anche più persone, tutte coinvolte nell’esperienza di fruizione.
Seriale: solo pochi browser per device mobili permettono di aprire più di una finestra
di navigazione alla volta; nel caso, l’apertura di altri programmi, come l’agenda,
causano un radicale spostamento del focus.
Outdoor: i dispositivi mobili consentono un uso non relegato tra le mura di casa o
dell’ufficio, quindi anche in contesti rumorosi e contraddistinti da un illuminazione
naturale (quindi ridotta o eccessiva).
Immersa e condizionata dal contesto: molto spesso il mobile web viene sfruttato
per accedere ad informazioni utili per portare a termine azioni della propria vita
quotidiana, come organizzare spostamenti, consultare elenchi e directory di risorse
ecc.
Scopi / Motivazioni
Il comportamento di ricerca più frequente è probabilmente la ricerca di “oggetti conosciuti”: l’utente
accede al mobile web per recuperare un informazione o di eseguire un’azione che già riesce a
definire con precisione e si aspetta di individuare rapidamente le modalità per portare a termine la
sua esigenza.
Solitamente, la ricerca di informazione è legata a necessità legate al contesto fisico in cui l’utente
e il suo dispositivo si trovano: per esempio, la ricerca di un orario ferroviario, di informazioni su un
evento, del prezzo di un prodotto da acquistare.
Per questo i molti siti per dispositivi mobili consistono soprattutto directory di link, mini-portali, siti
di reference ecc: si privilegia la rapidità di conclusione del task rispetto alla navigazione
esplorativa (e senza meta).
Altro caso d’uso frequente è la ricerca di un aggiornamento informativo rispetto ad azioni
precedentemente avviate o argomenti di interesse: per esempio la ricerca di un risultato di un
evento sportivo.
Simili comportamenti sono anche funzione delle condizioni di fruizione, dalle limitazioni
ergonomiche, dalle logiche di tariffazione.
Anatomia di un sito mobile
Un sito web (sia tradizionale sia nato per il mobile web) è
infatti composto da due dimensioni fondamentali: codice
e design:
Il primo livello, se sviluppato con le dovute attenzioni, può
adattarsi senza difficoltà allo strumento di consultazione mobile:
alle sue capacità di visualizzazione, alle dimensioni dello
schermo così come alle modalità di inserimento di input.
Il secondo, invece, riguarda la gestione dei contenuti,
l’organizzazione dell’informazione e la strutturazione delle unità
informative (pagine), dell’usabilità del sistema e – più in generale
– la dimensione comunicativa del sito.
Strategie di progettazione
Due alternative:
Sito derivato: un’unica realizzazione del sito web e adattamento della
versione per PC
l’utente consulta le medesime pagine (al medesimo indirizzo web) sia che vi acceda
tramite un PC desktop sia che stia utilizzando un cellulare o un palmare. Pur non
avendo la medesima impaginazione, l’informazione e le funzionalità presenti saranno
ugualmente disponibili;
Sito dedicato: realizzazione della versione di un sito appositamente pensata
per il mondo mobile, anche in assenza di una corrisponente versione per
compter desktop
il sito web ha un’identità propria: partendo da un’insieme di materiali già esistenti ma
da riorganizzare e revisionare mediante un processo di analisi e progettazione vero
e proprio, significa riflettere attentamente sulle esigenze degli utenti, sulle ragioni che
li potrebbero spingere ad accedere all’informazione mediante i loro telefoni cellulari e
di quali contenuti essi sono alla ricerca
Siti mobili derivati: vantaggi
Riduzione dei costi di progettazione e di realizzazione: necessario
affrontare solo un attiività di ottimizzazione;
Riduzione dei costi di mantenimento: un’eventuale modifica ai
contenuti o ad altri elementi saranno immediatamente disponibili
anche per gli utenti di tutti i dispositivi;
L’idea di un web unico, indipendente dal dispositivo di fruizione, è
del resto la posizione del W3C stesso;
È decisamente più semplice mantenere un look & feel omogeneo
indipendente dal dispositivo utilizzato.
Siti derivati: svantaggi
Può essere complicato ottenere una versione mobile di buona qualità cercando di adattare un sito
che è stato costruito con tecnologie obsolete o deprecate;
Le tempistiche di adattamento potrebbero essere prolungate, con il rischio di dissipare i vantaggi
economici precedentemente illustrati;
Esiste il rischio di giungere a una visualizzazione che eccede i limiti orizzontali del display
dell’utente, rendendo necessario all’utente un fastidioso scorrimento orizzontale per la lettura dei
contenuti;
Se il giudizio sul comportamento delle tecnologie web sulle piattaforme mobili è – nonostante tutto
– positivo, altrettanto non si può affermare per quanto concerne l’organizzazione dell’informazione,
sia a livello di pagina sia relativamente al sito nel suo complesso: si corre il rischio di fornire
pagine troppo ricche di contenuti, che rallentano l’accesso e che complicano l’orientamento
all’interno del sito;
Un’analoga riflessione può valere anche per gli elementi di interattività come i moduli (form), che
se su un piano tecnico possono continuare a funzionare, da un punto di vista più operativo
possono rivelarsi molto più complessi da utilizzare, dal momento che rispetto ad un personal
computer vengono a mancare mouse e tastiera;
L’utente che ha accesso da un dispositivo mobile potrebbe giungere in pagine che non sono
ancora state ottimizzate o che presentano contenuti in formati non ben supportati da tutti i
dispositivi (per esempio il PDF), con una conseguente fastidiosa interruzione dell’esperienza
d’uso;
L’utente di riferimento non è sempre altrettanto facilmente derivabile.
Siti dedicati: vantaggi
preceduto da un’attenta fase di analisi e nasce a seguito di una
progettazione centrata sugli utenti, esistono buone probabilità che si
pubblichino contenuti e servizi di valore per i propri utenti;
se si parte da un sito già esistente, la selezione dei contenuti più adatti alla
fruizione mobile evita di sovraccaricare l’interfaccia con informazione non
pertinente, sovrabbondante e – spesso – indesiderata;
parimenti, è possibile superare rapidamente le criticità presenti sul sito per
PC ed evitare di riproporre anche sul canale mobile le medesime
imperfezioni (per esempio un codice HTML non standard o l’uso di formati
proprietari);
si può proporre un’architettura dell’informazione ottimizzata e contenuti
pensati specificatamente per una consultazione “nomade”, così come si può
costruire il sito attorno ad un’interfaccia-utente che sia capace di
semplificare l’interazione a chi dispone di sistemi di puntamento e di
immissione del testo meno efficienti di mouse e tastiera;
si può ottenere un sito più semplice e leggero, rapido da scaricare e da
consultare;
Siti dedicati: svantaggi
trattandosi di un prodotto che possiede una sua autonomia, sono spesso
necessari costi di progettazione e di sviluppo extra;
se il sito viene pubblicato contemporaneamente su più canali (desktop e
dispositivi mobili) si può incorrere difficoltà a mantenere aggiornate e
consistenti le varie versioni: un problema significativo sia per i contenuti che
– in particolar modo – per le funzionalità più interattive.
la grande variabilità dei dispositivi finali rende difficile la produzione di un
interfaccia-utente davvero universale, ossia capace di accontentare i
requisiti di tutti i browser e le capacità dei vari devices;
se ci si orienta anche verso la redazione di contenuti pensati appositamente
per l’utenza mobile, si deve essere pronti a vedere quasi raddoppiare il
lavoro (e i costi) relativi al content management: dalla redazione dei testi al
montaggio audio-video dei contenuti multimediali.
Adattamento
I lati negativi di entrambi gli
approcci possono ricevere un
contributo cruciale dalle tecniche
di adattamento.
Contenuti e servizi sono modellati
in funzione del dispositivo e del
contesto di fruizione finale.
Tanto più tale processo è
trasparente e tanto meno l’utente
deve spendere energie per
raggiungere contenuti e servizi
adatti al suo dispositivo.
A tal fine, è necessario che la
piattaforma tecnologica diventi più
“intelligente”: devono essere a
disposizione delle metainformazioni utili a determinare
quali dovranno essere le
caratteristiche dell’adattamento
stesso
Negoziazione
Il primo passo per ottenere un processo di adattamento efficace
consiste nel riconoscimento da parte del server delle caratteristiche
tecniche del dispositivo richiedente.
La negoziazione può avvenire in quattro modalità:
l’utente richiede esplicitamente una versione ottimizzata per un
dispositivo mobile;
il browser del dispositivo rappresenta in versione ottimizzata i contenuti
inviati in modo identico a tutti i dispositivi;
Il server riconosce il client sulla base delle informazioni inviate nelle
intestazioni HTTP che accompagnano la richiesta della pagina;
Il server ottiene un profilo completo del dispositivo di accesso grazie a
una descrizione formale basata sulle specifiche CC/PP (UAProf e
WURFL)
Adattamento e tecnologie web
Sul piano tecnologico è possibile risolvere
il problema dell’adattamento in quattro
modi principali:
rendering del browser (SSR di Opera);
la selezione del CSS (media queries);
l’applicazione delle trasformazioni XSL;
l’impiego di un Content Management
System.
Selezione del CSS
Mobile Web Best Practices
Le Mobile Web Best Practices (MWBP) sono un insieme di
raccomandazioni fornite dal W3C per la costruzione di siti web adatti al web
mobile, non solo dal punto di vista tecnico ma anche sotto il profilo
dell'esperienza d'uso.
Prendono in considerazione aspetti quali la gestione della navigazione, la
struttura della pagina, il trattamento del dialogo tra l'applicazione e l'utente
nonché alcune dimensioni più strettamente tecniche legate alla
trasmissione dell'informazione verso i dispositivi mobili.
Se, da un lato, alcune caratteristiche tecniche di questo ambito potranno
cambiare ed evolversi (ad esempio le dimensioni degli schermi di
consultazione potrebbero aumentare o avere maggiori performance),
dall'altro si assume che alcune problematiche, come per esempio l'input di
dati, resteranno costanti nel tempo.
MBWP: struttura
Introduzione alle problematiche del mobile web.
One web.
Contesto di distribuzione finale e adattamento.
Best practices:
1.
2.
3.
4.
5.
Comportamento generale;
Navigazione e link;
Layout di pagina e contenuti;
Elementi della pagina;
Input dell’utente
MBWP: comportamento generale
Consistenza tematica: assicurarsi che il contenuto accessibile da una URL
offra un’esperienza coerente qualora sia fruita da dispositivi differenti;
Sfruttare le capacità del dispositivo: l’autore della pagina dovrebbe
cercare di offrire un’esperienza d’uso accresciuta su quei dispositivi dalle
potenzialità maggiori (e non limitarsi al minimo comune denominatore):
progressive enhancement.
Risolvere le deficienze delle attuali implementazioni: l’autore della
pagina dovrebbe cercare di risolvere i problemi legati alle attuali
implementazioni delle tecnologie web da parte dei browser per dispositivi
mobili (“work around” Vs “Hack”).
Test delle pagine: è essenziale condurre dei test di resa della pagine sia
sui dispositivi effettivi sia mediante degli emulatori.
MBWP: navigazione e link (1)
Usare URL di ingresso brevi.
Fornire una barra di navigazione minimale all’inizio della pagina, in
modo che sia visibile immediatamente e senza la necessità di scorrere la
pagina; se si vuole usare una navigazione secondaria, la si può mettere a
fondo pagina (ma solo se necessaria).
Bilanciamento ampiezza / profondità dell’ipertesto: si valuti l’opportunità
di “appiattire” la struttura del sito al fine di diminuire il numero di link
necessari per raggiungere una data pagina.
Meccanismi di navigazione consistenti: un sistema di navigazione
costante permette all’utente di orientarsi meglio in un sistema informativo.
Tasti di accesso rapido (access keys): associare un tasto di accesso
rapido (con l’attributo XHML accesskey=“1”) alle opzioni di navigazione più
frequenti può aumentare la velocità di interazione.
MBWP: navigazione e link (1)
Chiarire la destinazione dei link: ogni collegamento dovrebbe aiutare
l’utente a capire quale sarà il contenuto e il formato della destinazione.
Evitare le immagini-mappa: sono inutilizzabili per molti dispositivi che non
possiedono sistemi di puntamento diretto (se si desidera usarle, fornire un
equivalente testuale: per esempio una lista di link).
Evitare le finestre pop-up ed evitare di aprire altre finestre senza aver
avvisato l’utente.
Evitare pagine che si aggiornano in modo automatico (a meno che non
abbiate avvisato l’utente e non forniate un meccanismo per interrompere il
caricamento).
Evitare i reindirizzamenti automatici: possono disorientare l’utente e
rallentano la connessione con le risorse remote.
Minimizzare il numero di risorse incorporate nella pagina (CSS,
immagini ecc.): ogni risorsa, infatti, corrisponde a una diversa richiesta
HTTP che può rendere più lento l’accesso all’informazione.
MBWP: navigazione e link (2)
Chiarire la destinazione dei link: ogni collegamento dovrebbe aiutare
l’utente a capire quale sarà il contenuto e il formato della destinazione.
Evitare le immagini-mappa: sono inutilizzabili per molti dispositivi che non
possiedono sistemi di puntamento diretto (se si desidera usarle, fornire un
equivalente testuale: per esempio una lista di link).
Evitare le finestre pop-up ed evitare di aprire altre finestre senza aver
avvisato l’utente.
Evitare pagine che si aggiornano in modo automatico (a meno che non
abbiate avvisato l’utente e non forniate un meccanismo per interrompere il
caricamento).
Evitare i reindirizzamenti automatici: possono disorientare l’utente e
rallentano la connessione con le risorse remote.
Minimizzare il numero di risorse incorporate nella pagina (CSS,
immagini ecc.): ogni risorsa, infatti, corrisponde a una diversa richiesta
HTTP che può rendere più lento l’accesso all’informazione.
MBWP: Layout di pagina e contenuti (1)
Contenuti:
Assicurarsi
che i contenuti siano adatti a
un “contesto mobile”;
Usare un linguaggio chiaro e semplice;
Limitarsi a ciò che l’utente ha richiesto: è
opportuno evitare l’invio di risorse non cercate
dall’utente, il quale può addirittura vivere con
fastidio tale presenza.
MBWP: Layout di pagina e contenuti (2)
Dimensione delle pagine
Dividere
le pagine in porzioni più limitate e
maneggevoli;
Assicurarsi che la dimensione totale delle pagine
sia appropriata alle capacità di memoria del
dispositivo (il calcolo comprende anche immagini e
CSS!).
Scorrimento delle pagine:
Limitare
lo scorrimento in una sola direzione, a
meno che lo scorrimento secondario non sia evitabile.
MBWP: Layout di pagina e contenuti (3)
Stabilire una buona gerarchia dell’informazione:
assicurarsi che gli elementi centrali per il significato della
pagina precedano quelli che non sono necessari.
Uso degli elementi grafici:
Non usare elementi grafici per ottenere effetti di spaziatura;
Non utilizzare immagini che non possono essere
visualizzate dal dispositivo (per formato o dimensione);
Si evitino immagini ad alta risoluzione a meno che non
siano centrali per veicolare il significato della pagina.
MBWP: Layout di pagina e contenuti (4)
Colore:
Assicurarsi
che il colore non sia l’unico metodo
per veicolare un’informazione (cfr. WCAG);
Utilizzare un sufficiente contrasto tra gli elementi
in primo piano e lo sfondo (cfr. WCAG);
Immagini di background: se si usano immagini
di sfondo assicurarsi che il contenuto resti
leggibile sul dispositivo;
MBWP: elementi della pagina (1)
Titoli: fornire titoli (<title>) di pagina brevi ma descrittivi.
Frames: non usare i frames.
Markup strutturale: usare le caratteristiche semantiche del markup per
dare una struttura logica al documento.
Tabelle:
Non utilizzare tabelle a meno che non si sia certi che il device le supporti;
Se le supporta, non usare tabelle annidate;
Se le supporta, non usare tabelle di layout ma solo per dati di natura tabellare
(es. dati statistici);
Se le supporta, ove possibile, fornire una presentazione alternativa non basata
su tabelle;
MBWP: elementi della pagina (2)
Elementi non testuali:
Fornire un equivalente testuale per ogni elemento non testuale (immagini, video,
audio ecc);
Non affidarsi a oggetti incorporati (es. applet Java o animazioni Flash) o a script;
Dimensione delle immagini:
Specificare le dimensioni delle immagini nel codice di marcatura, in modo tale
che sia agevolato il rendering del browser;
Effettuare il ridimensionamento delle immagini lato server, per massimizzare
l’efficienza della comunicazione tra client e server;
Markup valido: creare pagine valide rispetto alle grammatiche formali (in
alternativa la presentazione finale potrebbe essere difficile da controllare);
MBWP: elementi della pagina (3)
Unità di misura: non usare i pixel né unità di misura assolute (es. pt
o mm), ma fare affidamento a unità di misura relative (percentuali,
ems, parole chiave) sia nel markup che nel CSS;
Fogli di stile:
Usare i fogli di stile per controllare il layout e la presentazione, a meno
che il device non li supporti;
Organizzare i contenuti in modo tale che possano essere letti anche in
assenza di foglio di stile;
Mantenere i fogli di stile di dimensioni ridotte;
Minimizzare: scegliere soluzioni di markup leggere e poco intricate
(pro efficienza)
MBWP: elementi della pagina (4)
Content types:
assicurarsi che il server invi le pagine al client in un formato che si conosce
come supportato dal dispositivo;
Laddove possibile, inviare i documenti in un formato preferito dall’utente.
Codifica dei contenuti:
Assicurarsi che il contenuto sia codificato secondo un set di caratteri
riconoscibile da parte del dispositivo;
Indicare nella risposta HTTP la codifica del carattere da utilizzare (es. ContentType: text/html; charset=utf-8);
Messaggi di errore: fornire all’utente messaggi di errore ad alto contenuto
informativo nonché modalità per allontanarsi da una situazione di errore in
direzione di informazione più utile.
MBWP: elementi della pagina (5)
Cookie: non fare affidamento sui cookie per
memorizzare informazioni in modo persistente (meglio
utilizzare sempre tecnologie lato server).
Sfruttare la memoria cache dei dispositivi mediante le
opportune intestazioni HTTP di risposta;
Font: non fare affidamento su tipologie di caratteri (font)
che potrebbero non essere supportate dai dispositivi;
MBWP: Input degli utenti (1)
Input:
Minimizzare
il più possibile il numero di passaggi in
cui è richiesto l’input dell’utente (inserimento di testo,
selezione di link ecc);
Evitare il più possibile l’inserimento di testo libero
(preferire la selezione tra opzioni predefinite);
Offrire valori pre-selezionati di default, se possibile;
Specificare una modalità di default per l’inserimento
di testo, per il linguaggio e per il formato di input (es.
per le date);
MBWP: Input degli utenti (2)
Ordine di tabulazione: assicurarsi che esista un ordine
logico tra link, elementi delle form e oggetti interattivi
(per esempio sfruttando l’attributo tabindex, se
supportato);
Etichette per i campi delle form:
Ogni elemento di una form dovrebbe essere accompagnato da
un etichetta opportunamente marcata con il tag <label>;
Posizionare le etichette testuali in modo che sia evidente la
relazione con il campo a cui fanno riferimento.
Riferimenti
W3C, “Mobile Web Best Practices 1.0”, 2006
(http://www.w3.org/TR/mobile-bp/)
Crevola A., “Guida siti per dispositivi mobili”, 2005
(http://mobile.html.it/guide/leggi/29/guida-siti-per-dispositivi-mobili/)
Crevola A., “Mobile Web Best Practices 1.0”, 2006
(http://mobile.html.it/articoli/leggi/1647/mobile-web-best-practices-10/)
Etemad E., Newth J.D., “Pocket-Sized Design: Taking Your Website to the
Small Screen”, 2004
http://www.alistapart.com/articles/pocket/
Morville P., “Ambient Findability”, O’Reilly 2006
Altri link utili http://del.icio.us/acrevola/labScidecom