Linee guida - e qualche suggerimento - per un corretto approccio alla programmazione web per dispositivi mobili.

2. Argomentazioni
1. Comportamento Generale
2. Navigazione e Link
3. Layout e Impaginazione dei Contenuti
4. Definizione Elementi delle Pagine
5. Input degli Utenti

3. 1. Comportamento Generale
Affrontare le
Esperienza Sfruttare le Effettuare test
carenze dei
tematicamente capacità dei su emulatori e
software di
coerente dispositivi dispositivi reali
navigazione

4. 1.1 Esperienza tematicamente coerente
La prima attenzione dovrebbe essere volta ad assicurarsi
che il contenuto fornito da un URI assicuri un'esperienza
tematicamente coerente qualora sia fruito da diversi
dispositivi, indipendentemente dalle capacità di questi.
Ciò non significa solamente garantire la presenza delle
medesime informazioni ma anche consentire all'utente di
recuperare lo stato del sistema ottenuto su un altro device
(per esempio, se il sito possiede un'area riservata e
personalizzata, l'utente dovrebbe potervi accedere anche
se sta utilizzando un telefono cellulare).

5. 1.2 Sfruttare le capacità dei dispositivi
Gli sviluppatori dovrebbero poi sfruttare le capacità dei
dispositivi per generare esperienze d'uso avanzate: dopo
essersi assicurati circa la fruibilità del proprio sito su un
profilo base (aka Default Delivery Context) è possibile
infatti utilizzare le capacità specifiche di una determinata
classe di dispositivi per fornire una migliore esperienza di
navigazione.

6. 1.3 Affrontare le carenze dei software di
navigazione
Il terzo aspetto su cui si chiede di porre attenzione è il
modo di affrontare le carenze dei software di
navigazione ed in particolare a noti bug ed errate
implementazioni delle specifiche tecniche nei browser.
Sono comprensibili ed ammissibili work around per ovviare
a queste circostanze: un atteggiamento che è però
accettato solo in forma transitoria e non accettato qualora i
browser abbiano un comportamento corretto.

7. 2. Navigazione e Link -1-
Bilanciamento
tra profondità
Navigazione Meccanismi di
URI devono e ampiezza Fare uso di Identificare il
minimale ad navigazione
essere corti della struttura access keys target dei link
inizio pagina consistenti
gerarchica del
sito

8. 2. Navigazione e Link -2-
Non utilizzare
Non usare le Evitare di aprire Evitare il refresh mark up che
immagini delle finestre di automatico delle applicano un
mappate pop-up pagine reindirizzamento
automatico

