Site responsivo: O que é e como funciona

site responsivo

O que é um site responsivo?

Um site responsivo se adapta a qualquer dispositivo e resolução de tela, ou seja, seu computador de mesa (desktop) com tela grande, seu notebook, tablet e smartphone.

Em tablets e smartphones ele irá se adaptar também aos 2 modos de exibição: retrato (segurando o aparelho na vertical) e paisagem (segurando o aparelho na horizontal).

 

site responsivo

Site da Agência Raise em diferentes dispositivos

 

Por que eu preciso de um site responsivo?

A idéia por trás do site responsivo é que ele proporcione uma melhor leitura e experiência do usuário, ou seja, sem que o usuário precise dar zoom na tela do seu smartphone o tempo todo para ler um texto (o que acontece em um site não responsivo).

É meio irritante quando você entra em um site não responsivo e precisa dar zoom o tempo todo, certo? O mais comum nesse caso é você fechar o site e perder o interesse. Isso irá ocasionar um aumento na taxa de rejeição, o que é péssimo para o ranking nas buscas orgânicas do Google, pois ele entende que este site não é interessante para seus usuários.

Ter um site responsivo bem feito faz com que o seu site seja fácil de ler e navegar, dessa forma acaba aumentando o tempo de permanência do usuário no seu site e diminuindo a taxa de rejeição, que é um dos fatores que ajudam seu site a conseguir melhores posições nas buscas do Google.

 

Como funciona um site responsivo?

Os sites responsivos funcionam através media queries em CSS3. Com as media queries nós podemos alterar tudo referente à CSS para terminadas resoluções. Por exemplos, se quisermos alterar a cor de fundo do site para a cor preto em resoluções com no máximo 1200 pixels de largura, podemos escrever:

@media screen and (max-width: 1200px) {

   body { background: #000; }

}

Os valores de largura máxima a serem utilizados varia muito de acordo com a estrutura do site e se você usa algum framework. Na Agência Raise nós utilizamos o Bootstrap como framework.

O Bootstrap possui 4 pontos de interrupção (breakpoints) principais e cada um deles serve para determinados dispositivos. No processo de criação de sites nós fazemos primeiro a versão de computadores com resolução grande, ou seja, acima de 1200 pixels de largura. Depois fazemos as devidas adaptações para resoluções menores, então as 4 media queries que mais utilizamos são:

@media screen and (max-width: 1200px) {} /* Computadores, notebooks e tablets em modo paisagem (horizontal) */

@media screen and (max-width: 991px) {} /* Tablets em modo retrato (vertical) */

@media screen and (max-width: 767px) {} /* Smartphones em modo paisagem (horizontal) */

@media screen and (max-width: 480px) {} /* Smartphones em modo retrato (vertical) */

breakpoints em sites responsivos

Breakpoints mais comuns

Além das media queries, algumas outras coisas também são importantes notar para o bom funcionamento da responsividade:

  • Imagens flexíveis: Em sites responsivos devemos fazer com que as imagens não ultrapassem o tamanho do seu container ou da tela, ou seja,a imagem deve diminuir proporcionalmente e automaticamente conforme a resolução diminui. Para isso usamos a seguinte css: img { max-width: 100%; }. Dessa forma a imagem irá ocupar a sua largura máxima e ao mesmo tempo não irá exceder o tamanho do container ou da tela.
  • Não usar altura fixa (height) em div’s, section’s e até mesmo botões. Isso deve ser evitado pois conforme a resolução diminuir você pode precisar aumentar ou diminuir textos e dessa forma o layout irá “quebrar” mais facilmente caso algum elemento esteja com altura fixa. Para evitar isso, prefira o uso de ‘padding-top’ e ‘padding-bottom’ nos elementos.
  • Alguns dispositivos ou navegadores podem diminuir a página proporcionalmente e dessa forma não adaptar corretamente os elementos conforme você escreveu nas suas media queries. Para evitar isso é necessário declarar corretamente a escala inicial logo ao abrir o <head> do seu código: <meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

É possível converter meu site antigo para responsivo?

A resposta curta é: depende. Nesse caso sempre dependerá do código do seu site e do quanto ele é antigo.

Sites muito antigos eram estruturados com tabelas, que hoje são consideradas obsoletas. Se o seu site foi estruturado com tabelas, sinto informar mas vale mais a pena criar um layout totalmente novo, pois de qualquer forma todo o código (HTML e CSS) precisará ser reescrito.

Porém se o seu site não é tão antigo assim e sua estrutura já é a base de div’s e section’s (tableless), o código pode sim ser alterado para que ele passe a ser responsivo. Nesse caso o processo pode ser mais fácil e ter um resultado melhor utilizando algum framework (recomendo o Bootstrap), pois dessa forma não precisará reescrever boa parte da CSS.

 

Concluindo

Sites responsivos são altamente recomendados devido ao grande número de pessoas que acessam sites em dispositivos móveis. É algo obrigatório se você quer que o seu site seja atual, de fácil visualização para o usuário e tenha maior relevância no Google.

Comentários

Solicite seu orçamento!

Descreva como deve ser seu novo site e nós encontraremos
a melhor solução possível para você.