Black Friday 20% de desconto
Tá acabando

0

dias

00

hrs

00

min

00

seg

Artigos > Front-end

Touch-first

Sérgio Lopes
Sérgio Lopes

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.

Leia também:

Artigos de Tecnologia e Negócios > Front-end
Tá acabando

0

dias

00

hrs

00

min

00

seg

  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

  • Desconto 20%

Premium

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75 R$60
à vista R$900 R$720
Matricule-se

Premium Plus

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100 R$80
à vista R$1.200 R$960
Matricule-se

Max

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120 R$96
à vista R$1.440 R$1.152
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas