Sebbene l'argomento specifico di questo articolo non sia esclusivamente legato a HTML5, il mobile web è ormai un fenomeno talmente diffuso e impregnato di HTML5 da farci ritenere che parlarne possa essere di interesse per i nostri lettori. Se così non fosse… scusateci! :)

Cominciamo con un'esplorazione degli aspetti che rendono il mobile web un realtà sostanzialmente diversa dal web "tradizionale" e che ci obbligano dunque a pensare, pianificare e agire in maniera nuova – proseguiremo presto con una serie di ulteriori approfondimenti per tutti i developer interessati al mobile Internet e al suo intreccio con HTML5 e le nuove tecnologie web. Per leggere tutti gli altri articoli sul mobile web, seguite la nostra sezione "mobile"!

Un nuovo device

La prima grossa differenza sta nella modalità di fruizione di pagine, siti e web apps. Se fino ad ora sapevamo più o meno che il nostro utente aveva un computer con una tastiera, un mouse e un monitor più o meno grande e dunque dovevamo preoccuparci al massimo dei diverso browser usato, nel mobile web non abbiamo la più pallida idea (o una molto molto pallida) dello strumento che l'utente userà per navigare le nostre pagine. Un iPhone? Può darsi, ma potrebbe essere un BlackBerry con la tastiera o un LG con uno schermo touch o, perché no, un vecchio Nokia 5000. I vari elementi da considerare sono dunque:

  • schermo: sia in dimensioni ma anche in risoluzione e qualità (si passa dal retina display dell'iPhone a schermi "VGA" a 65mila colori
  • modalità di input: cosa ben diversa, per chi realizza siti web mobili, è creare bottoni per device touch (quindi considerando il "dito" come elemento di input) dagli altri (dove avere bottoni grossi serve a poco, ad esempio, visto che la navigazione si fa scorrendo dei link con le frecce o un "joystick" e dunque avere elementi di navigazione grandi toglie solo spazio prezioso sullo schermo)
  • potenza di calcolo: questo è un elemento piuttosto complicato dal momento che non solo abbiamo a che fare con device di generazioni diverse ma anche, all'interno della stessa "famiglia" (penso soprattutto ai telefonini Android) a smartphones con caratteristiche tecniche molto variabili. Sebbene tutti i device, dunque, abbiano un browser WebKit che supporta la ultime novità di HTML5, quindi, non tutti hanno il processore e la potenza grafica di eseguirle in maniera fluida e soddisfacente per l'utente

Un nuovo contesto

Dopo aver capito quanto e come lo strumento con cui si accede al mobile web è diverso da quello che si usa per il web tradizionale spostiamoci ad analizzare in che modo il nuovo contesto in cui si trova l'utente mobile influenza il suo comportamento, le sue esigenze e i suoi bisogni.

Mentre il navigatore desktop si trova di solito seduto ad una scrivania (nomen omen) o comunque in un contesto relativamente tranquillo, il mobile web user si potrebbe probabilmente trovare in una situazione molto più ricca di distrazioni: in metro con il vicino che gli sposta il gomito ogni 5 minuti, in coda alla Posta con un occhio al numeretto o fermo al semaforo (fermo eh!) con un occhio al verde che scatta e un altro al vigile che gli fa la multa (il *power* mobile web user ha tre occhi)

Tutto questo, per noi developer, si traduce nell'esigenza di rendere il più veloce e diretta la fruizione delle informazioni principali del nostro sito: non è il caso di perdersi in fronzoli e abbellimenti meramente estetici ma il design deve essere finalizzato a rendere piacevole sì ma soprattutto efficace la navigazione, portando l'utente a quello che vuole (o comunque a quello che noi pensiamo voglia) in pochi, pochissimi click

Tornando poi al discorso relativo alla velocità e qualità di connessione, anche questo aspetto ci deve spingere ad essere essenziali, invitandoci a trovare un compromesso che non penalizzi troppo l'estetica ma che punti a convogliare subito le informazioni principali, senza fronzoli che nella migliore delle ipotesi fanno perdere tempo e nella peggiore si pagano a caro prezzo (per tutti gli utenti che pagano a Kb scaricato)

Un nuovo utente

Per completare questa nostra prima esplorazione nel mondo del mobile web non possiamo tralasciare di analizzare come l'utente stesso sia fondamentalmente diverso a seconda della sua posizione, seduto alla scrivania davanti al suo MacBook Pro o in giro per l'Italia con il suo iPhone.

Oltre al contesto che abbiamo visto prima, infatti, sono spesso molto diverse le esigenze e le motivazioni che ci spingono a navigare sul web in queste due diverse situazioni. Se da un lato dal desktop io navigo per piacere, per leggere senza fretta o per cercare con calma informazioni e mi aspetto un'esperienza di navigazione ricca e avvolgente, quando sono in giro e tiro fuori il mio telefonino per navigare lo faccio spesso per cercare in maniera rapida delle informazioni precise e circostanziate: "com'è questo locale dove stiamo andando?" "Che bel cartellone pubblicitario, vediamo se hanno qualcosa in saldo…" "Come si mettono 'ste benedette catene da neve?"

Non mi intessa dunque l'ultima animazione jQuery, gli articoli correlati o un grosso banner pubblicitario: io voglio sapere subito e in maniera chiara (sia come contenuti che come modalità di fruizione, se devo prendere la lente d'ingrandimento per leggere lascio perdere) esattamente quello che ti ho chiesto. E se il tuo sito, mentre sono qui impantanato nella neve con 'ste catene in mano, mi risolve questo problema, beh, è altamente probabile che te ne sarò molto molto grato.

