1. Escolha o trabalho da página antes de escolher o layout
Comece por páginas que carregam uma tarefa do cliente ou do negócio: páginas de serviço, páginas de produto, formulários de geração de leads, reservas, entrada de conta, carrinho e ajuda. Escreva uma declaração de conclusão para cada uma, por exemplo: “Um visitante de primeira vez consegue entender este serviço, ver provas relevantes e solicitar uma ligação.” Se a página tiver mais de um trabalho, decida qual aparece primeiro.
Liste seu conteúdo como essencial, de apoio ou opcional. Essencial não significa breve; um visitante pode precisar de contexto de preço, elegibilidade, detalhe de entrega ou informação de comparação. Dê a esse material uma rota clara no layout estreito. O Google recomenda conteúdo primário equivalente em mobile e desktop, permitindo uma apresentação diferente, como abas ou accordions.
Em uma largura estreita, um colega deve ser capaz de dizer o que a página oferece, quem ela ajuda e a próxima ação significativa.
2. Faça a linha de base estreita ser completa
Comece com um caminho funcional em coluna única em vez de reduzir um layout de desktop. Use contêineres flexíveis, deixe o texto quebrar linhas e inclua uma configuração de viewport que permita ao navegador dimensionar o layout para a largura do dispositivo. Não impeça o zoom. Verifique se menus, avisos, imagens, embeds e erros de formulários permanecem dentro da viewport; rolagem horizontal de página não intencional normalmente é um defeito.
Use 320 CSS pixels como uma verificação exigente de reflow para leitura ordinária e conteúdo de tarefa. A WCAG 2.2 descreve apresentar conteúdo vertical nessa largura sem perda de informação ou funcionalidade ou rolagem bidimensional. Um mapa, gráfico ou tabela de dados pode precisar de sua própria região de rolagem, mas isso não justifica tornar a página ao redor rolável horizontalmente.
Ajuste imagens ao seu contêiner e forneça dimensões para que o navegador possa reservar espaço antes do carregamento.
3. Adicione aprimoramentos sem tornar o caminho base frágil
Progressive enhancement significa que conteúdo e funcionalidade essenciais funcionam como linha de base, enquanto navegadores capazes e telas maiores recebem extras. O endereço, detalhes do produto, rótulos de formulário, explicação de preço e caminho de envio não devem depender de animação, hover ou de um script carregado tardiamente. Um layout mais amplo pode adicionar um painel de comparação, navegação persistente ou filtragem mais rica sem tornar a linha de base incompleta.
Peça ao implementador que adicione um breakpoint quando o conteúdo ficar apertado ou desperdiçado, não porque um dispositivo nomeado aparece em uma lista. Um breakpoint é simplesmente onde uma regra de layout muda. Não use layouts estreitos para remover silenciosamente texto de ajuda, termos de política, avaliações, metadados ou detalhes estruturados importantes.
Mostre primeiro uma imagem básica da galeria e a descrição, depois adicione zoom ou controles de swipe quando os scripts estiverem disponíveis.
4. Projete controles para toque, clareza e recuperação
Ergonomia de toque significa projetar para mãos em vez de um ponteiro de mouse preciso. Dê a botões, caixas de seleção, ícones de fechar, seletores de quantidade e opções de formulário tamanho e espaçamento suficientes para reduzir toques errados. Rotule ícones quando seu significado não for óbvio. Não faça do hover a única forma de revelar um preço, submenu, explicação ou ação.
A WCAG 2.2 inclui um critério de nível AA para tamanho mínimo de alvo de pelo menos 24 por 24 CSS pixels para alvos de apontador, com exceções informadas que incluem espaçamento e links inline. Trate isso como referência mínima, não como garantia de conforto. Ações críticas merecem rótulos claros, espaçamento generoso e uma etapa de confirmação reversível. Busque revisão qualificada de acessibilidade para jornadas de alto risco ou reivindicações formais de conformidade.
Mantenha rótulos visíveis, mostre feedback de validação utilizável e retenha valores digitados após um erro.
5. Trate mídia e embeds como parte da jornada do visitante
Decida se cada imagem é informativa, persuasiva ou decorativa. Uma imagem informativa precisa de alternativa textual apropriada e um crop (recorte) para layout estreito que preserve o detalhe necessário. Opções de imagem responsiva deixam que os navegadores escolham um recurso adequado em vez de fazer todo visitante baixar o maior ativo de desktop. Não deixe que uma imagem hero ou vídeo obscureça o propósito da página e a ação primária.
Faça inventário de mapas, chat, vídeo, pagamento, agendamento, consentimento e widgets de avaliação. Em uma tela estreita, verifique seu estado de carregamento, tamanho dos controles, layout limitado e uma rota de fallback prática. Para pagamento, identidade ou fluxos de dados regulados, envolva revisores qualificados de segurança, privacidade e conformidade; testes visuais não são uma avaliação de segurança.
Registre cada componente externo, seu responsável, sua função de negócio e o fallback aprovado caso esteja lento ou quebrado.
6. Teste caminhos de tarefa antes do lançamento e planeje a remediação
Use o modo responsivo do navegador cedo para inspecionar larguras estreita, média e larga. O Chrome Device Mode pode aproximar viewport, toque, orientação, rede e condições de CPU, mas o Chrome documenta isso como aproximação em vez de execução em dispositivo real. Complete caminhos críticos em telefones reais e navegadores relevantes quando puder.
Teste uma tarefa, não apenas uma captura de tela: carregamento a frio, navegação, envio de formulário inválido e válido, mudança de orientação, zoom e retorno de uma tela de terceiros. Registre a URL, navegador ou dispositivo, tarefa, resultado esperado, responsável e decisão de rollback. Para alterações maiores de template, checkout, CMS ou dependência, faça o lançamento em stage e prepare-se para restaurar o caminho anterior em vez de improvisar sob pressão.
Aprove apenas depois que a tarefa crítica funcionar, os controles forem utilizáveis, não houver rolagem horizontal de página e dependências-chave tiverem um fallback.