Quando il design viene visualizzato su un dispositivo mobile, devi assicurarti che gli elementi interattivi come pulsanti o link siano sufficientemente grandi, e che abbiano abbastanza spazio intorno, per essere facilmente selezionabili senza sovrapporsi per errore ad altri elementi. È un vantaggio per tutti gli utenti, ma è particolarmente utile per chiunque abbia una disabilità motoria.
Le dimensioni minime consigliate per i target di tocco sono circa 48 pixel indipendenti dal dispositivo su un sito con un'area visibile mobile impostata correttamente. Ad esempio, anche se un'icona può avere solo una larghezza e un'altezza di 24 px, puoi utilizzare una spaziatura interna aggiuntiva per aumentare fino a 48 px le dimensioni dell'elemento toccabile. L'area di 48 x 48 pixel corrisponde a circa 9 mm, che sono più o meno le dimensioni del polpastrello di una persona.
Nella demo ho aggiunto spaziatura a tutti i link per assicurarmi che soddisfino le dimensioni minime.
Inoltre, i target di tocco devono essere distanziati di circa 8 pixel, sia orizzontalmente che verticalmente, in modo che il dito di un utente che preme su un target di tocco non tocchi inavvertitamente un altro target di tocco.
Testare i touch target
Se il target è il testo e hai utilizzato valori relativi come em o rem per impostare le dimensioni del testo e gli eventuali spaziatura,
puoi utilizzare DevTools per verificare che il valore calcolato dell'area sia sufficientemente grande.
Nell'esempio riportato di seguito, utilizzo em per il testo e l'interno.
Controlla il a del link e, in Chrome DevTools, passa al riquadro Computato, dove puoi controllare le varie parti della casella e vedere a quali dimensioni in pixel corrispondono.
In Firefox DevTools è presente un riquadro Layout.
In questo riquadro vengono visualizzate le dimensioni effettive dell'elemento ispezionato.
Utilizzo di query supporti per rilevare l'uso del touchscreen
Anziché verificare semplicemente le dimensioni del viewport e poi supporre che le dimensioni ridotte siano probabilmente di smartphone o tablet, che a loro volta utilizzano un touchscreen, ora esistono metodi più efficaci per adattare il design in base alle effettive funzionalità del dispositivo.
Una delle funzionalità multimediali che ora possiamo verificare con le query multimediali è se l'input principale dell'utente è un touchscreen (pointer) e se qualsiasi degli input attualmente rilevati è un touchscreen (any-pointer).
Le funzionalità pointer e any-pointer restituiranno fine o coarse.
Un cursore preciso indica che un utente sta utilizzando un mouse o un trackpad, anche se il mouse è connesso tramite Bluetooth a uno smartphone.
Un cursore coarse indica un touchscreen, che può essere un dispositivo mobile, ma anche lo schermo di un laptop o di un tablet di grandi dimensioni.
Se stai modificando il CSS all'interno di una query sui media per aumentare il target di tocco, la verifica di un cursore approssimativo ti consente di aumentare i target di tocco per tutti gli utenti con touchscreen. In questo modo, l'area di tocco è più grande, indipendentemente dal fatto che il dispositivo sia uno smartphone o un dispositivo più grande.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Puoi scoprire di più sulle funzionalità dei contenuti multimediali interattivi, come il cursore, nell'articolo Nozioni di base sul responsive web design.