Os dispositivos móveis estão mudando o mundo. E ter um site capaz de atender essa nova realidade é fundamental para seu blog ou loja virtual. Com o aumento de smartphones ativos no país você é praticamente obrigado a ter um Layout Responsivo.

Conheça quais são os dispositivos mais populares na Classe C (média) no Brasil. Estima-se que cerca de 73% dos novos internautas ou 48,3 milhões de usuários acessam a internet com eles – Google.

De acordo com uma pesquisa realizada pela Global Web Index, 86% dos brasileiros usam o smartphone enquanto assistem TV. Com esses dados podemos ter uma ideia de como esses aparelhos estão presentes na vida do brasileiro.

Agora vamos para um teste prático, aumente e diminua a tela do site da SAN. Com certeza você notou como o conteúdo se adaptou de acordo com o tamanho. O menu principal no topo se transformou em um ícone, a imagem do banner principal e os textos diminuíram proporcionalmente.

Assim surge o Layout Responsivo ou Web Design Responsivo (WDR), uma solução para melhorar a experiência do usuário e facilitar o desenvolvimento de sites.

Esse termo vem sendo utilizado a pouco tempo, pois há alguns anos bastava uma resolução de 1024×768 pixels para criar um site, já que a maioria dos usuários se adequava a esse padrão de resolução. Mas com o avanço dos dispositivos móveis, resoluções cada vez maiores e novas tecnologias, esse padrão já não fazia mais sentido.

Os usuários agora podem acessar internet em TV’s de 50 polegadas, smartphones de 5″, tablets de 11″ e computadores de mesa (Desktops) com telas que chegam a 26″.

Pra você ter uma ideia, o mês de julho de 2016 ainda não terminou e já tivemos mais de 100 resoluções diferentes acessando o nosso blog. Outro exemplo, é a variedade de smartphones na sua família e entre os seus amigos. Isso é prova de que os dispositivos que acessam um site, blog ou loja virtual podem variar muito.

*Dados retirados do Google Analytics – Público-alvo > Celular > Dispositivos > Dimensão Principal > Resolução de Tela.

Conceito

O conceito de Layout Responsivo ou WDR foi citado pela primeira vez por Ethan Marcotte em 

A imagem abaixo mostra o layout da SAN em 2015, justamente há dois anos. É bem diferente da versão atual, algumas informações até são as mesmas, mas o layout, posicionamento, cores, fontes, e ícones mudaram.

Faça Layout Responsivo

A solução que Ethan indica, é criar um layout que responda ou se adapte da melhor maneira, tornando a experiência do usuário (um tema que será abordado em um próximo post), muito mais agradável. Assim seu site atualiza de acordo com o dispositivo, sem a necessidade de ser desenvolvido para cada plataforma.

Caso contrário, um site criado para computadores pode se tornar uma experiência desagradável para usuários que o acessam em dispositivos móveis e dificilmente eles voltarão. Por isso garanta uma boa navegação para seu usuário, independente de qual dispositivo ele usa.

Como começar

Primeiro você precisa saber o que são as Meta Tags: De forma bem resumida, são linhas de código HTML que descrevem o conteúdo do seu site para os buscadores, navegadores e redes sociais.

O Google recomenda utilizar o mesmo HTML e apenas alterar o arquivo CSS de acordo com o dispositivo.

Essa imagem, mostra como um site responsivo se mostra na tela do computador e se adapta na do celular.

Ou seja, adaptar um site para ser compatível com dispositivos móveis é posicionar da melhorar maneira os elementos da página em outros dispositivos, assim seu site será exibido em todas as telas com o mesmo código.

Antes de tudo, você deve notificar o navegador que seu site se adaptará com dispositivos móveis, inserindo o seguinte código meta tag no cabeçalho do seu site:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Lembrando que essa meta tag é para navegadores mais recentes, como Google Chrome e Mobile Safari.

Essa meta tag mostra ao navegador como posicionar os elementos de acordo com a largura do dispositivo.

Acima, temos um exemplo, de como a meta tag pode ajudar a orientar o navegador a organizar os elementos de acordo com o dispositivo usado. A esquerda, um site sem a meta tag, então o navegador utiliza a largura da tela do computador e adapta para a do celular. Já no lado direito, temos a mesma página com meta tag especificando o uso de dispositivos móveis, ajustando para a tela do dispositivo.

Media Queries

Ethan e o próprio site de desenvolvedores do Google recomendam que se utilize Media Queries. Mais um termo que você precisa conhecer: Media Queries consiste em uma meta tag no código do seu site que determina o estilo para cada dispositivo de acordo com a resolução, altura, largura, cores, navegador… Vou dar um exemplo:

<!-- CSS media query em um elemento de link para dispositivos com altura máxima de 800px -->
<link rel="stylesheet" media="(max-width: 800px)" href="altura-max800.css" />

Por que usar o layout responsivo

Por que utilizar o layout responsivo? Confira algumas das vantagens:

  • Utiliza apenas uma URL para seu site;
  • Buscadores já priorizam sites responsivos para suas primeiras páginas nos resultados de pesquisa;
  • Economiza tempo da equipe de desenvolvimento para manter a mesma página com vários tamanhos;
  • Reduz erros que prejudicam a exibição nos dispositivos móveis;
  • Reduz tempo de carregamento, já que não exige redirecionamento do usuário;

Conclusão

O uso dos dispositivos móveis não para de crescer, assim como também tem aumentado o número de compras através deles, sabendo disso, seu site merece uma atenção especial para atender a esse público.

Um layout responsivo garante que o usuário tenha um experiência agradável ao navegar pelo site, para isso é indispensável ter fontes grandes e botões clicáveis de tamanho adequado.

Se o usuário não encontrar isso, ele vai procurar em outro lugar, independente de preço ou variedade de produto. Então, com certeza é preciso se adequar, não importa se você tem um e-commerce ou um portal de notícias.

Nesse link abaixo, você encontra uma ferramenta grátis para analisar e avaliar seu site de acordo com os dispositivos móveis.

Ferramenta Grátis: Teste de Compatibilidade com Dispositivos Móveis

E se você está criando seu site responsivo e ainda não tem uma hospedagem, eu indico nossa Hospedagem de Sites, um servidor 100% Cloud, onde você encontra um servidor seguro e de qualidade, feito sob-medida para suas necessidades, mantendo seu site on-line a qualquer hora e em todos os lugares.

Se você gostou deste conteúdo, peço que ajude mais pessoas a entender o que é um Layout Responsivo, compartilhando este artigo com seus amigos.

Caso tenha alguma dúvida sobre o assunto, por favor deixe seu comentário que terei o prazer de conversar com você a respeito.

Até a próxima!