Touch-first

Touch-first
Sérgio Lopes
Sérgio Lopes

Compartilhe

Nesse mundo de Mobile, Web e Resposivo, temos muito termos chiques para ditar como fazer nossos sites. Mobile-first é um famoso - pense primeiro no mobile, depois no desktop. Há quem fale agora de Touch-first - pense em touch screens primeiro. Tirando a buzzword em si, há muita coisa interessante nesse conceito.

A ideia de Touch-first é priorizamos o código para a interatividade de touchscreen. Hoje em dia não apenas os smartphones e os tablets possuem tal recurso. O touchscreen vem ganhando espaço entre os desktops.

Como o touchscreen traz algumas dificuldades. Pensemos, desde o início da escrita do código, na possibilidade de implementá-lo com as ferramentas necessárias para o funcionamento do recurso.

Banner promocional da Alura, com um design futurista em tons de azul, apresentando dois blocos de texto, no qual o bloco esquerdo tem os dizeres:

Uma questão importante é a otimização da área de toque: devemos estar antentos para o tamanho e a disposição dos botões, eles devem ser grandes e espaçados o suficiente para que o dedo consiga tocar. Temos o mesmo tipo de problema com os links: um tamanho recomendado, pela Apple, é 6,8mm. Pela Mozilla, 5,9 a 9mm, e assim por diante. Perceba que é muito mais plausível apresentar esses números em milímetros, uma vez que os links têm interação com o mundo externo, não com um ponteiro de mouse.

Desses dados sobre o tamanho dos links, se destaca a documentação da Microsoft - que recomenda 9mm -, a qual é baseada em um estudo prático sobre a largura média do dedo dos usuários:

Os desenvolvedores da Microsoft perceberam que o ideal de tamanho é de 9mm para mais, pois com essa medida a taxa de erro é de 0,5%:

Já em relação ao espaçamento entre os botões, a Microsoft indica que o mínimo seja de 2mm.

Porém, na prática, quantos pixeis equivalem aos 9mm? Fazendo a conversão e deixando de lado algum erro, os botões devem ter, em média, 50px.


Quer mais boas práticas de sites responsivos? Aprender Design Responsivo do zero? Conheça o Curso Online de Web Design Responsivo do Alura.

Sérgio Lopes
Sérgio Lopes

Sérgio é diretor e líder do time de diversos times no Grupo Caelum, formado em Ciência da Computação pela USP. É reconhecido por sua atuação em Front-end, Performance, Mobile e Arquitetura de software e tem vasta experiência com ensino, tanto presencial quanto online. Gerencia os projetos internos da empresa e atua na definição de rumos dos produtos e da empresa em geral.

Veja outros artigos sobre Front-end