Blog
30 de maio, 2016 Front-end
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 da Agência Raise em diferentes dispositivos
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.
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 mais comuns
Além das media queries, algumas outras coisas também são importantes notar para o bom funcionamento da responsividade:
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.
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.
10 de fevereiro, 2017
04 de junho, 2016
30 de maio, 2016
Descreva a sua necessidade e nós encontraremos
a melhor solução possível para seu novo site!
Somos uma agência digital com foco em criação de sites bonitos com grandes funcionalidades.
Solicite um orçamento
10 de fev, 2017
04 de jun, 2016
30 de maio, 2016
