Touch-first
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.