Mobile  »  Guide  »  Guida siti per dispositivi mobili 

Davanti ad una pagina web che si intende adattare ad una visualizzazione su dispositivo mobile è prioritario effettuare una serie di valutazioni mirate a raccogliere alcuni appunti che serviranno successivamente a guidare l'azione di sviluppo.

Un primo gruppo di valutazioni concerne la dimensione formale della pagina web. Non ci si concentrerà pertanto sui contenuti o sulla grafica, bensì sulla robustezza, sull'accessibilità e sull'efficienza del codice. Si tratta di un'attività che, del resto, permette di ottimizzare un sito al di là del tentativo di renderlo consultabile da un telefono cellulare.

Simili verifiche possono essere applicate anche in assenza di un dispositivo mobile. È sufficiente un browser web e sfruttare alcune risorse liberamente disponibili in rete. Per gli utilizzatori di Internet Explorer consigliamo l'installazione della Web Accessibility Toolbar (la cui versione italiana disponibile presso http://www.webaccessibile.org/argomenti/argomento.asp?cat=474), uno strumento che consente di applicare i controlli di seguito consigliati in modo piuttosto rapido. Analoghi accessori sono disponibili anche per gli altri principali programmi di navigazione: per Firefox è possibile utilizzare la Web Developer Toolbar (http://chrispederick.com/work/webdeveloper/), così come gli utilizzatori di Opera possono avvalersi dell'estensione W3-Dev Menu (http://tobyinkster.co.uk/opera#w3dev).

I controlli che si consiglia di applicare, direttamente applicabili mediante gli strumenti citati, riguardano:

• Correttezza formale dell'HTML: significa comprendere in che versione del linguaggio di marcatura è stata composta la pagina (HTML 4, XHTML transitional, XHTML strict ecc.) e rilevare la presenza di errori di conformità (per esempio tag non chiusi, assenza di attributi obbligatori, comandi non standard o deprecati);
• Correttezza formale del CSS: se la pagina utilizza la tecnologia dei fogli di stile per gestire la presentazione dell'informazione è importante assicurarsi che i comandi utilizzati siano stati usati correttamente e in modo coerente agli standard;
• Presenza di testi alternativi adeguati: in caso di immagini verificare che l'attributo ALT sia stato utilizzato e che i valori che esso assume nelle diverse immagini siano in grado di sostituire efficacemente l'elemento grafico.
• Gestori di eventi indipendenti dalla modalità di interazione: se la pagina utilizza script attivati dalle azioni degli utenti, rilevare da quali eventi essi siano attivati e se questi siano legati ad un particolare dispositivo di input (solitamente il mouse);
• Ordine di tabulazione coerente e lineare: provando a navigare la pagina con il solo tasto TAB, si controlli che i link e gli altri elementi attivi (per esempio i campi dei form) siano raggiungibili secondo una sequenza naturale; si verifichi altresì che tali elementi siano comprensibili anche se presi isolatamente: le parole rese link dovrebbero essere auto-esplicative in merito alla destinazione (assolutamente da evitare i “clicca qui” e simili), così come ciascun campo di un form dovrebbe possedere un'etichetta testuale capace di indicare chiaramente l'input richiesto all'utente; si tratta di osservazioni fortemente legate alle conseguenze della linearizzazione della pagina (vedi lezione successiva).
• Peso e velocità di scaricamento della pagina: abbiamo considerato più volte, nel corso della guida, come attualmente sul mobile web sia cruciale offrire pagine leggere per andare incontro alle velocità di scaricamento ancora ridotte e per limitare i costi di connessione (la dimensione massima complessiva, come s'è visto, non dovrebbe superare i 20KB).

Nel nostro caso di studio (in data 29 ottobre 2005) abbiamo ottenuto i seguenti risultati:

• La home page presenta 15 errori di validità HTML (versione 4.01); si tratta soprattutto di problemi connessi alla gestione delle stringhe delle URL;
• Il foglio di stile CSS associato è valido ma sono segnalati un gran numero di avvisi circa l'assenza della definizione di un colore di sfondo parallelamente all'indicazione di un colore di primo piano (ad esempio per il testo);
• L'uso dei testi alternativi alle immagini è esaustivo e corretto;
• Non sono presenti gestori di eventi dipendenti dalla presenza del mouse;
• L'ordine di tabulazione è buono ma non è stato indicato alcun attributo <code>tabindex</code> (si lascia quindi che sia il browser a gestire tale sequenza);
• La home page arriva a pesare circa 208 KByte, dei quali oltre 140 di sole immagini. Ad una velocità di 14.4 Kbyte impiegherebbe 118 secondi (ossia due minuti) per essere visualizzata completamente dal dispositivo.

Altri articoli

Altre guide

Altre newsletter