Il passaggio del nostro lavoro in HTML5 dall'ambiente web al mobile deve necessariamente partire da alcune considerazioni sul nuovo contesto, analizzandone caratteristiche e limitazioni:
- il panorama hardware dei dispositivi mobili è particolarmente variegato. Il fatto che esistano smartphone con processori quad-core e 2 GB di RAM non deve tranquillizzarci. A fronte di questi, infatti, troviamo modelli a prezzi molto bassi con caratteristiche tecniche orgogliosamente pubblicizzate dai produttori ma non sempre altrettanto efficaci. Le nostre applicazioni devono poter funzionare sul più ampio spettro possibile di dispositivi: dagli schermi più grandi ai più piccoli, dalle architetture più performanti a quelle meno;
- i display sono molto spesso una limitazione importante. Il dispositivo mobile raggiunge livelli di ultra-portabilità pertanto le sue dimensioni non possono essere eccessive. Gli schermi di tali dispositivi potranno anche avere ottime risoluzioni ma nonostante ciò restano piuttosto piccoli. Ciò porta alla necessaria selezione degli elementi essenziali che abbia più senso far apparire in un'interfaccia. Il buon designer deve anche saper orientare il cliente nella scelta degli elementi più idonei da includere;
- altro aspetto fondamentale è il consumo energetico. Multimedialità, GPS, luminosità dello schermo, sensori sono funzionalità meravigliose ma che riducono velocemente la durata della batteria. Le nostre applicazioni possono contribuire alla salvaguardia delle risorse energetiche tramite un'implementazione accurata che sfrutti le API più efficienti.
L'utente mobile
Tutto ciò riguarda il dispositivo mobile ma non va ignorato anche l'utente mobile. Il medesimo sito, la medesima applicazione fruita su un PC o su un dispositivo mobile vede l'utente avere atteggiamenti diversi. L'utente mobile usa le sue app mentre scende dall'autobus, cammina, fa jogging o in altre circostanze precarie e tale condizione lo rende spesso frettoloso, meno comodo e più distratto. Eppure, nonostante ciò, pretende il maggior numero possibile di funzionalità e di informazioni nel minor tempo possibile. Tali considerazioni implicano che nella progettazione delle app mobile vada cercata una maggiore semplicità, intuitività ed essenzialità soprattutto nell'interazione con l'utente, nella disposizione dei comandi e delle voci di menu senza trascurare aspetti come la leggibilità fornita da colori, font ed effetti grafici. Non per niente, nel caso in cui si debbano realizzare interfacce da sfruttare sia su desktop che su dispositivi mobili, si consiglia di pensare prima alla progettazione di questi ultimi, ottenendo così un'essenzialità che potrà essere una buona base per versioni più estese.
L'anima mobile di HTML5
Chi ha studiato HTML5 non fermandosi agli aspetti visuali sa che questo linguaggio include un inseme di funzionalità, di API, che permettono di valorizzare le nostre interfacce. Alcune di queste evidenziano come HTML5 sia già per sua natura orientato al mobile, presentando elementi che possono essere valorizzati maggiormente su dispositivi mobili.
Pensiamo per prima cosa alle API per la geolocalizzazione, che con la scrittura di poco codice, forniscono la posizione del dispositivo in coordinate terrestri, latitudine e longitudine. La stessa funzionalità su uno smartphone o un tablet fornisce la posizione dell'utente stesso, la cui mobilità è però molto maggiore di un utente che fa uso di un computer fisso.
Anche le API per gestire gli eventi touch hanno un significato diverso. Mentre i meccanismi di input nei PC consistono per lo più nella tastiera e nel mouse, nei dispositivi mobili quasi tutto passa per il touch screen, e avere funzionalità comode per gestire questo strumento consente un'interazione più ricca e senza limitazioni per l'utente. Le gestualità da attuare su un display, nel mondo mobile, costituiscono un vero e proprio linguaggio fondamentale nella user experience, a partire da eventi più immediati come il "click" su un elemento fino a combinazioni multitouch come il pinch-to-zoom, per ridimensionare le immagini.
Richiamando quanto già detto sulle dimensioni varie dei display, una tecnica fondamentale è stata fornita non da HTML5 ma da CSS3: le media queries. Esse permettono di definire regole stilistiche in base alla tipologia del mezzo di visualizzazione, delle sue dimensioni nonchè della sua attuale disposizione (portrait o landscape). Ciò influisce non solo sull'aspetto esteriore degli elementi ma anche sul loro posizionamento e quindi sulla struttura stessa dell'interfaccia.
Un altro esempio interessante riguarda ulteriori API che vengono fornite in HTML5 per controllare lo stato della batteria: le Battery API. Considerata l'importanza rivestita dalle risorse energetiche, l'esistenza stessa di questa libreria nel linguaggio dimostra come il suo impiego sia particolarmente mirato al panorama mobile.
Nel corso della guida si farà uso di strumenti come questi, a volte usati direttamente, altre volte tramite framework, e le loro radici andranno sempre ricercate nell'approccio al mobile fornito da HTML5 e CSS3.