Como criar um site responsivo e acessível com HTML e CSS

Por que resolução de tela deixou de ser o ponto de partida

Resolução é a quantidade de pixels que a tela mostra. Durante anos, sites eram desenhados para uma largura fixa de monitor. Hoje o visitante chega por celular, tablet, notebook e TV, cada um com uma largura.

Desenhar para cada resolução não funciona. O web.dev orienta escolher os pontos de quebra pelo conteúdo, e não por marca ou modelo de aparelho. A pergunta certa é: em que largura este texto ou esta grade começa a ficar ruim?

O Google Search Central informa que o Google usa a versão para celular do conteúdo, rastreada com o agente de smartphone, para indexar e classificar as páginas. A mesma página diz que o Google recomenda o design responsivo, com um HTML e uma URL só.

Os 4 pilares do site responsivo

A MDN descreve o design responsivo como uma abordagem, não uma tecnologia à parte. Ela se apoia em grades fluidas, imagens flexíveis e media queries, mais a meta viewport no head.

Passo a passo: o CSS mobile first

A MDN chama de mobile first a prática de criar primeiro uma coluna única para telas estreitas e só depois abrir mais colunas. O código fica mais curto, porque o celular não precisa desfazer regras do computador.

1. Coloque a meta viewport no head de todas as páginas.
2. Escreva o CSS base para uma coluna, sem largura fixa.
3. Limite a largura do texto para a linha não ficar longa demais.
4. Deixe imagens e vídeos com max-width 100%.
5. Estique a janela devagar e anote onde o layout começa a sobrar.
6. Crie uma media query com min-width nesse ponto e abra as colunas.
7. Teste no celular de verdade, com zoom e com o teclado.

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

A MDN e o web.dev explicam que, sem essa tag, o navegador do celular desenha a página em cerca de 980 pixels e encolhe tudo. A MDN também avisa: não use user-scalable=no. Bloquear o zoom impede pessoas com baixa visão de ler a página.

* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.6; }
.conteudo { max-width: 70ch; margin-inline: auto; padding: 1rem; }
img, picture, video { max-width: 100%; height: auto; }
h1 { font-size: calc(1.5rem + 2vw); }

.servicos { display: grid; gap: 1rem; }

@media (width >= 40rem) {
  .servicos { grid-template-columns: 1fr 1fr; }
}

@media (width >= 64rem) {
  .servicos { grid-template-columns: 1fr 1fr 1fr; }
}

O web.dev cita a regra clássica de 70 a 80 caracteres por linha para leitura confortável. O max-width em ch segue essa ideia. No título, a MDN recomenda não usar só unidade de viewport, porque o zoom deixa de funcionar. Por isso o calc mistura rem com vw.

Flexbox e Grid: quando usar cada um

A MDN explica que Flexbox e Grid já distribuem o espaço de forma flexível. Você raramente precisa de largura em pixels.

nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.com-lateral { display: grid; gap: 2rem; }
@media (width >= 56rem) { .com-lateral { grid-template-columns: 1fr 3fr; } }

Imagens também pedem cuidado com o peso. O web.dev recomenda informar width e height no HTML para reduzir saltos de layout. Os atributos srcset e sizes entregam um arquivo menor para tela pequena. Para o lado da velocidade, veja sites rápidos com HTML e Cloudflare.

Acessibilidade: o que a WCAG pede

A WCAG é o conjunto de diretrizes de acessibilidade do W3C. A versão 2.2 traz critérios com níveis A, AA e AAA. Três critérios de nível AA conversam direto com o layout responsivo.

O W3C explica que 320 pixels CSS equivalem a uma janela de 1280 pixels com zoom de 400%. Um site mobile first bem feito costuma passar nesse teste sem esforço extra. Tabelas e mapas, que precisam de duas dimensões, ficam fora da exigência.

No contraste, texto grande é o de 18 pontos, ou 14 pontos em negrito. O W3C indica que isso equivale a cerca de 24 pixels e 18,5 pixels. Cinza claro sobre fundo branco costuma reprovar, então meça antes de escolher a paleta.

HTML semântico e navegação por teclado

Acessibilidade começa no HTML, antes do CSS. Tags com significado dizem ao leitor de tela o que é cada parte da página.

<header>
  <nav aria-label="Principal">
    <a href="/">Início</a>
    <a href="/servicos/">Serviços</a>
  </nav>
</header>
<main id="conteudo">
  <h1>Serviços</h1>
  <img src="fachada.webp" alt="Fachada da loja com a placa azul" width="800" height="533">
  <button type="button">Ver horários</button>
</main>

1. Use um h1 por página e não pule níveis de título.
2. Escreva alt descrevendo a imagem, ou alt vazio se ela for só decoração.
3. Use button para ações e a para links, nunca div clicável.
4. Deixe o foco visível: não apague o outline sem colocar outro estilo no lugar.
5. Navegue o site inteiro com Tab e Enter e confira a ordem.

Como testar antes de publicar

O web.dev cita o Device Mode do Chrome, que simula larguras e mostra as media queries como faixas coloridas. Firefox e Edge têm ferramentas parecidas. Comece pela simulação e termine no aparelho.

Depois, faça três testes que a simulação não cobre. Amplie a página em 400% no computador e veja se surge rolagem para o lado. Navegue só com o teclado. Abra o site num celular real, com internet móvel, e toque em todos os botões.

O web.dev também alerta: não esconda conteúdo só porque ele não cabe na tela pequena. Reorganize em coluna única. Quem acessa pelo celular quer a mesma informação.

Quando um tema pronto resolve melhor

Se você usa WordPress ou um construtor visual, escolher um tema responsivo resolve boa parte do layout. O que nenhum tema faz sozinho é o texto alternativo das fotos, o contraste das cores que você escolheu e a ordem dos títulos. Esses cuidados valem para qualquer ferramenta.

No HTML puro, você controla cada linha e entrega só o CSS que a página usa. O ponto de partida é o passo a passo para criar um site em HTML. O pilar criar sites sem WordPress mostra como esse caminho se encaixa com GitHub e Cloudflare.

Se o seu público compra pelo celular, a resposta sobre m-commerce e mobile first trata do lado das vendas. Os outros guias estão na resposta do Mundo Criação de Sites, e o portal inteiro começa pela resposta.

Não quer fazer sozinho?

A gente cria o seu site em HTML puro, pensado primeiro para o celular, sem cobrar pela criação. A condição é contratar uma hospedagem de sites da HostGator em ciclo anual pelo link do MundoBlá e chamar no WhatsApp. O MundoBlá recebe uma comissão da HostGator quando você contrata pelo link, sem custo extra para você.

Hospedagem e domínio você paga direto à HostGator. O escopo do site é combinado no WhatsApp antes de começar.

Em outros Mundos

O site responsivo é a base técnica, e o Mundo SEO explica como essa base ajuda a página a aparecer na busca do Google.