9. 2.1 URI devono essere corti
Bisogna porre una particolare attenzione alla definizione della struttura
e al modello di navigazione di un sito pensato per il mobile Web.
La prima raccomandazione a riguardo osserva che gli URI (ossia gli
indirizzi delle pagine web) del sito devono essere corti, per ovvi
motivi di limiti alla digitazione su apparecchi mobili. Sarebbe anche
meglio configurare il Server Web che ospita il sito affinché sia possibile
digitare il nome del dominio, o del sotto-dominio, senza dover
specificare anche il nome del file che si riferisce alla pagina stessa
(http://www.esempio.org/ invece di http://www.esempio.org/index.html,
e http://www.esempio.org/esempio invece di
http://www.esempio.org/esempio.html). È anche consigliabile registrare
un nome di dominio più corto e utilizzarlo come alias per la versione
mobile.

10. 2.2 Navigazione minimale ad inizio pagina
Il secondo punto di questo gruppo invita i progettisti
a fornire solo una navigazione minimale ad inizio
pagina. Una volta avuto accesso al sito, infatti, il visitatore
dovrebbe poter visionare immediatamente il contenuto
della pagina senza dover effettuare dello scrolling
riducendo al minimo gli elementi decorativi e funzionali.

11. 2.3 Bilanciare profondità e ampiezza -1-
La terza raccomandazione di questa sezione invita
a cercare di bilanciare la presenza di molti link su una
stessa pagina con il fatto di chiedere all'utente di seguire
troppi link per raggiungere quello che sta cercando. La
progettazione deve avere per obiettivo un bilanciamento tra
l'avere molti link di navigazione su una sola pagina e il fatto
di dover navigare tra molti link (sparsi tra più pagine) per
raggiungere il contenuto desiderato. Quindi
sostanzialmente si deve cercare un bilanciamento tra
profondità e ampiezza della struttura gerarchica del
sito.

12. 2.3 Bilanciare profondità e ampiezza -2-
Ecco, in merito, alcune best practice che potrebbero rivelarsi utili
durante la progettazione (da calare nella realtà dell’utente mobile):
• valutare, attraverso un attenta analisi del file di log, quali sono i
servizi più utilizzati dagli utenti, e porli in “primo piano” nel sito
mobile;
• valutare, sempre attraverso i log, quali sono i pattern di maggiore
utilizzo, ed eventualmente ri-progettare la navigazione in tale ottica;
• progettare l'architettura di navigazione del sito ponendo attenzione
alla comprensibilità delle categorie semantiche in cui i link sono
raggruppati, in modo tale da favorirne il reperimento (card sorting:
ragionando cioè raggruppando i gruppi logici degli argomenti trattati
nel sito)

13. 2.4 Meccanismi di navigazione consistenti
Le successive raccomandazioni contenute in questo
secondo gruppo si richiamano a principi più generali di
accessibilità e usabilità degli strumenti di navigazione,
cominciando dal fornire meccanismi di navigazione
consistenti, ovvero utilizzare le stesse modalità di
navigazione in tutte le pagine per aiutare gli utenti a
orientarsi e consentire loro di identificare i meccanismi di
navigazione più facilmente. Viene promosso il metodo drill-
down per l’accesso alle singole sezioni, con un link "torna
su" per tornare all'inizio della sezione o della pagina.

14. 2.5 Fare uso di access keys
La quinta raccomandazione chiede di assegnare le
access keys ai link dei menu di navigazione e alle
funzionalità utilizzate più di frequente. Le scorciatoie da
tastiera risultano particolarmente utili sui dispositivi mobili
soprattutto quando non c'è un dispositivo per il
puntamento. Con una pressione sul tasto corrispondente al
link l'utente riesce a navigare utilizzando la tastiera
evitando l'uso dei tasti direzionali per muoversi, circostanza
che può non sempre essere intuitiva ed efficace.

15. 2.6 Identificare il target dei link -1-
Successivamente si richiede di identificare chiaramente il
target di ciascun link e indicare il formato del file a cui
il link porta, a meno che si sia sicuri che il dispositivo lo
supporta. Gli utenti di device mobili possono avere
problemi di lunghi tempi di attesa e costi eccessivi dovuti al
fatto di dover seguire molti link e di conseguenza navigare
tra tante pagine. È di rilevante importanza poter sapere in
anticipo dove un link porta in modo tale da poter valutare
se si è interessati a seguire il link o meno.

16. 2.7Identificare il target dei link -2-
Di conseguenza, da un lato è importante dare nomi
significativi ai link e/o specificare la destinazione del link
nell'attributo title e, dall'altro, se il link porta ad un file di
grandi dimensioni e di formato inatteso (non HTML), è
bene avvertire l'utente dando un'idea della dimensione
della risorsa. L'accesso a file di grandi dimensioni o di
formato non direttamente interpretabile dal browser
dovrebbe essere possibile e lasciata alla scelta libera
dell'utente.

17. 2.8 Non usare le immagini mappate
È meglio cercare di non usare le immagini mappate a
meno che non si sappia che il client è davvero in grado di
supportarle; se proprio si desidera utilizzare le image map
sarebbe opportuno trattarle come forme geometriche (più
facilmente navigabili con i tasti direzionali, presenti invece
su moltissimi dispositivi mobili), oppure dividere
un'immagine grande in tante piccole immagini e trattarle
separatamente.

18. 2.9 Evitare i pop-up
Pop-up, refresh e reindirizzamenti sono attività che
possono generare confusione nell'utente, aumentano i
costi di connessione (per esempio effettuando download
non richiesti di pagine) e ritardano complessivamente
l'interazione. Va inoltre annotato che molti device mobili
non riescono a supportare più di una finestra alla volta,
pertanto sarebbe semplicemente inutile tentare di aprire
una nuova finestra rispetto a quella corrente. Ecco perché
è meglio evitare di aprire delle finestre di pop-up o altre
finestre che cambiano la finestra corrente senza avvertire
l'utente.

19. 2.10 Evitare il refresh automatico delle pagine
Le pagine con l'auto-refresh presentano in generale già dei
problemi di accessibilità e di usabilità, come il
disorientamento dell'utente. In ambito mobile possono
esporre l'utente a costi non previsti dovuti al fatto che
queste pagine possono restare aperte e nascoste in
background. È preferibile comunque evitare il refresh
automatico delle pagine a meno che l'utente ne sia
almeno informato e abbia un modo per fermare il refresh.

20. 2.11 Non utilizzare mark up che applicano un
reindirizzamento automatico
Nel caso si renda necessario un reindirizzamento
dell’utente, è meglio non utilizzare mark up che
applicano un reindirizzamento automatico delle pagine;
piuttosto è meglio configurare il server affinché effettui il
redirect attraverso codici HTTP 3xx.

21. 3. Layout e Impaginazione dei Contenuti
Dimensione
Contenuti delle Scrolling Grafica
pagine

22. 3.1 Contenuti -1-
La prima serie di raccomandazioni riguarda i contenuti:
• assicurarsi che il contenuto sia adatto all'utilizzo in
un contesto mobile
• usare un linguaggio semplice e chiaro
• limitare il contenuto a quanto l'utente ha richiesto
Date le limitazioni intrinseche del mezzo che ne
influenzano l'utilizzo, e altri fattori specifici come i costi di
connessione elevati, il contesto in cui si può trovare l’utente
(fuori da casa o dall’ufficio, in ambienti affollati o rumorosi,
mentre sta camminando, etc.) si dovrebbe cercare di
inviare all'utente solo l'informazione specifica, il più
possibile pertinente alle sue richieste.

23. 3.1 Contenuti -2-
L'informazione dovrebbe essere sempre rilevante, o per lo meno
l'informazione più rilevante dovrebbe essere in primo piano. Si
consiglia di adottare la tecnica del front loading che, sinteticamente,
chiede di porre l'informazione più importante ad inizio di titoli, paragrafi,
liste ecc…
Qui entra in gioco la seconda linea guida (usare un linguaggio semplice
e chiaro) che a differenza delle precedenti dovrebbe essere tenuta
sempre in conto anche nel desktop Web. Gli utenti di Internet non
leggono, ma scorrono l'informazione. Dunque uno stile breve e diretto,
di stampo giornalistico può aiutare nella fruizione del testo su Web.
Questo vale ancor più sul web mobile. chi, che cosa, dove, quando e
perché dovrebbero sempre precedere brani più lunghi di informazione
per mettere l'utente in condizione di decidere se approfondire
l'nformazione presentata oppure no.

24. 3.2 Dimensione delle pagine
• dividere la pagina in porzioni usabili, ma limitate
• assicurarsi che la dimensione totale della pagina sia
appropriata alle limitazioni di memoria del device (si veda ad
esempio il sito Mobile Review per informazioni dettagliate e
comparazioni tra dispositivi)
Se le pagine sono troppo lunghe, sono anche troppo pesanti da
scaricare. D'altra parte se sono troppo corte si costringe l'utente a
cliccare molte volte per raggiungere l'informazione desiderata. Una
giusta via di mezzo tra la paginazione e lo scrolling è in parte una
questione di gusto, in parte una questione di necessità. I dispositivi con
disposizioni di memoria molto rigide accettano solo pagine dalle
dimensioni limitate. Ugualmente ci sono invece dispositivi lacunosi
nell'offrire una buona esperienza di scrolling, ma ottimi nel recupero di
pagine anche pesanti.

25. 3.3 Scrolling -1-
È consigliabile limitare lo scrolling ad una direzione, a
meno che lo scrolling secondario non possa non essere
evitato. Le pagine dovrebbero proporre sempre lo scrolling
lungo una medesima direzione, per facilitare l'esperienza
dell'utente. Lo scrolling in senso verticale è da preferirsi, in
linea di massima, in quanto più comodo e maggiormente
vicino alle esperienze passate dell'utente. Tuttavia certi
oggetti, come mappe e immagini, possono fare scrollare
anche orizzontalmente la pagina. Sarebbe comunque
meglio presentare immagini dalle dimensioni ridotte, e dare
la possibilità all'utente di ingrandirle a piacere.

26. 3.3 Scrolling -2-
Le informazioni più rilevanti dovrebbero sempre essere a inizio pagina:
assicurarsi che il materiale centrale per la comprensione della pagina
preceda il materiale che non lo è. La maggior parte delle pagine web sono
progettate per ospitare gli elementi di navigazione nella parte superiore o
laterale della pagina. Tuttavia nel caso di display dalle dimesioni limitate questo
potrebbe causare un inconveniente: la navigazione appare prima del testo
rilevante della pagina stessa, che può anche essere ragguinbile solo grazie allo
scrolling.
Dal momento che l'utente si fa un idea della pagina dalle prime cose che vede,
sarebbe bene limitare lo spazio dedicato ad elementi di navigazione, per non
parlare di pubblicità e immagini decorative. Le prime soluzioni potrebbero
essere: mettere un link in alto nella pagina che porti alle selezioni di
navigazione poste da qualche altra parte, come in fondo alla pagina, oppure
mettere una barra di navigazione di solo testo con le principali sezioni della
pagina.

27. 3.4 Grafica -1-
• non usare la grafica per spaziare gli elementi (utilizzare un
elemento grafico di un pixel per il posizionamento assoluto non
funziona su molti schermi)
• non usare immagini che non possano avere una buona resa sul
device. Evitare le immagini larghe o ad alta risoluzione eccetto il
caso in cui dell'informazione critica andrebbe altrimenti persa
• assicurarsi che l'informazione veicolata dal solo colore sia
disponibile anche senza colore
• assicurarsi che la combinazione tra i colori di sfondo e quello
in primo piano fornisca un contrasto sufficiente
• quando si usano immagini come sfondo assicurarsi che il
contenuto risulti leggibile sul device

28. 3.4 Grafica -2-
Se ad esempio si vuole che il colore sottolinei oppure differenzi del
testo ci si deve ricordare che non sempre gli utenti vedono il colore
(pensiamo agli ipovedenti). Un link, ad esempio, non dovrebbe essere
solo differenziato da una scelta cromatica differente, ma anche dalla
sottolineatura, perché alcuni utenti potrebbero non accorgersene.
Così come il contrasto tra lo sfondo e i colori di primo piano dovrebbe
sempre essere controllato (ad esempio, per controllare ci si può
avvalere di uno strumento apposito). Stesso discorso vale per le
immagini di sfondo, che non dovrebbero interferire con il testo, e in
ambiente mobile andrebbero usate con molta cautela.

29. 4. Definizione Elementi delle Pagine
Struttura Elementi
Titolo del Fogli di Tipi di Note
Frame logica del Tabelle non Immagini Codice Usabilità
documento stile (CSS) contenuto Tecniche
documento testuali

30. 4.1 Titolo del documento
Partendo dal principio, è utile fornire un titolo
breve ma descrittivo per ogni pagina. Deve
essere corto per ridurre il peso della pagina, ed
inoltre potrebbe essere troncato dal browser, o
addirittura non visualizzato. Inoltre, esso potrebbe
venire utilizzato come etichetta del bookmark.

31. 4.2 Frame
Come già sarebbe auspicabile per l’aspetto
desktop web, l'utilizzo dei frame è bandito anche
e soprattutto per i siti progettati per ambiente
mobile, dove le limitate dimensioni dello schermo
rendono il frameset ingestibile e assolutamente
poco navigabile.

32. 4.3 Struttura logica del documento
Parlando di elementi strutturali si indica di utilizzare quelle
caratteristiche del linguaggio di mark up per indicare la
struttura logica del documento, facilitando così anche
la semantizzazione del documento. Nella progettazione di
una pagina HTML e' ritenuta essere una buona pratica
quella di indicare la struttura logica della pagina (titolo,
sottotitolo, paragrafo) con dei tag appropriati (ad esempio,
H1, H2, P). Utilizzare un markup strutturale, piuttosto che
un markup di formattazione, consente un più facile
adattamento del contenuto, quando questo deve essere
suddiviso in più pagine, e un accesso più facile alle sezioni
cui l'utente è interessato.

33. 4.4 Tabelle
Le tabelle non funzionano bene con schermi dalle
dimensioni limitate e potrebbero causare scrolling
orizzontale in lettura:
• non usare le tabelle, a meno che non si è sicuri
che siano supportate dal dispositivo
• non usare le tabelle annidate e/o per
l’impaginazione
• utilizzare, dove possibile, delle alternative alla
presentazione tabellare

34. 4.5 Elementi non testuali -1-
• fornire del testo equivalente, per ogni
elemento non testuale: scaricare un immagine
da un device mobile può essere un'operazione
costosa in termini di tempo e denaro. Il testo
alternativo che viene visualizzato al posto o
prima che l'immagine arrivi può aiutare l'utente a
decidere se vale la pena di visualizzare
l'immagine oppure no

35. 4.5 Elementi non testuali -2-
• non fare affidamento a oggetti incorporati o script: gli
oggetti incorporati (tag <embed>, <object>, ...) e gli
script che si inseriscono all'interno del codice spesso
non sono supportati dai device mobili e né tanto meno è
possibile installare i plug-in per la loro fruizione. In
aggiunta, anche se i dispositivi supportano gli script,
questi causano un aumento nel consumo di energia e di
conseguenza scaricano più velocemente le batterie. Per
questo sarebbe bene evitarli (e in ogni caso se si usa del
codice Javascript sarebbe meglio usare il trigger onclick
piuttosto che onmouse e onkey, in quanto i meccanismi
di input possono essere molteplici)

36. 4.6 Immagini
Specificare la dimensione delle immagini
all'interno del codice di markup (ad esempio
negli attributi height e width), se esse hanno delle
dimensioni specifiche. In questo modo il browser
è in grado di calcolare in anticipo quanto spazio
esse occuperanno. Inoltre ridimensionare le
immagini lato server, se queste hanno delle
dimensioni specifiche, così il client non deve
processare il ridimensionamento dell'immagine
che rallenterebbe lo scaricamento della pagina.

