HomeDesenvolvimentoSites responsivos

Sites responsivos

Desenvolvimento

Papa Neto | 20/set/2017


O que é um site responsivo?

Partindo do significado real da palavra “responsividade”, capacidade de dar resposta rápida e adequada à situação, ou seja, modifica-se de acordo com a situação. No caso de um site, responsividade significa que ele foi desenvolvido para sofrer alterações no layout/aparência, de acordo com o dispositivo que se usa para acessá-lo, seja um desktop, tablet, mobile, etc. O cálculo é feito de acordo com a largura da tela/view do dispositivo.
Por exemplo, quando estou desenvolvendo a responsividade para mobile, baseio-me na tela do Iphone 5, que conta com seus 320 pixels de largura. Sendo assim, procuro organizar a página para que o usuário veja apenas o que ele quer, sem rodeios proporcionando uma melhor experiência de navegabilidade.

responsividade

Diversas versões de um mesmo site, baseadas em sua responsividade.

Vantagens de um site responsivo

  • O uso do telefone celular se consolida como o principal meio para acessar a internet no Brasil“. Segundo uma pesquisa divulgada pelo IBGE, a quantidade de acessos à internet prevalece nos dispositivos móveis, ou seja, todos os sites atuais devem estar preparados para receber visitantes utilizadores de mobile.
  • Em 2015, o Google deixa de mostrar, nas buscas, sites sem compatibilidade com dispositivos móveis. Uma pena para os sites não responsivos, pois o Google é o principal provedor de busca.
  • Usuários tendem a sair de sites muitos confusos, com quebras no layout ou que precise aplicar zoom para se tornar legível. Quando isso acontece, o Google adiciona uns pontos na taxa de rejeição daquele site, prejudicando seu ranking nas pesquisas.
desktop vs mobile

Acessos por mobile superam quantidade de acessos por desktop.

Desvantagens de um site responsivo

  • Mais custo de processamento por parte do navegador, ocasionando lentidão na hora de carregar a página. Porém, existem diversas maneiras de contornar este contratempo.
  • Mais trabalho para o desenvolvedor, pois um site responsivo conta com uma maior complexabilidade na hora de desenvolver sua estrutura e estilo.
  • Maior custo devido a mão de obra mais elaborada e trabalhosa.

 

 

Como é feito?

Em geral, na hora de desenvolver um site responsivo, o programador deve utilizar larguras em porcentagem, tomando o cuidado em diagramar os elementos dentro da capacidade da tela e redimensionando, se necessário. Como desenvolvedor front-end, procuro organizar divs verticalmente quando acessado por mobile e tablet, fazendo com que estes tomem mais espaços na tela.
Sobre os textos, busco delimitar um tamanho de fonte padrão, que serve para mobile e desktop, porém fica pequeno demais em telões de 1920 por 1080, por exemplo. Logo, crio um CSS para controlar as fontes.

Visto que, mobiles possuem menos espaços para informações que desktop, deve-se mostrar ao usuário apenas o que ele procura, sem rodeios. Às  vezes, tanto charme não vale a pena.

 

 

Papa Neto
Atuo na área de programação web (back-end & front-end), além disso me interesso em qualquer área da programação que envolva tecnologias inovadoras e contribuintes para o progresso da humanidade em tornar a vida cada vez mais acessível.