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!