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!
