De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

Teste de compatibilidade com dispositivos móveis

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 09 de junho de 2015

É um fato, o uso de dispositivos móveis para navegar na web vem crescendo assustadoramente, e o acesso convencional, por meio de computadores desktop ou notebooks, vem caindo na mesma razão.

A Dicas-L é um site feito artesanalmente e, é claro, não estava preparado para dispositivos móveis. O que eu fiz, alguns meses atrás, foi direcionar o usuário de dispositivos móveis para uma página mais enxuta, contendo principalmente o texto, e eliminando imagens e outros elementos que não fossem essenciais para a compreensão da mensagem.

Mas mesmo assim, ao rodar o teste de compatibilidade oferecido pelo Google, eu não conseguia uma boa avaliação. O resultado dizia que a letra do texto era muito pequeno e os links eram muito próximos uns dos outros, dificultando a navegação.

Por incrível que pareça, tudo que precisei fazer para passar no teste foi acrescentar a seguinte linha no cabeçalho das páginas:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

A meta tag viewport orienta o navegador sobre como ajustar as dimensões e escala da página de acordo com a largura do dispositivo, ou seja, o texto é formatado levando em conta o dispositivo em que será exibido. Para saber mais sobre a diretiva viewports, consulte a documentação sobre design responsivo do portal Google Developers.

É claro que muita coisa ainda precisa ser feita para melhorar o visual da Dicas-L, que já está bem velhinho, mas já é um começo, não?

Referências

• Fórum de ajuda para Webmasters
• Google: Teste de compatibilidade com dispositivos móveis
• Design responsivo