Como criar um site responsivo para celular e computador

Um site responsivo reorganiza seu conteúdo para que as páginas continuem legíveis e utilizáveis em telas estreitas, largas ou ampliadas. Em vez de desenhar uma versão fixa para cada modelo de aparelho, você cria uma estrutura que se adapta ao espaço disponível. Isso ajuda a manter o mesmo conteúdo e endereço acessível em celular e computador, mas exige testar navegação, formulários e leitura em mais de uma condição.

Comece pelo conteúdo e pela tarefa

Antes de escolher pontos de quebra, liste o que cada tela precisa mostrar e o que a pessoa deve conseguir fazer. Em uma página de serviço, por exemplo, o visitante deve identificar a oferta, ler os critérios principais e encontrar o contato sem precisar percorrer colunas comprimidas.

Organize o HTML em uma ordem que faça sentido sem estilos: título, explicação, ação e detalhes. Em telas menores, essa sequência pode fluir em uma coluna; em uma tela ampla, alguns blocos relacionados podem ficar lado a lado. A ordem visual não deve contradizer a ordem do documento ou criar uma navegação confusa por teclado. Para estruturar o projeto antes de desenhar, consulte também o guia de planejamento de site institucional.

Configure a janela de visualização

Uma página precisa informar ao navegador móvel que sua área de layout deve acompanhar a largura do aparelho. Sem essa configuração, o navegador pode usar uma janela virtual mais larga e reduzir a página inteira, fazendo o texto parecer minúsculo e impedindo que os estilos para telas estreitas funcionem como esperado.

No documento HTML, a configuração usual é:

<meta name="viewport" content="width=device-width, initial-scale=1">

Não limite o zoom com user-scalable=no nem com valores máximos que impeçam a ampliação. Pessoas podem precisar aumentar o conteúdo, e o layout deve continuar utilizável nesse estado. A documentação do Google recomenda design responsivo como uma forma simples de manter o mesmo HTML e URL entre dispositivos; isso, sozinho, não garante indexação ou posição nos resultados.

Monte o layout para crescer e encolher

Prefira dimensões flexíveis e limites que preservem leitura. Evite definir a página inteira com uma largura fixa como width: 1200px; em uma tela menor, isso cria rolagem horizontal. Um contêiner pode ocupar a largura disponível até um máximo de leitura:

.conteudo {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

Use Flexbox ou Grid para distribuir blocos e permita que itens quebrem linha quando faltar espaço. Textos longos, URLs e componentes incorporados também precisam de limites para não alargar a página. Se o site tiver imagens, faça-as caber no contêiner e forneça dimensões ou proporção para reservar espaço; a configuração de imagens responsivas é um assunto complementar, tratado no guia de srcset e sizes.

Escolha pontos de quebra pelo conteúdo

Um breakpoint é uma largura em que uma regra de layout muda. Não há uma lista universal de larguras correta para todos os sites. Redimensione a janela e acrescente uma mudança quando o conteúdo começar a ficar espremido, a navegação deixar de caber ou as colunas ficarem estreitas demais.

Comece com estilos para uma coluna e amplie o layout quando houver espaço suficiente. Por exemplo, um menu pode virar uma coluna de links em largura estreita e se distribuir horizontalmente quando couber sem sobreposição. Prefira unidades relativas quando apropriado e evite ajustar o CSS somente aos nomes comerciais de aparelhos. O tutorial de design responsivo com containers no Elementor cobre os controles daquela plataforma; o princípio aqui vale também para HTML e CSS próprios.

Revise leitura, controles e formulários

Em largura pequena, confira se títulos quebram naturalmente, parágrafos não formam linhas muito longas e a navegação continua identificável. Botões e links precisam ter espaço suficiente para toque e foco visível. Não dependa apenas de passar o ponteiro do mouse para revelar uma ação.

Confira os formulários com teclado e toque: rótulos devem permanecer visíveis, os campos precisam caber na tela e as mensagens de erro não podem ficar escondidas. Tabelas muito largas podem precisar de uma alternativa em blocos ou de uma região rolável identificada, sem fazer o restante da página também rolar de lado. O planejamento de acessibilidade do site complementa esses testes.

Teste em larguras e condições diferentes

Use o modo responsivo das ferramentas de desenvolvedor para examinar o conteúdo em larguras variadas, incluindo uma largura móvel estreita, uma largura intermediária e uma tela ampla. Isso é uma simulação útil, mas não substitui a checagem em aparelhos e navegadores reais quando o projeto depende de uma interação específica.

Verifique pelo menos:

ausência de rolagem horizontal da página e de texto cortado;
menu, busca, botões e formulário utilizáveis por toque e teclado;
zoom de texto sem sobreposição ou perda de informação;
rotação para paisagem e retorno para retrato;
imagens, tabelas e incorporações sem estourar o contêiner;
mesma informação principal disponível nas versões móvel e desktop;
carregamento e interação em conexão e aparelho modestos.

Anote a largura, o navegador e o resultado de cada problema. Corrija a causa do transbordamento em vez de esconder tudo com overflow: hidden, que pode cortar conteúdo ou controles. Depois, repita os testes nas páginas que compartilham o componente corrigido. Para investigar lentidão além do layout, siga o diagnóstico de site lento.

Responsividade e busca

O Google usa a versão móvel para rastrear e indexar a maioria dos sites. Mantenha o conteúdo principal, os metadados e os links importantes disponíveis nessa versão; evite carregar a resposta só depois de uma interação que o rastreador não executará. O design responsivo ajuda a manter uma URL e uma estrutura de conteúdo, mas não é uma garantia de tráfego, indexação ou melhoria de posição.