Conheça a maneira de criar páginas na internet e torná-las capazes de se adaptar e responder a todo e qualquer dispositivo.
O termo Responsive Web Design foi criado em 2010 por Ethan Marcotte, em um artigo de seu blog A List a Part. Por definição, um site é considerado responsivo quando se adéqua às necessidades do usuário. Para ilustrar esta adequação, navegue um pouco pelo site da LM&Co por diferentes meios (computador, celular, tablet, etc) e perceba que nosso website se adequa aos diversos devices e resoluções de tela. Observe em especial quando o website é exibido em celulares (mobile), perceba como os blocos de conteúdo são reorganizados.
Na prática, o design responsivo é o design que responde ao contexto do usuário. Se o usuário acessar pelo celular, por exemplo, os blocos de conteúdo são reposicionados para facilitar a leitura e os botões e fontes ficam maiores para facilitar o clique. Isso acontece para que usuário tenha a melhor experiência de uso possível.
Por que ter um website responsivo é importante?
“Mais buscas são realizadas em celulares do que em computadores. Isto já é realidade em 10 países, incluindo os Estados Unidos e o Japão.” Jerry Dischler – VP Google Adwords
Em todo o mundo existe um crescimento acelerado no acesso a internet por celulares. Quase todas as comparações, sejam elas de penetração, tempo de uso e outros, demonstram que celulares vem ganhando terreno e começam a ultrapassar o desktop. Isto não é diferente no Brasil: uma pesquisa recente da Nielsen mostra que 68 milhões de brasileiros já acessam a internet pelo smartphone.
Na prática não ter um site responsivo que se adeque ao acesso mobile significa excluir uma grande parcela de seu público.
Usuários exigem acessar a informação de qualquer device:
“72% dos usuários esperam que um website funcione no celular – 61% simplesmente sairão do site se ele não funcionar.” Pesquisa do Google sobre comportamento mobile.
Considerando que o usuário realizará múltiplas visitas no site, elas não serão realizadas em um único device. O usuário pode ter sua primeira visita em um desktop e retornar ao site em um celular.
Para o usuário as barreiras entre os devices simplesmente não existem, ele é exigente e espera que o site funcione e entregue valor em qualquer um dos devices que ele acessar, caso contrário haverá impactos negativos nos resultados do website.
Um exemplo de como isto ocorre pode ser observado em uma pesquisa do Google onde 48% dos usuários se dizem frustrados quando acessam um website que não funciona no celular.
Quais os riscos de não ter um website responsivo?
Além dos riscos de ignorar ou frustrar uma boa parcela de seu público, outro grande risco é de seu website perder relevância. Em Fevereiro deste ano o Google postou um artigo em seu blog apresentando mudanças em seu algoritmo que privilegiam os resultados de websites responsivos.
Este é um movimento que deve ser repetido pelos demais players do mercado, na prática, se seu website não estiver preparado para atender aos usuários de celulares, ele vai perder a relevância e se perder nas últimas páginas do Google e demais indexadores.
3 Pontos de atenção ao gerenciar um projeto responsivo
Um dos fatos mais interessantes sobre o design responsivo é o de que ele é centrado no usuário, toda a tecnologia é construída de forma flexível para se adequar ao contexto do mesmo. Mas, infelizmente, muitos projetos ignoram esta premissa e o design responsivo é implementado de maneira superficial.
“Um design responsivo não se limita a mudanças de layout. É possível ir a fundo criando ajustes finos para que a página se adeque sozinha: podemos aumentar a área de links em telas pequenas, exibir ou não exibir elementos que melhorem a navegação, nós podemos inclusive mudar o tamanho das fontes e de títulos gradualmente, otimizando a experiência para a tela em questão.”- Ethan Marcotte
1) Experiência de Navegação Mobile
Ao abrir o website no celular e se certificar que ele está “bonito” muitos gestores assumem que está tudo correto, mas ignoram a experiência de navegação. Problemas de navegação são um dos problemas mais comuns que encontramos nos testes de portabilidade, entre os itens recorrentes estão:
Botões pequenos ou em posições extremas (cantos da tela) que impossibilitam o clique (touch) pelo usuário;
Fontes pequenas ou com baixo contraste, que dificultam ou impossibilitam a leitura em movimento ou em locais com baixa iluminação;
Formulários que não funcionam corretamente;
Layout não adaptado para os recursos do celular, como por exemplo, a ação de arrastar a tela.
2) Performance em Conexões lentas e devices low end
Outro ponto que é muito ignorado ao se desenvolver sites responsivos é o seu carregamento. Muitos sites adequam o layout corretamente mas, não otimizam os recursos para conexões lentas.
Entre os dois problemas mais recorrentes estão:
As imagens, fontes e demais recursos do site são pesados impossibilitando o carregamento em conexões lentas;
O website consome recursos demais do celular, como por exemplo, uma animação em JavaScript que exige grande quantidade de processamento do celular dificultando ou impossibilitando a navegação.
3) Teste, teste e teste.
No final do dia o sucesso é medido se o usuário consegue ou não utilizar o website. A melhor maneira de garantir uma boa experiência é testar o seu website na maior quantidade possível de cenários diferentes. Durante o desenvolvimento e antes da entrega do projeto é necessário realizar uma bateria de testes considerando todos os cenários levantados no artigo.
Testes em múltiplos devices;
Testes em múltiplas resoluções;
Testes de usos adversos;
Teste em devices low end e de baixa performance.
Cada website tem suas características únicas e uma boa bateria de testes é essencial para enxergar e corrigir os problemas.
Quer ter um site responsivo e pronto para atender seus clientes?
Agende uma consultoria gratuita com a LM&Co.