Mas o que é um Site Responsivo?

Quando falamos em responsividade, muitas vezes confundimos com reponsabilidade.

Apesar deta segunda ainda ser de extrema importância para o desenvolvimento de um site ou mesmo de um sistema web, não é disso que estamos tratando neste artigo e sim sobre a forma como o design do site se comporta em meio aos diversos dispositivos com acesso à Internet.

Vamos a um exemplo mais claro:

Quando você acessa um site através de seu Smartphone e para poder clicar em algum link você precisa ampliar o site, rolar para os lados e clicar no link, ainda correndo o risco de clicar no link errado, pode ter certeza de que esse site não é nem de longe um site reponsivo.

Um site responsivo é aquele que se adapta aos diversos dispositivos, seja um Smartphone com tela de 2,5 polegadas até uma SmartTv de 80 polegadas ou mais.

E não estamos falando apenas de enquadramento e sim o cuidado para que os lins estejam no tamanho ideal para que seu Dedo Indicador clique quando o Smartphone está na Vertical e altere a proporção para quando o mesmo Smartphone estiver na Horizontal.

No mesmo exemplo, quando você acessa uma SmartTv, os blocos e fontes do site devem ficar maiores e melhor dispostos, garantindo a leitura do conteúdo e fácil acesso aos links.

Mas não confunda Site Responsivo com Versão Mobile, afinal de contas, estamos falando de boas práticas e não de adaptações.

 

[Sites Responsivos]

Site Responsivo X Versão Mobile

No começo da inclusão dos sites em dispositivos móveis, a primeira onda foi a criação de versões mobile para os sites, onde o site principal estava em um endereço comum (por exemplo: www.seusite.com.br) enquanto a versão mobile estava em outro endereço (por exemplo: www.mob.seusite.com.br), de forma que este segundo era uma versão do site criado para dispositivos móveis.

Apesar de funcional, ainda haviam problemas dependendo do tamanho da tela do celular, e a versão mobile ainda podia ser acessada pelo computador em seu endereço, de forma que todo o layout se apresentava quebrado e disforme. E por causa desses problemas, muitos programadores criavam vários redirecionamentos para várias versões diferentes do mesmo site para que houvesse a impressão de que o mesmo estava sendo aberto de acordo com o dispositivo acessado.

Além de todas as características citadas acima, ainda vem acompanhado da dor de cabeça de manter a redundância das informações, atualizando-se o conteúdo em cada uma das versões diferentes do site, correndo o risco de esquecer de alguma delas ou simplesmente o conteúdo ficar desigual.

A grande característica de um Site Responsivo, é que ele não é uma outra versão do site e sim o mesmo site que automaticamente vai se adaptando conforme é alterado o tamanho da tela no qual ele é exibido.

Você pode fazer o teste. Se estiver em um computador, diminua o tamanho da janela de seu navegador e verá que este mesmo artigo vai adaptar-se conforme o tamanho que você deixar. O site todo se adapta.

Como já é de se esperar, a manurtenção e inclusão de conteúdo se torna mais prática e o endereço do site permanece único. Além de tornar a navegação mais agradável para seus visitantes.

E é aí que você me pergunta. Qual a diferença para os meus resultados online?

Me acompanha que eu te explico..!!

 

Resultados melhores com Sites Responsivos

O bom posicionamento nos provedores de busca (Google, Bing, Yahoo, etc..) é responsável por garantir um melhor resultado em seus objetivos com o site. Quanto a isso não há dúvida. Pois esse é um dos motivos para seu site ser reponsivo.

Os provedores de busca estão preocupados com a boa experiência do visitante no acesso aos sites de seu índice e, por esse motivo, dão maior prioridade aos sites que já possuem as caracterpisticas de responsividade.

Quanto melhor a experiência de navegação nas diversas resoluções, melhor é o posicionamento do site em relação aos demais.

Claro que, além do bom posicionamento, a experiência do usuário é o diferencial para atingir o objetivo da página visitada. E para isso vou dar dois exemplos bem simples:

  1. Uma Loja Virtual passará a realizar mais vendas através de Smartphones, uma vez que o acesso aos produtos, detalhes e botões de compra estão adaptados;

  2. Um cadastro de formulário no site que já possua os tamanhos e formatos ideais diminuirão a porcentagem de desistência nos cadastros.

Inúmeras outras vantagens simplesmente ligadas à experiência de navegação do usuário poderiam ser listadas para alcançar melhores resultados, e tudo depende dos objetivos e da estratégia planejada para alcançar esses objetivos.

 

Codificando os Pilares de um Site Responsivo

Para os desenvolvedores de plantão, aí vai algumas dicas:

Todos os blocos princiais de uma sessão do site (bem como os blocos principais) devem ser estilizados com tamanho de resolução em Porcentagem, nunca em Pixels. Isso torna o Layout Fluído, que é o primeiro passo para tornar um site responsivo.

<div style='width: 100%'>
<div style='width: 70%'>
<span>conteúdo em destaque</span>
</div>

<div style='width: 30%'>
<span>conteúdo de uma sidebar</span>
</div>
</div>

No exemplo acima você tem uma sessão que ocupa toda a tela na horizontal com um bloco de 70% para um destaque de notícias ou conteúdo de relevância e um bloco de 30% onde pode ser incluída uma sidebar com links a conteúdo relacionado ou um menu de navegação lateral.

Dentro destes parâmetros os blocos vão sempre ocupar o mesmo espaço, não importando o tamanho da tela de dispositivo. Os próximos passos para a responsividade é trabalhar as Media Queries para a melhor disposição do conteúdo de acordo com a resolução da tela. Mas este é um assunto para um próximo Post.

Tornar os blocos internos fluídos e estilizar as margens com porcentagem e fontes com escala EM vão garantir os pilares para tornar seu site Resposivo.

.

Acompanhe nosso conteúdo para saber mais sobre o assunto. Novas postagens, com conteúdo técnico será disponibilizado em futuras postagens, fique atento para não perder. Navegue também por nosso blog para encontrar as melhores dicas de Empreendedorismo e Marketing Digital. #VoeConosco.