Experimente olhar em volta quando estiver no restaurante, no trabalho ou em um café. Quantas pessoas estão acessando à internet e com que tipos de dispositivos elas estão conectadas? Provavelmente, através de tablets, smartphones e netbooks.

Agora, imagine o site da sua empresa. Será que os clientes conseguem navegar nele de forma agradável em todos esses aparelhos? Se a resposta é sim, parabéns! Você tem um site responsivo — conteúdo e design adaptado ao browser de cada tela. Se não, algumas questões devem ser repensadas. Afinal, por que é importante ter um site desse tipo?

No post de hoje, vamos explicar tudo o que você precisa saber sobre sites responsivos. Vamos lá?

SITE RESPONSIVO X SITE MOBILE

Antes de saber como funcionam os sites responsivos, é necessário entender as diferenças entre eles e os sites mobile. O responsivo adapta o tamanho e o layout do site para a tela do dispositivo utilizado, independentemente de o aparelho ser um tablet, um smartphone ou um notebook.

Assim, ao abrir um site responsivo, o conteúdo e as imagens são automaticamente ajustados, mantendo-se somente a barra de rolagem vertical. O que o programador pode fazer no site responsivo é escolher algum módulo para que ele não apareça em telas menores.

Já o site mobile pode conter menos imagens ou elas podem estar com resolução mais baixa, evitando que as páginas demorem muito para carregar as informações. A URL também pode ser diferente — geralmente sendo algo como “mobile.site.com.br”.

COMO FUNCIONA UM SITE RESPONSIVO?

O site responsivo consegue reorganizar os elementos do site por meio de CSS (uma espécie de folha de estilo que usa camadas para delimitar a apresentação de páginas em sites) e dos media queries, que possibilitam a alteração dos elementos de acordo com os tamanhos de tela definidos pelo programador. Assim, os media queries podem definir que uma imagem específica apareça em um tablet de sete polegadas, mas não em um aparelho de três polegadas.

Portanto, essa tecnologia facilita o acesso dos usuários aos mais diversos tipos de sites. Tudo dependerá da programação feita no site responsivo e do tamanho da tela do aparelho usado pelo usuário. As telas podem variar bastante de tamanho, podendo ficar entre 320 x 240 e 40 x 960.

LAYOUT

Na hora de construir o site, o programador deve evitar deixá-lo com códigos sujos, que são gerados automaticamente para ajudar os iniciantes do projeto. O recomendado é ser objetivo e direto, deixando apenas os códigos que serão utilizados.

Nesse sentido, a ideia é evitar estilos CSS inlines, Div’s sem necessidade, arquivos flash ou JS sem fallback, códigos redundantes, códigos que não são úteis, posicionamento float ou position absolute desnecessário.

Por outro lado, é recomendado utilizar arquivos externos no lugar dos estilos CSS inlines, doctype HTML5, código semântico e simples, reset CSS e técnicas mais fáceis para o usuário em elementos como barra de navegação, menus, entre outros.

O layout também precisa ter flexibilidade, com grids que permitam ajustar o conteúdo. Nesse sentido, o layout fluido é a melhor opção porque possibilita ao usuário ter uma melhor experiência de acesso ao site.

Uma informação importante é que, na hora de fazer a programação do layout, é indicado utilizar porcentagens — e não valores absolutos — para evitar problemas no cálculo.

MEDIA QUERIES

Os media queries são os responsáveis por inserir uma folha de estilo diferenciada dependendo da resolução da tela do dispositivo do usuário. Isso permitirá que o conteúdo esteja adequado para qualquer tamanho de tela.

Além disso, é possível usar tamanhos mínimos e máximos (max e min width) para o layout. Assim, ele será aumentado ou diminuído conforme a necessidade, mas a possibilidade de erros ocorrerem será menor.

BENEFÍCIOS DE UM SITE RESPONSIVO

Ao utilizar um site responsivo, diversos benefícios são agregados. Alguns deles são:

• Economia: é mais econômico ter um site responsivo do que fazer várias versões do site para as diferentes plataformas;
• Experiência do usuário: ao acessar um site responsivo, o usuário tem uma melhora em sua experiência de navegação. Além disso, ele se sente mais familiarizado com o site, que também passa objetividade e clareza;
• Conversão: como a experiência do usuário é melhor, as chances de ele adquirir o produto ou serviço vendidos também são maiores. Ou seja, uma interação maior do usuário com o conteúdo é sinônimo de maiores chances de conversão;
• Rankeamento: consequentemente, o site responsivo também é mais bem rankeado nos buscadores e faz com que o usuário tenha uma impressão melhor da marca.

MOTIVOS PARA UTILIZAR UM SITE RESPONSIVO

EXPLOSÃO DA INTERNET MÓVEL

Dados recentes do Ministério das Comunicações afirmam que o uso da internet em dispositivos móvel no Brasil saltou nada mais nada menos que 416% desde 2010. Não precisamos só de números, no entanto, para saber que muita gente está conectada pelos celulares. Basta observar os amigos, os familiares ou os funcionários da empresa.

Um site responsivo garante que os usuários tenham a melhor experiência em qualquer dispositivo, seja iPhone, Windows Phone ou smartphones que rodam com o sistema operacional Android.

CREDIBILIDADE PARA A MARCA

Imagine que o seu cliente ou potencial cliente esteja acostumado a usar o seu site do desktop, mas um dia precisa buscar alguma informação sobre um produto ou serviço quando está na rua.

Ao abrir o endereço no celular, ele vê um site completamente desconfigurado. A credibilidade da empresa vai por água abaixo. Ao acessar um site responsivo, a interatividade dada por um dispositivo móvel permanecerá a mesma, gerando confiança no usuário para poder realizar qualquer tarefa, de onde quer que esteja conectado.

RAPIDEZ DO SITE

Sites que ainda não são responsivos tendem a ser mais lentos. O ideal é que leve até 2 segundos para a página abrir totalmente em um smartphone. Isso pode não acontecer caso o site da sua empresa tenha uma versão só para desktop e esteja sendo acessado pelo celular. Lembre-se que, quanto mais lento o site, maior a probabilidade de o usuário desistir de ficar ali e acabar procurando outro.

MELHORA NA BUSCA ORGÂNICA

Ao classificar os sites por ordem de importância, os mecanismos de busca preferem os que são responsivos, com um web design mais leve, adaptável e com URL única, por exemplo.

Outra coisa que conta muitos pontos para ficar na frente das listas dos buscadores é a velocidade do site, como foi dito acima. Então, ter uma página responsiva vai ajudar a colocá-lo nas primeiras posições sem precisar aumentar a verba para AdWords.

Quem comercializa qualquer tipo de negócio pela internet deve se preocupar ainda mais em ter seus sites responsivos. Essa prática tem ligação direta com a imagem e com o crescimento da sua empresa. Não basta mais ter apenas uma versão para internet móvel, é preciso que tudo esteja integrado de forma simples.

Assim, sites responsivos são essenciais. Segundo a previsão do relatório Visual Networking Index, da Cisco, até 2020 deverá ter 5,5 bilhões de usuários de tablets e smartphones no mundo, abrangendo 70% da população.

A sua empresa já usa um site responsivo? Tem interesse em otimizar essa área do seu negócio? Então, entre em contato com a gente.