Fala, pessoal. Tudo bom? Hoje nós vamos falar um pouco sobre responsividade.

O desenvolvimento de uma aplicação front-end é, normalmente, centrado em um único tipo de tela; mais especificamente, na própria tela do computador utilizado no desenvolvimento desta aplicação.

Por isso, a aplicação tem um visual muito bom em um determinado tamanho de tela, mas em outros dispositivos, a visualização da aplicação pode ficar comprometida. Além disso, a classificação do seu site por ser afetada negativamente em mecanismos de buscas.

Responsividade

Primeiramente, precisamos falar sobre como a responsividade é um assunto importante quando falamos de aplicações front–end.

Essa importância se dá porque um site responsivo consegue se adaptar a vários tamanhos de telas, e sua aplicação deve ser utilizada independente de tamanho da tela, sem apresentar problemas de interface, nem comprometer a experiência do usuário.

No entanto, criar uma aplicação responsiva pode ser complexo, porque existem várias configurações e características que devem ser manipuladas para se adaptar em diferentes tamanhos de telas.

A necessidade de testar diferentes tamanhos de tela pode fazer com que você altere o tamanho da janela manualmente várias vezes, o que não é muito produtivo. Por isso, neste artigo, vou lhe dar algumas dicas pra que você consiga deixar a sua aplicação responsiva com um pouco menos de esforço.

Como tornar a sua página mais responsiva

A responsividade de uma página está atrelada fortemente ao CSS utilizado na mesma. Portanto, estudar CSS é muito importante para entender como utilizar características que deixem a sua aplicação mais responsiva.

Já que como “estudar CSS” é algo muito genérico, vou listar algumas coisas que você pode fazer para deixar a sua aplicação mais responsiva. A partir dai, você pode estudar mais a fundo alguns conceitos correlatos:

  • Utilize media queries;
  • Use a propriedade auto para definir atributos como margens, padding, altura e largura de elementos;
  • Defina tamanhos mínimos e máximos para os elementos como min-heigth, min-width, max-height e max-width. Isso impede que os seus elementos fiquem grandes ou pequenos demais, conforme o tamanho da tela é alterado;
  • Use medidas relativas ao invés de medidas absolutas, pois medidas relativas como em,%,vh,wh e rem costumam se adaptar automaticamente ao tamanho da tela. No entanto, a utilização destas medidas não exclui o uso de media queries;
  • Flex-wrap – as configurações do Flexbox ajudam (e muito) quando o assunto é criar uma aplicação responsiva. Uma das mais propriedades importantes neste aspecto é a de flex-wrap, que faz com que os elementos da tela sejam “quebrados em múltiplas linhas”.
  • E lembre de considerar iniciar o desenvolvimento da sua aplicação com o dispositivo “mais difícil” primeiro. Por ser muito pequena quando comparada a telas normais de computadores, esta tela “mais difícil” é a tela de dispositivos móveis.

Ferramentas

Mesmo com as dicas do tópico anterior, sabemos que a responsividade ainda pode te dar muito trabalho. Isso acontece porque você precisará alterar várias vezes o tamanho da página para verificar as novas configurações de CSS.

Mas não se preocupe. Para resolver este problema, existem algumas ferramentas que permitem a visualização da sua aplicação em diferentes tamanhos de tela simultaneamente

Alguns exemplos de ferramentas são: o Responsively e o Sizzy. Ambos são “navegadores” onde você pode abrir qualquer página web e visualizá-la em diferentes dispositivos ao mesmo tempo, e estão disponíveis para vários sistemas operacionais.

E tem mais: existem, ainda, recursos online que podem lhe ajudar a melhorar a visualização da responsividade em vários dispositivos. Alguns exemplos desse tipo são o screenfly e responsinator. Estes recursos, porém, permitem apenas a visualização de projetos online, o que pode ser problemático para projetos em desenvolvimento.

Além dessas ferramentas que permitem a visualização em diferentes tipos de dispositivos, você pode utilizar ferramentas de auditoria como o Ligthouse, sobre o qual já escrevi um artigo aqui no blog.

Espero que esse artigo tenha ajudado você. Até a próxima e bons estudos!