Un nuovo mondo

Eh sì, il mobile web è proprio un nuovo mondo. Il nostro obiettivo con questi appuntamenti di "Mobile web today" è di condurvi all'esplorazione delle sue bellezze e delle sue difficoltà. Il risultato? Beh, nel mondo ci sono circa 5 miliardi di telefonini… 😉

  • input: si tratta di un device touch? Allora dovremo disegnare i nostri bottoni sufficientemente grandi da essere "cliccati" con un dito. C'è un piccolo joystick per navigare fra i link della pagina? Mettiamo in principali elementi di navigazione in alto per evitare di cliccare venti volte solo per arrivare al link che ci interessa… E così via.
  • output: qui ci riferiamo in particolare allo schermo del telefonino, sia in termini di dimensioni che di prestazioni (quantità di colori e qualità delle immagini). In questo ambito abbiamo delle differenze davvero colossali tra i vari device, passando dai 3 pollici e mezzo con Retina display dell'iPhone (o i 4 e passa pollici del Galaxy S2) ai 2 pollici o poco più dei Nokia 5000 o Motorola RAZR in modalità pressoché paragonabile alla buona vecchia VGA di una volta
  • browser: per non farci mancare proprio nulla chiaramente i vari telefoni hanno una quantità enorme di browser diversi e con diverse caratteristiche, sia per quanto riguarda i browser di default che per quelli installabili. Passiamo allora dai Safari o Chrome (quindi basati su WebKit e dunque di ultima generazione) dei device Android e iPhone a vecchi browser pieni di bug come quelli dei BlackBerry meno recenti (eppure ancora molto diffusi, soprattutto nel mondo corporate). Senza contare poi che gli utenti potrebbero installare un browser diverso da quello "di sistema" come ad esempio Opera Mobile su iPhone, ottimo prodotto ma dalle caratteristiche e dal sistema di rendering sostanzialmente diverso rispetto a Chrome e Safari.
  • performance: oltre alle caratteristiche del browser conta molto anche il "cuore" e la capacità del telefono di supportare ed eseguire certe richieste. Tutti i device Android, ad esempio, con Chrome supportano JavaScript e anche un bel po' di CSS3 e HTML5. Provate però ad eseguire qualche animazione bella pesante su un piccolo HTC e vedrete il telefonino iniziare a sudare per poi gettare la spugna poco dopo. Quindi non conta solo che cosa sa fare il browser ma anche come e quanto bene glielo fa fare il telefono
  • connessione: se, infine, per i nostri utenti desktop possiamo quasi sempre partire dal presupposto che la loro velocità di connessione è una decente ADSL, i telefonini accedono al web in situazioni, velocità e affidabilità del collegamento molto diversi. Si passa infatti dal Wi-Fi del salotto di casa al 3G ballerino della strada in centro città a connessioni molto più aleatorie in campagna, in treno, in metropolitana o ovunque il nostro utente decide da usare il suo telefono per accedere al nostro sito (sennò che mobile web sarebbe?)
The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis