Linee guida per lo sviluppo di siti Touch-Friendly

Nei precedenti articoli abbiamo visto alcune tecniche per gestire l’uso dei dispositivi multitouch su un sito, usando le opportune API JavaScript messe a disposizione da Internet Explorer 10.
Adesso vedremo alcuni semplici consigli per impostare correttamente un sito in modo che sia perfettamente fruibile con dispositivi touch di ogni tipo.

Non nascondere il contenuto dietro un evento Hover

In una fase di transizione, se dobbiamo aggiornare un vecchio sito che fa uso di dropdown menu a scomparsa, possiamo usare la tecnica descritta qui: http://www.hwfiles.it/articoli/3741/come-simulare-l-evento-hover-su-dispositivi-touchscreen_0.html .In un nuovo design, progettato da zero, bisogna evitare i comportamenti “funzionali” legati all’evento onMouseOver. Comportamenti estetici, come il cambio di colore o una leggera dissolvenza, sono tuttavia ammessi e solitamente non richiedono JavaScript ma una semplice transizione CSS3 ( trovate i dettagli a questa pagina: http://www.w3schools.com/css3/css3_transitions.asp).

Lasciare attive le gesture di default

Le gesture più diffuse, come il pinch-to-zoom o il panning, sono entrate nell’uso quotidiano dell’utente. Anche se i browser consentono di disattivare queste gesture, è caldamente consigliato lasciarle sempre attive anche sui siti per dispositivi mobile con piccoli schermi. In caso di siti con interazione totalmente custom, come ad esempio giochi e simili, è possibile disattivare alcune gesture (http://www.hwfiles.it/articoli/3655/supporto-ai-dispositivi-touchscreen-in-internet-explorer-10_index.html) per gestire l’input a basso livello con le apposite API ( vedi: http://www.hwfiles.it/articoli/3740/pointer-events-su-ie10-alcuni-esempi-pratici_index.html ).

In alcuni casi, ad esempio quando si integrano pagine HTML / JavaScript all’interno di applicazioni native, è possibile disattivare alcune gesture per far sì che la pagina appaia perfettamente integrata con l’App. In tal caso è bene valutare se l’esperienza d’uso dell’App venga effettivamente migliorata da questa limitazione oppure, al contrario, venga inficiata dalla mancanza delle gesture di base.

Impostare l’Input Type corretto nei form HTML5

Come accennato in un precedente articolo, è bene sempre specificare il corretto Input Type nei form HTML5 per due semplici motivi: abilita le tastiere ottimizzate e facilita il compito di eventuali dispositivi di input alternativi, come il controllo vocale o sistemi specifici pensati per utenti portatori di disabilità motorie.