Site responsivo: o que é e como funciona

Site responsivo é um site cujo layout se adapta ao tamanho da tela, seja no celular, no tablet ou no computador, com o mesmo endereço e o mesmo conteúdo. Em vez de manter uma versão para cada aparelho, o HTML e o CSS reorganizam colunas, menus e imagens conforme o espaço disponível.

Como funciona o design responsivo?

Segundo a MDN, o design responsivo se apoia em quatro peças:

• Grades flexíveis: layouts com Flexbox ou CSS Grid, que se ajustam ao espaço.
• Imagens flexíveis: a imagem nunca passa da largura da área em que está.
• Media queries: regras de CSS que só valem a partir de certa largura de tela, por exemplo para passar de uma coluna para três.
• Tag viewport: diz ao navegador do celular para usar a largura real da tela, e não a de uma tela de computador.

<meta name="viewport" content="width=device-width">

img { max-width: 100%; }

Por que o site precisa ser responsivo?

Quem acessa pelo celular precisa ler sem dar zoom, tocar nos botões com o dedo e não rolar para os lados. Além disso, o Google usa a versão para celular do site na indexação e nos resultados (mobile-first) e recomenda o design responsivo por ser o mais simples de implementar e manter. Com um só endereço e um só código, há menos trabalho de manutenção. Responsivo também não é o mesmo que ter um aplicativo: continua sendo um site comum, aberto pelo navegador.

Como saber se o meu site é responsivo?

• Diminua a largura da janela do navegador: o layout deve se reorganizar sem cortar conteúdo.
• Use o modo de dispositivo das ferramentas do navegador (tecla F12) para simular celulares e tablets.
• Abra o site num celular de verdade e confira se o texto é legível, se os botões são fáceis de tocar e se o menu funciona.

Como deixar um site WordPress responsivo?

Escolha um tema WordPress responsivo, que hoje é o padrão dos temas atuais, e confirme isso na página de demonstração, em um celular. Com um construtor de páginas como o Elementor, é possível ajustar o visual de cada tamanho de tela. Imagens grandes deixam o site lento no celular: o uso de cache e de CDN ajuda a entregá-las mais rápido. Em qualquer caso, teste depois de cada mudança relevante.

Para estudar a técnica, veja o guia da MDN sobre design responsivo.