Abres o teu próprio website num telemóvel. O texto é legível, o menu recolhe-se bem e as imagens ajustam-se sem empurrar nada para fora do ecrã. É o design de website responsivo a funcionar corretamente. Quando não funciona assim, os visitantes vão-se embora antes de lerem uma palavra.
O teu website tem um só conjunto de conteúdo e um só conjunto de código. O design de website responsivo é a abordagem que faz esse único código servir corretamente todos os visitantes, quer estejam num computador com ecrã panorâmico, quer num telemóvel na vertical. Em vez de construir uma versão móvel separada do teu site, um design responsivo ajusta automaticamente o esquema, as imagens e a navegação consoante o ecrã usado.
Um site que só fica bem num computador falha à maioria dos visitantes antes de eles lerem fosse o que fosse. Para a maioria dos donos de negócio, o design responsivo não é uma decisão a ponderar. É uma expectativa de base que se verifica antes do lançamento.
Como funciona o design responsivo?
Um website responsivo usa regras de CSS chamadas media queries para detetar o tamanho do ecrã que o visitante está a usar. Com base nessa informação, o esquema ajusta-se. Uma secção de três colunas num computador pode passar a uma só coluna num telemóvel. Um menu de navegação horizontal pode recolher-se num botão. As imagens ajustam-se à largura disponível sem transbordar dos seus contentores.
O princípio essencial é que o conteúdo se mantém. O que muda é a forma como esse conteúdo é organizado e apresentado. Um site responsivo não é um site diferente para quem usa telemóvel. É o mesmo site, adaptado a outro ecrã.
Para uma explicação técnica mais profunda de como isto funciona, o artigo sobre o que é o design responsivo trata da mecânica em detalhe, incluindo como funcionam as grelhas fluidas e as imagens flexíveis em diferentes tamanhos de dispositivos.
Qual é a diferença entre design responsivo e um site só para telemóvel?
Antes de o design responsivo se tornar o padrão, muitas empresas construíam uma versão móvel separada do site, muitas vezes noutro endereço. Um visitante num telemóvel era redirecionado para a versão móvel. Um visitante num computador via o site principal.
Esta abordagem criava duas coisas separadas para manter. As alterações a uma não se aplicavam automaticamente à outra. O conteúdo ficava dessincronizado. A versão móvel tinha muitas vezes menos funcionalidades ou menos conteúdo. Gerir dois códigos duplicava o esforço sem duplicar o resultado.
O design responsivo substituiu isto, fazendo um único site funcionar em todo o lado. Um endereço, um conjunto de conteúdo, um código, adaptado a todos os tamanhos de ecrã. É mais simples de construir, mais simples de manter e melhor para os motores de busca, que preferem um único endereço de referência para cada conteúdo.
O que muda entre computador e telemóvel num site responsivo?
Os ajustes que acontecem entre computador e telemóvel são mais extensos do que a maioria das pessoas percebe à primeira vista.
As colunas do esquema recolhem-se. Uma secção com quatro cartões de produto lado a lado num computador passa a uma pilha deslizável num telemóvel. Os menus de navegação mudam de forma. Os menus horizontais passam a painéis recolhíveis ou gavetas laterais. Os tamanhos de letra ajustam-se para continuarem legíveis sem ampliar. Os botões ficam maiores, para ser mais fácil tocar com um dedo do que clicar com um rato.
As imagens ajustam-se para preencher os seus contentores sem transbordar. As imagens de fundo podem ser cortadas de outra forma para funcionar em proporções verticais. Os formulários ajustam o tamanho e o espaçamento dos campos para serem usáveis com o teclado de um telemóvel.
O teste de um design responsivo bem executado não é apenas não se estragar no telemóvel. É a experiência no telemóvel parecer pensada, e não comprimida.
Como é que o design responsivo se liga à velocidade da página?
O design responsivo e a velocidade da página estão muito ligados. Um site responsivo que serve a quem visita em telemóvel imagens de computador em resolução total é tecnicamente responsivo, mas na prática lento. Os visitantes em telemóvel, com ligação de dados móveis, descarregam imagens muito maiores do que o ecrã consegue mostrar.
Um design responsivo bem implementado trata disto servindo imagens de tamanho adequado a cada dispositivo, comprimindo os ficheiros para ligações móveis e adiando os elementos não essenciais que atrasam o carregamento inicial. O objetivo não é só adaptar o esquema. É uma experiência rápida e fluida, seja qual for o dispositivo ou a velocidade da ligação.
O artigo sobre o que é a velocidade de um website explica como o desempenho de carregamento afeta a experiência do utilizador e as posições na pesquisa, e o que faz os sites correr mais devagar do que deviam.
O que deves verificar ao avaliar a adaptação de um modelo a telemóvel?
Nem todos os modelos que se dizem responsivos estão igualmente bem desenhados para telemóvel. Ao avaliar um, há coisas específicas que vale a pena verificar antes de te comprometeres.
Abre a demonstração do modelo no telemóvel, e não só numa pré-visualização de computador. Percorre todas as secções. Verifica se o menu abre bem e se todos os links estão acessíveis. Verifica se o texto é legível sem ampliar. Verifica se os botões de apelo à ação são grandes o suficiente para tocar com conforto. Verifica se as imagens aparecem corretamente e não empurram o conteúdo para fora do ecrã.
Presta atenção ao espaçamento em telemóvel. Secções que parecem arejadas num computador podem ficar apertadas quando as colunas se recolhem num ecrã pequeno. Verifica se as secções de conteúdo têm margem suficiente para o texto não ir de ponta a ponta. O artigo sobre como escolher um modelo de website inclui o teste em telemóvel no processo completo de avaliação de um modelo.
Quais são os sinais de que um website não é responsivo como deve ser?
Algumas falhas de adaptação são óbvias. Outras são subtis ao ponto de só as notares quando um cliente as menciona.
Sinais comuns de que um site não é bem responsivo incluem texto que obriga a deslocar na horizontal para ser lido por inteiro, imagens que transbordam dos contentores e ficam cortadas nas margens, menus de navegação impossíveis de usar sem cursor, botões pequenos demais para tocar com fiabilidade e formulários em que os campos não se ajustam bem ao teclado de um telemóvel.
Sinais menos óbvios incluem um esquema que tecnicamente cabe no telemóvel, mas parece um site de computador espremido numa coluna estreita. Secções com demasiadas colunas que se recolhem numa ordem confusa. Cabeçalhos e rodapés que se comportam de forma diferente em telemóvel, de maneiras que não foram previstas no design original.
A verificação habitual é percorrer todas as páginas num telemóvel a sério. As pré-visualizações no navegador são úteis durante o desenvolvimento, mas não reproduzem totalmente a experiência de um dispositivo tátil.
Como é que o design responsivo afeta as posições na pesquisa?
Os motores de busca usam a versão móvel do teu website como versão principal para indexar e classificar. Um site que funciona bem em telemóvel e carrega depressa num telemóvel terá, em geral, melhor desempenho nos resultados de pesquisa do que um construído sobretudo para computador.
Para além da preferência na indexação, um site pouco responsivo envia sinais negativos. Taxas de abandono altas de visitantes em telemóvel, tempos de carregamento lentos em ligações de dados móveis e conteúdo difícil de ler puxam o desempenho para baixo com o tempo. Os visitantes que saem logo porque o site não funciona no telemóvel estão a dizer aos motores de busca que a página não os serviu.
Para uma visão completa de como funciona a otimização para motores de busca e que fatores técnicos mais contam, o artigo sobre o que é o SEO trata do tema por inteiro.
Como a WEMASY trata do design responsivo
Todos os modelos do criador de websites da WEMASY são construídos para serem responsivos em computador, tablet e telemóvel. O editor visual inclui uma pré-visualização para telemóvel junto à vista de computador, para veres como as secções se comportam em diferentes tamanhos de ecrã enquanto constróis. O desempenho e a adaptação a telemóvel são tratados pela plataforma, sem configuração manual.
Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.
Perguntas frequentes
O meu website é automaticamente responsivo se usar um criador de websites?
A maioria dos criadores de websites modernos usa modelos responsivos como padrão. Se escolheste um modelo de um criador de websites atual, é provável que seja responsivo. O que importa verificar não é se o modelo diz que é responsivo, mas se se comporta bem num telemóvel. Percorre o teu site num telemóvel real e testa a navegação, as imagens, o tamanho do texto e os formulários antes de assumires que tudo funciona. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Um website mais antigo pode tornar-se responsivo sem ser refeito?
Depende de como o site original foi construído. Os sites feitos em criadores de websites modernos conseguem muitas vezes melhorar a experiência em telemóvel ajustando as definições do modelo ou mudando para um modelo melhor. Os sites programados de raiz ou feitos em plataformas mais antigas podem exigir muito retrabalho. Em muitos casos, refazer numa plataforma atual é mais rápido e dá melhor resultado do que tentar adaptar um código antigo.
O design responsivo afeta a velocidade de carregamento do meu website?
O design responsivo em si não torna um site mais lento. A forma como é implementado pode tornar. Um site que serve imagens de computador em tamanho completo a visitantes em telemóvel com dados móveis carrega devagar, mesmo que o esquema se adapte bem. Um design responsivo bem implementado inclui imagens de tamanho adequado a telemóvel, ficheiros comprimidos e carregamento adiado dos elementos não essenciais. Adaptar o esquema ao ecrã é só uma parte de uma experiência móvel completa.
O que é design mobile-first?
Design mobile-first é uma abordagem em que a versão móvel de um site é desenhada e construída antes da versão de computador, e não o contrário. Parte do ambiente mais limitado e expande a partir daí. Desenhar primeiro para telemóvel obriga a prioridades mais claras. Quando o espaço é limitado, só sobrevivem o conteúdo e as ações mais importantes. A versão de computador tem depois espaço para construir sobre essa base.
Como verifico se o meu website está adaptado a telemóvel?
Percorre todas as páginas num telemóvel real. Testa a navegação, as imagens, o tamanho do texto, os formulários e os botões. Os motores de busca também oferecem ferramentas gratuitas de teste para telemóvel, onde introduzes o teu endereço e eles assinalam problemas específicos, como texto pequeno demais para ler ou elementos clicáveis demasiado juntos. A combinação de um percurso manual com uma verificação por ferramenta revela os problemas que mais importam.