No Windows 8 Consumer Preview, o IE10 permite experiências de multitoque rápidas e fluidas na Web. A maioria dos sites funciona bem com o toque no IE10 sem alterações no site. Esta postagem fornece quatro simples orientações para assegurar que os clientes usem o toque em seu site da maneira mais eficiente.
Escrevemos anteriormente sobre como dispositivos de entrada telas sensíveis ao toque torna as Web mais divertida, interativa e imersiva. Também falamos sobre a importância de garantir uma experiência de navegação no IE10 sem abrir mão de nada para que a verdadeira Web funcione muito bem com o toque.
Das quatro orientações abaixo, as duas primeiras garantem que os usuários do recurso de toque sejam capazes de acessar todas as funcionalidades do seu site. As últimas duas apresentarão dicas para você tornar o seu site mais fácil de usar com o toque.
Um mouse pode focalizar um conteúdo (apontar para ele) sem ativá-lo (clicá-lo). No entanto, com o recurso de toque, um toque focaliza e ativa em uma única ação. Portanto, a funcionalidade que requer focalização sem ativação não irá funcionar para os usuários de toque. Em vez disso, procure usar como base para todos os comportamentos o clique (toque).
Os usuários esperam ser capazes de fazer o movimento panorâmico e aplicar zoom nos sites usando o toque. Portanto, o navegador consome movimentos de toque, pinça e toques duplos por padrão e não envia eventos para essas interações. Se, em vez disso, o seu site precisar fornecer funcionalidades especiais para essas interações, você deve configurar o IE10 para fornecer somente o comportamento padrão que você deseja, caso necessário.
Quando um usuário toca em um elemento, a propriedade CSS -ms-touch-action determina o comportamento padrão que o IE10 fornece.
-ms-touch-action
-ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;
A tabela abaixo descreve os cinco valores possíveis.
auto
none
manipulation
double-tap-zoom
inherit
Por exemplo, um aplicativo de pintura pode usar:
canvas { -ms-touch-action: double-tap-zoom; }
canvas {
-ms-touch-action: double-tap-zoom;
}
Com essa configuração, o usuário pode realizar um toque duplo para ampliar os elementos da tela de pintura, mas deslizando um dedo enviará eventos para a tela de pintura, em vez de proporcionar um movimento panorâmico da tela.
O IE10 introduz o suporte para os controles de entrada de HTML5, todos sendo otimizados para toque. Para entradas de texto, você pode melhorar ainda mais as experiências de toque dos usuários identificando o tipo específico de entrada quando aplicável. O Internet Explorer mostrará um layout de teclado virtual personalizado para o tipo de entrada no Windows 8:
<input type="email">
O teclado virtual mostra os botões @ e “.com” para endereços de email.
<input type="tel">
O teclado virtual mostra um teclado numérico para números de telefone.
<input type="url">
O teclado virtual mostra a barra " /" e “.com” para URLs.
Para criar uma experiência do Windows 8 que priorize o toque, fizemos uma série de pesquisas par formular algumas orientações úteis para desenvolvedores. A largura média de um dedo é de 11 mm. À medida que os alvos para o toque aumentam, a porcentagem de toque errados cai rapidamente.
Idealmente, um alvo tem no mínimo 11mm (cerca de 40px) quadrados com ao menos 2mm (cerca de 10px) de área extra ao redor.
Se você quiser ajustar o espaço apenas para usuários com dispositivos de toque, use a detecção de recurso.
Para detectar que o usuário tem um dispositivo de toque:
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { // Supports multi-touch }
if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
// Supports multi-touch
É possível fazer muito mais para criar uma ótima experiência que priorize o toque. Por exemplo, você pode escolher otimizar para o toque ao customizar suporte para interações de multitoque ou gestos. Seguem alguns links para você começar:
Planejamos escrever mais sobre esses métodos em postagem futuras deste blog. Aplicar essas orientações hoje garantirá que os seus sites funcionem bem com o toque do IE10.
— Jacob Rossi, gerente de programas, Internet Explorer