Site responsivo: confira o que muda quando a tela diminui.

01 /

Prepare a ficha de largura, zoom e tarefa

Escolha uma página de texto, uma página de serviço e o caminho de contato. Registre endereço, data, aparelho e navegador antes de começar. Como roteiro prático, teste larguras de 320, 375, 768 e 1280 pixels CSS, a unidade usada pelo navegador para organizar a página. Esses valores são uma amostra de conferência, não uma lista de todos os aparelhos. Se usar a simulação de tela do navegador, complemente a leitura e o toque em um celular real.

Defina uma tarefa para cada endereço: ler a explicação inteira, abrir uma lista ou chegar ao contato. Anote o que esperava e o que aconteceu, sem escrever apenas que a página ficou ruim. Uma captura da tela com o trecho afetado ajuda a localizar o problema. A documentação da MDN sobre desenho responsivo explica a adaptação a diferentes telas; o seu registro deve mostrar o comportamento observado na página que está sendo examinada.

• Endereço e tarefa que será executada.
• Largura em pixels CSS, orientação e nível de zoom.
• Aparelho, navegador e data da observação.
• Problema encontrado, captura correspondente e resultado da nova conferência.

02 /

Leia o texto até o fim e procure deslocamento lateral

Comece pela largura menor e percorra a página inteira. Observe se precisa arrastar a tela para os lados para terminar uma frase, se uma imagem empurra o texto ou se palavras longas atravessam a borda. Confira também se algum quadro cobre o conteúdo ao rolar. Uma página pode abrir com a primeira tela ajustada e apresentar um corte mais abaixo. Registre o ponto exato e repita a leitura nas demais larguras escolhidas para descobrir quando o problema aparece.

O critério de redistribuição do conteúdo explicado pelo W3C usa 320 pixels CSS de largura para conteúdo com rolagem vertical, com exceções para partes que precisam de duas dimensões, como certos mapas e tabelas. No seu teste, separe uma tabela que exige movimento lateral de um parágrafo comum cortado. Essa referência ajuda a avaliar o comportamento da largura; passar nessa checagem isolada não demonstra conformidade com todos os requisitos de acessibilidade do site.

03 /

Toque nos controles e repita o percurso com o teclado

No celular real, tente abrir cada botão usado na tarefa sem ampliar a tela antes do toque. Veja se controles vizinhos dificultam a escolha e se um elemento fixo encobre o destino. Ao abrir o contato, confirme que o número ou endereço recebido está correto. O teste aqui é de adaptação e uso dos elementos; decidir em qual categoria do menu uma página deve ficar é outra análise, que não se resolve apenas diminuindo a largura da tela.

No computador, use Tab para percorrer os elementos interativos e observe a indicação visual do item selecionado. Abra o menu, avance e volte sem usar o mouse. Se houver campos, confira se rótulos e mensagens continuam legíveis quando algo dá errado. Anote se o foco some, se o conteúdo fica coberto ou se uma ação não pode ser concluída. Esses registros descrevem obstáculos concretos para corrigir e precisam ser repetidos depois da mudança, nos tamanhos em que apareceram.

04 /

Amplie, gire a tela e compare as informações disponíveis

Aumente o zoom do navegador e registre a largura usada junto do nível de ampliação. O W3C explica a redistribuição do conteúdo com a referência de 320 pixels CSS; partir de 1280 pixels CSS com zoom de 400% corresponde a essa largura. Use essa relação para preparar a observação de um texto comum, sem declarar conformidade do site por uma checagem. No celular, repita a tarefa nas orientações vertical e horizontal e anote o que ficou cortado ou coberto.

A documentação oficial do Google sobre indexação com prioridade para dispositivos móveis informa que a versão móvel do conteúdo é usada para indexação e classificação. Por isso, confira se explicações importantes continuam disponíveis quando o desenho muda. Adaptar colunas não deve significar retirar o conteúdo principal do visitante no celular. Essa orientação não transforma o teste visual em promessa de posição: ela ajuda a conferir se a informação permanece acessível nos formatos apresentados.

05 /

Repita a largura e o zoom depois da correção

Organize os achados pelo efeito observado: uma ação impedida, uma informação cortada ou uma dificuldade de leitura. Encaminhe o registro a quem altera o site ou use a ficha para orientar seus próprios ajustes. Depois da correção, execute novamente a tarefa na largura original e em uma largura próxima. Guarde as capturas reais de antes e depois com a data. Um ajuste em uma página pode afetar outras que usam o mesmo componente, então confira também esses destinos relacionados.

Para discutir responsividade com a equipe da SearchUp, leve ao diagnóstico grátis uma página e a condição em que a tarefa falha: largura, zoom, orientação, aparelho e navegador. Descreva se o texto exigiu movimento lateral ou se um controle ficou coberto. Ao receber uma versão corrigida, repita essa condição antes de ampliar a conferência para outras larguras. A ficha precisa permitir reproduzir a dificuldade de adaptação, em vez de registrar somente uma impressão sobre a aparência no celular.

06 /

Demonstração: monte uma ficha de redistribuição do texto

Use a Empresa Exemplo e dominio-exemplo.com.br somente como referências fictícias para planejar a conferência. Escolha no papel uma página com parágrafo comum e uma tabela de dados, depois anote a tarefa de ler o conteúdo numa largura de 320 pixels CSS. A tabela abaixo deixa o comportamento como a verificar, pois nenhum site foi aberto neste exercício. A distinção pretendida é concreta: o parágrafo deve ser avaliado pela redistribuição da leitura; uma tabela pode exigir análise da exceção para conteúdo em duas dimensões.

Exemplo fictício para orientar a conferência; não registra testes realizados nem resultados de cliente.