37. 4.7 Codice
Creare dei documenti con del codice
convalidato secondo le grammatiche formali
presenti su web. Se la pagina contiene del
markup non valido il suo aspetto potrebbe essere
non prevedibile e incompleto. Ovviamente ci si
auspica che si faccia uso di un mark up pulito ed
efficiente, che comporta evitare linee e spazi vuoti
(come quelli causati dall'indentazione) e l'utilizzo
delle specifiche di stile inline (preferire le classi).

38. 4.8 Fogli di stile (CSS) -1-
• usare i fogli di stile per il layout e la
presentazione, a meno che si sappia che il
dispositivo non li supporta
• organizzare il documento in maniera tale che
possa essere letto anche senza fogli di stile (ad
es., alcuni non supportano il tag <style>, altri
supportano solo un foglio di stile per pagina, altri
ancora non hanno meccanismi di caching per i fogli
esterni, ecc.). Inoltre utilizzare sempre
l'attributo media specificando sia il
valore handheld che all (non tutti i browser
interpretano correttamente handheld)

39. 4.8 Fogli di stile (CSS) -2-
• fare si che le dimensioni dei fogli di stile siano
piccole
• Inoltre sarebbe meglio non usare come unità di
misura i pixel, o altre unità assolute sia nel
codice di mark up che nei fogli di stile. Le unità
relative consentono al browser di adattare la pagina
ed i suoi elementi allo schermo del device
richiedente. Un'eccezione a questa regola riguarda
le immagini create con una dimensione specifica,
apposita per il dispositivo richiedente, per le quali si
devono usare i pixel nello specificare l'altezza e la
larghezza.

40. 4.9 Tipi di Contenuto -1-
Il contenuto da inviare deve essere supportato
dal device client e, comunque, quando possibile,
è bene inviare il contenuto nel formato
preferito. Per determinare quali tipi di contenuto
un device supporta si può utilizzare una
combinazione di informazioni sul profilo del device,
come quelle contenute negli header http, e nei
profili UAProf.

41. 4.9 Tipi di Contenuto -2-
L'analisi degli header http risulta utile anche per
la codifica dei caratteri (intestazioni su Accept-
Charset), come specificano le successive
raccomandazioni:
• assicurarsi che la codifica del carattere sia
supportata dal device client
• indicare nella risposta il tipo di codifica
utilizzata

42. 4.10 Usabilità
I principi di usabilità per il desktop web
raccomandano di fornire dei messaggi di errore
informativi ed una via di uscita per tornare
indietro verso l'informazione utile, come ad
esempio "torna alla pagina precedente", "torna alla
home", ecc…

43. 4.11 Note Tecniche
• non affidarsi ai cookie. Vi sono dispositivi mobili in
commercio – magari anche relativamente obsoleti – che non
supportano i cookie, oppure offrono un supporto solo parziale.
Quindi è bene non affidarsi solo ai cookie per identificare
l'utente e per salvare le sue preferenze, per la gestione delle
sessioni, ecc… indicare nella risposta il tipo di codifica
utilizzata e nei valori dei meta tag correlati (ad es., CACHE-
CONTROL ed EXPIRE). E' importante che l'utilizzo della
cache sia concesso, cosicché il client non debba ricaricare
tutte le volte quei file che sono gia stati scaricati e che
vengono riutilizzati tra una pagina e l'altra
• Non affidarsi allo stile dei font perchè non tutti i dispositivi
mobili offrono supporto completo ai font, taluni sono in grado
di interpretare solo pochi font e limitati effetti (solo grassetto,
corsivo,..)

44. 5. Input degli Utenti -1-
Come ci si può aspettare, in ambiente mobile si
deve cercare di limitare al minimo l'attività di
inserimento testuale da parte dell'utente:
spesso manca infatti un dispositivo di
puntamento e l'utilizzo della tastiera non è
un'attività del tutto agevole.
• fare si che l'utilizzo della tastiera sia ridotto
al minimo
• evitare, se possibile, l'immissione di testo
libero

45. 5. Input degli Utenti -2-
• se l'utente deve inserire del testo, fornire, se
possibile, del testo predefinito da
selezionare (usare ad esempio liste di
selezione, pulsanti radio, utilizzare i
precedenti inserimenti come default, rendere
possibile la selezione degli elementi della
lista attraverso i tasti numerici o i pulsanti di
direzione, etc.)
• specificare una modalità di inserimento
predefinita (sul linguaggio o sul formato di
inserimento), se il device la supporta.

46. 5. Input degli Utenti -3-
• creare un ordine logico di tabulazione attraverso i link,
i pulsanti di controllo, gli oggetti presenti nella pagina.
L'utente potrebbe non avere a disposizione un
dispositivo di puntamento e muoversi nella pagina
esclusivamente con i tasti direzionali. Quindi il passaggio
tra i sopra-citati elementi deve avvenire seguendo un
ordine logico (l'ordine di tabulazione si può forzare in
HTML con l'utilizzo dell'attributo tabindex del tag <a>)
• etichettare i controlli dei form in maniera appropriata
• associare esplicitamente le etichette ai controlli

47. 5. Input degli Utenti -4 -
• posizionare le etichette dei controlli in maniera tale
che si dispongano correttamente in relazione al
controllo di riferimento. Questa linea guida, come la
precedente, si riferisce al fatto di utilizzare correttamente
il tag <label> in corrispondenza degli elementi del form a
cui si riferisce.
Ad esempio, dovendo riferire un elemento <label> ad un campo di
testo per l'inserimento del nome si farebbe:
<label for="nome">nome</label>
<input type="text" name="nome" />