Con l'avvento di IE10 grazie a Windows 8 Consumer Preview, si spalanca la porta alla navigazione tramite touchscreen in modo ancora più fluido, semplice e immediato. Tuttavia sono pochi i siti pronti a questa rivoluzione, quindi come potresti adattare il tuo spazio online per spremere al meglio questa funzionalità? E' possibile sfruttare qualche semplice consiglio e seguire configurazioni pratiche per rendere il tuo sito pronto all'esperienza touchscreen, anzi, multitouch.
Il primo consiglio è di natura prettamente pratica. Dato che gli schermi sono touchscreen e si usano con il dito invece che col mouse non si deve dimenticare che il cursore di quest'ultimo può semplicemente puntare su un elemento aprendo ad esempio un contenuto senza necessariamente cliccare per attivarlo. Ma con la navigazione a portata di dito, non sarà possibile considerare questa doppia funzionalità, visto che esisterà solo la possibilità di cliccare con un tap del polpastrello. C'è da specificare che per quanto riguarda la gestione dell’input mouse/touch è stato necessario aggiungere il vendor-prefix “-ms-” poiché lo standard W3C non implementa ancora delle API che gestiscano adeguatamente mouse, dito e stylus. Microsoft sta collaborando con il W3C affinché venga introdotto un modello simile. Come agire, dunque, se il tuo sito necessita di funzionalità speciali che non possono essere limitate solo al tap?
E' possibile configurare il comportamento del browser a seconda delle esigenze del tuo sito. Quando un utente tocca un elmento, la proprietà CSS -ms-touch-action determina il comportamento che IE10 deve seguire.
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
Cambiando il valore, è possibile ottenere diversi comportamenti secondo la tabella qui sottto:
|
Valore |
Descrizione |
auto |
Il browser determina il comportamento. E' il valore di default per -ms-touch-action. |
none |
Nessun comportamento default è permesso |
manipulation |
Solamente panning, pinch zoom e swiping per navigare indietro o avanti è permesso. |
double-tap-zoom |
E' permesso solo il doppio tap per zoomare. |
inherit |
L'elemento eredita il valore di -ms-touch-action dal parent. |
Ad esempio un'applicazione per dipingere su una tela virtuale potrebbe usare la stringa qui sotto, in tal modo, è possibile compiere un doppio tocco per zoomare nell'elemento, così che scorrendo il dito sulla tela si può disegnare invece che muoversi all'interno della pagina.
canvas {
-ms-touch-action: double-tap-zoom;
}
Per la navigazione via touchscreen, si dovrà pensare anche a come permettere l'input di un testo. E' possibile così sfruttare diversi layout di tastiera virtuale che sono già pronti a seconda della natura del testo che dovrà essere immesso.si può ottenere una tastiera con chiocciola @ e .com già pronti nel caso in cui si dovesse compilare un form online in cui si deve inserire il proprio indirizzo email.
<input type="email">

La tastiera touch è già predisposta per comporre numeri di telefono, grazie al tastierino numerico immettendo il valore

Si possono inserire facilmente indirizzi Internet grazie alla presenza dello slash e del ".com" con il valore:

Ultimo, ma non per importanza, il discorso relativo a quanto spazio dedicare all'area di pressione del dito. Ovviamente, non tutte le dita sono uguale, tuttavia se il diametro di quella di un bambino è di 8mm circa e quella di un giocatore di Basket da 19mm, la media calcolata è di circa 11mm. Corrisponde a un quadrato di 40 pixel di lato. E necessita di almeno 2mm ossia 10 pixel su ogni lato come separazione da qualsiasi altro elemento. Ricordatelo quando stai sviluppando il tuo sito touch-friendly, così che gli utenti potranno navigare con le dita senza cliccare più elementi insieme oppure bloccandosi davanti a pulsanti virtuali non-cliccabili. E se volessi sfruttare questa funzionalità solo nel caso in cui il visitatore abbia effettivamente uno schermo touchscreen? E' possibile rilevare l'hardware con il comando che attiva questa funzionalità
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
}
Per ulteriori informazioni e guide, ti rimandiamo agli spazi ufficiali creati da Microsoft a supporto:
IE10 è il browser migliore per la navigazione su dispositivi touchscreen, partecipa anche tu a questa rivoluzione.