Touch-first: como otimizar seu design responsivo para o mundo das touch screens

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.

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.


Próximo Artigoselect count(*), count(1) e count(nome): a batalha dos counts de SQL