Tenho certeza de que você já recebeu um escopo onde o cliente pediu para que o website funcione em múltiplos devices e múltiplas resoluções de tela, ou seja, solicitou um website responsivo.

Apesar de ser um termo utilizado com muita frequência, não existe clareza sobre o que de fato é responsivo e o porquê ele é importante. Esta confusão se agrava pois, a maioria dos conteúdos disponíveis na web abordam o tema do aspecto técnico. Este é um artigo para gestores entenderem com mais clareza o que é um website responsivo e quais são os impactos pros usuários.

O que é um website responsivo?

O termo Responsive Web Design foi cunhado em 2010 por Ethan Marcotte, em um artigo de seu blogA List a Part, Em sua definição um site é considerado responsivo quando se adéqua às necessidades do usuário.

‍Para ilustrar esta adequação observe o exemplo da animação abaixo, nela o website se adéqua 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 vertical.

]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.

Contexto: 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 ao website, 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 websiteperder 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.

"Com o aumento de usuários acessando a internet pelo celular, nossos algoritimos precisam se adaptar a este padrão de uso. No passado, nós realizamos atualizações para garantir que os sites estivessem configurados corretamente e pudessem ser visualizados em devices modernos. Agora (com este update) facilitamos para os usuários a encontrarem páginas amigáveis a celulares..."Trecho do artigo em que o Google anuncia mudanças em seu algoritimo privilegiando 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 é implementando 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 no artigo que originou o termo Website responsivo.

A Sofist tem um teste específico de portabilidade e ao rodarmos centenas de testes percebemos que esta abordagem superficial é muito comum. Sentei com minha equipe de testers e levantamos três pontos importantes, que geralmente são ignorados no desenvolvimento de websites responsivos.

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. Fizemos um artigo específico sobre as etapas críticas para o sucesso de uma aplicação e esmiuçamos a etapa do carregamento, clique aqui para ler.

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.