O web design responsivo faz o teu website ajustar-se automaticamente a qualquer tamanho de ecrã. Descobre o que é o design responsivo e porque importa para a tua marca.
Abre agora um website no telemóvel e depois abre o mesmo website num portátil. O aspeto é diferente, certo? O menu pode mudar de sítio, as imagens mudam de tamanho e o texto reorganiza-se para caber no ecrã. É o web design responsivo a funcionar. O website não são duas versões separadas. É o mesmo site a ajustar-se ao ecrã que estás a usar.
Hoje, mais de metade de todo o tráfego da web vem de telemóveis e tablets. Se o teu website só tem bom aspeto num computador, estás a perder mais visitantes do que os que manténs. O design responsivo resolve isto, garantindo que o teu site funciona em todo o lado, em todos os dispositivos, sem precisares de páginas separadas para cada tamanho de ecrã.
O que é o web design responsivo?
O web design responsivo é uma forma de construir websites em que o esquema, as imagens, o texto e os botões se ajustam automaticamente ao tamanho do ecrã. Quer alguém visite o teu site num monitor grande, num tablet ou no ecrã pequeno de um telemóvel, o website reorganiza-se para caber.
Isto não quer dizer encolher a versão de computador até caber num telemóvel. Quer dizer que o website é pensado desde o início para funcionar em todos os tamanhos de ecrã. O texto fica legível sem ampliar. Os botões ficam grandes o suficiente para tocar. As imagens ajustam-se sem ficarem cortadas ou esticadas. O conteúdo é o mesmo, mas a forma como é apresentado adapta-se para dar ao visitante a melhor experiência no dispositivo que estiver a usar.
Como funciona o design responsivo?
O design responsivo usa grelhas flexíveis e regras incluídas no código do website. Essas regras dizem ao navegador: "Se o ecrã tiver esta largura, organiza o conteúdo assim. Se o ecrã for mais estreito, organiza-o de outra forma."
Num computador, o teu website pode mostrar três colunas lado a lado. Num tablet, essas três colunas podem passar a duas. Num telemóvel, empilham-se numa única coluna, para o visitante as percorrer com facilidade. É mostrado o mesmo conteúdo, só reorganizado para caber no espaço disponível.
As imagens também se adaptam. Uma imagem de banner grande num computador pode diminuir num telemóvel, para carregar mais depressa e não ocupar o ecrã todo. Os menus de navegação passam muitas vezes para um formato compacto em ecrãs mais pequenos, como um menu hambúrguer, para poupar espaço sem tirar aos visitantes o acesso a todas as páginas.
Porque precisa o teu website de design responsivo?
Isto não é um extra agradável. Se o teu website não é responsivo, estás ativamente a afastar pessoas.
1. A maioria dos teus visitantes está no telemóvel
A maior parte das pessoas que navegam na internet hoje fá-lo num dispositivo móvel. Se o teu website é difícil de ler, lento a carregar ou incómodo de usar num telemóvel, esses visitantes vão-se embora e vão para um site que funcione melhor para eles.
2. Os motores de busca dão melhor posição a websites adaptados a telemóvel
Os motores de busca avaliam como o teu website funciona em dispositivos móveis quando decidem a posição em que o colocam. Um website adaptado a telemóvel tem mais hipóteses de aparecer nos resultados de pesquisa do que um que só funciona em computador. Se o teu site não é responsivo, as tuas posições podem sofrer.
3. Um website em vez de dois
Antes do design responsivo, algumas empresas construíam uma versão móvel separada do website. Isso queria dizer manter dois sites, atualizar o conteúdo em dois sítios e lidar com dois conjuntos de endereços. O design responsivo acaba com tudo isso. Constróis um só site e ele funciona em todo o lado.
4. Mantém os visitantes mais tempo no teu site
Quando um website é fácil de usar, as pessoas ficam mais tempo. Leem mais páginas, deslocam-se mais e têm mais probabilidade de agir. Um site responsivo elimina o atrito causado por texto minúsculo, elementos sobrepostos e botões pequenos demais para tocar. Mantém a experiência fluida, seja qual for o dispositivo do visitante.
O design responsivo e a navegação do website andam de mãos dadas. Um site que se ajusta a todos os ecrãs continua a precisar de menus e links claros, para os visitantes saberem para onde ir. Se queres aprender a montar menus que funcionem bem em todos os dispositivos, lê como estruturar o menu de um website. E se também estás a pensar em como manter o teu site acessível a todos, lê como construir um website acessível a todos.
Perguntas frequentes
Como testas se o teu website é responsivo?
A forma mais simples é abrir o teu website no telemóvel, no tablet e no portátil e ver como fica em cada um. Também podes redimensionar a janela do navegador num computador e ver como o esquema se ajusta. Para uma verificação mais detalhada, as ferramentas de programador do navegador têm um modo de pré-visualização de dispositivos, que simula diferentes tamanhos de ecrã sem precisares de vários dispositivos. Acompanha o comportamento dos teus visitantes em telemóvel com as métricas principais para acompanhar o desempenho do website.
Qual é a diferença entre design mobile-first e design responsivo?
Design responsivo quer dizer que o website se ajusta a qualquer tamanho de ecrã. Design mobile-first é uma abordagem em que desenhas primeiro para o ecrã mais pequeno e depois ampliar para os ecrãs maiores. O mobile-first é uma estratégia dentro do design responsivo. Ambos dão um website que funciona em todos os dispositivos, mas o mobile-first dá prioridade à experiência no telemóvel desde o início.
O design responsivo afeta as tuas posições de SEO?
Sim. Os motores de busca usam a adaptação a telemóvel como fator de classificação. Se o teu website não funciona bem em dispositivos móveis, pode ficar em pior posição nos resultados de pesquisa. Um site responsivo que carrega bem em todos os tamanhos de ecrã tem mais hipóteses de subir. Lê mais sobre como a velocidade e o desempenho se ligam às posições em o que é a velocidade de um website e porque importa.
Quais são os erros mais comuns em design responsivo?
Usar esquemas de largura fixa que não se ajustam, fazer botões pequenos demais para tocar num telemóvel, esconder conteúdo importante em dispositivos móveis e não testar em dispositivos reais. Outro erro comum é verificar o aspeto do site num só modelo de telemóvel, em vez de testar vários tamanhos de ecrã. Uma navegação fraca em telemóvel também é frequente, com menus sobrepostos ou links demasiado juntos.
Precisas de um website móvel separado se o teu site for responsivo?
Não. Esse é o objetivo do design responsivo. Um só website funciona em todos os dispositivos. Construir um site móvel separado significa o dobro da manutenção, o dobro das atualizações de conteúdo e dois endereços diferentes. O design responsivo elimina tudo isso. Os modelos da WEMASY são todos construídos para serem responsivos desde o início, por isso o teu site fica bem em todos os ecrãs sem trabalho extra.
Um website antigo pode tornar-se responsivo sem ser refeito?
Depende de como o site foi construído. Alguns sites mais antigos podem ser atualizados com alterações de código responsivo. Outros assentam em estruturas rígidas, e é mais fácil começar de novo com um modelo responsivo. Se o teu site atual não está adaptado a telemóvel e o esquema parece desatualizado, refazê-lo num criador de websites moderno costuma ser mais rápido e dar melhores resultados do que remendar um design antigo.