Ecossistema YveTech · Web · Por dentro

Responsivo de verdade

"Responsivo" virou palavra de proposta comercial. Na prática significa uma coisa só: a mesma página funcionando bem no aparelho modesto, com internet ruim, de quem está na rua — porque é assim que boa parte da sua audiência chega.

O teste que quase ninguém faz é o único que importa

Encolher a janela do navegador não é testar no celular. É testar no seu computador, com a sua internet.

A conferência típica de responsividade é arrastar a borda do navegador até ficar estreito. Isso mostra se o layout se reorganiza — e esconde todo o resto: o processador do telefone de entrada, a rede oscilando, o dedo que erra o botão de trinta pixels, a tela sob sol forte, a barra do navegador que come altura.

Nosso critério é outro. Cada entrega é aberta em aparelhos reais, incluindo um modelo antigo de propósito, com a rede limitada para simular 4G ruim. Medimos no pior caso plausível, não no melhor: se a página abre bem ali, abre bem em qualquer lugar. O inverso nunca é verdade.

Também conferimos o que não é largura: navegação inteira por teclado, foco visível, leitor de tela anunciando os elementos na ordem certa, área de toque com tamanho mínimo, contraste que sobrevive à luz do sol. Boa parte disso é o mesmo cuidado que faz o site ser bem entendido pelo buscador — acessibilidade e alcance andam juntos.

Se o site só foi testado no computador de quem o construiu, ele foi testado no único aparelho que com certeza não é o do seu cliente.

O que entra no teste de cada entrega

Seis conferências que rodam antes de qualquer página ser considerada pronta.

Aparelhos reais

Telefone de entrada e tablet, além dos modelos recentes. O aparelho antigo é o que revela o excesso de código.

Rede limitada

Medição com a conexão reduzida a 4G instável, que é a realidade de quem acessa fora de casa.

Teclado e leitor de tela

Toda a jornada percorrida sem mouse, com foco visível e ordem de leitura conferida.

Área de toque

Botões e links com tamanho e espaçamento suficientes para o dedo, não para o cursor.

Navegadores diferentes

Chrome, Safari, Firefox e Edge — o Safari do iPhone é o que mais surpreende.

Nota registrada

O resultado de cada medição fica gravado, para comparar entrega a entrega em vez de confiar na impressão.

Como a conferência se parece

A mesma página em três larguras, com a medição rodando ao lado.

Como o teste roda

A cada entrega, e de novo na véspera da publicação.

Conferência automática

Uma bateria roda a cada versão: desempenho, acessibilidade, boas práticas e SEO técnico, com o resultado guardado para comparação.

Aparelhos em mão

As telas principais abertas em aparelhos físicos, incluindo um modelo propositalmente antigo e um iPhone — o Safari tem particularidades que só aparecem nele.

Jornada sem mouse

A jornada de contato percorrida inteira pelo teclado e com leitor de tela, para confirmar que ninguém fica de fora.

Aceite registrado

Nenhuma página é considerada pronta com medida abaixo do alvo combinado. Quando há exceção justificada, ela fica escrita.

O que costuma quebrar só no celular

Problemas que nunca aparecem na janela redimensionada do desktop.

  • Tabela larga demais — estoura a tela e obriga a rolagem lateral.
  • Menu que não fecha — abre sobre o conteúdo e prende o visitante.
  • Campo que some sob o teclado — o teclado sobe e cobre o botão de enviar.
  • Imagem enorme no 4G — a primeira tela leva segundos para aparecer.

O que consideramos aceite

Critérios objetivos, medidos e registrados — não impressão.

  • Carregamento no celular — até 2,5 segundos para o elemento principal, em rede lenta.
  • Sem salto de layout — nada muda de lugar depois que a página começou a aparecer.
  • Jornada por teclado — do primeiro link ao envio do formulário, sem mouse.
  • Toque confortável — alvos com tamanho e espaçamento mínimos respeitados.

Como cada largura é conferida

Quatro faixas, com um aparelho de referência e o que olhamos especificamente em cada uma.

Faixa de tela Referência de teste O que conferimos ali
Celular pequeno (até 400 px) aparelho de entrada, alguns anos de uso primeira tela, tamanho do texto, botão alcançável com o polegar
Celular comum (400 a 600 px) iPhone e Android recentes menu, formulário sob o teclado, rolagem sem travar
Tablet (600 a 1024 px) iPad em pé e deitado a faixa que mais quebra: nem celular, nem desktop
Desktop (acima de 1024 px) notebook e monitor grande largura máxima do texto, imagens sem esticar, hierarquia mantida

Compromissos desta etapa

O que combinamos antes de começar — e cobramos de nós mesmos durante o projeto.

Rede lentaa medição de referência é o pior caso plausível
4 faixasde tela conferidas em toda entrega
Sem mousejornada de contato percorrida por teclado
Registradocada medição guardada para comparar no tempo

Perguntas frequentes sobre responsivo de verdade

As dúvidas que mais aparecem nesta etapa. Sobre prazo, forma de cobrança e contrato, veja as perguntas frequentes da YveTech.

Meu público é todo corporativo e acessa do computador. Isso vale para mim?

Vale, e costuma ser meia verdade — mesmo em vendas para empresas, boa parte da primeira pesquisa acontece no celular, fora do horário comercial. Além disso, o que o teste em aparelho modesto revela é excesso de código, e isso pesa no desktop também. O que muda é a prioridade, não a necessidade.

Vocês testam em quantos aparelhos?

Em um conjunto pequeno e escolhido para cobrir os extremos: um Android de entrada com alguns anos, um Android recente, um iPhone, um iPad e dois tamanhos de monitor. Cobrir modelo por modelo do mercado é impossível e desnecessário — o que pega problema é o extremo, não a variedade.

Acessibilidade não é só para site de governo?

É obrigação legal em alguns casos e boa prática em todos. Na prática comercial ela se paga: legenda, contraste e navegação por teclado ajudam também quem está no sol, com o telefone quase sem bateria ou usando uma mão só. E o mesmo cuidado melhora como o buscador entende a página.

Vocês consertam a responsividade de um site que já existe?

Fazemos, e começa por uma auditoria: medimos o site atual nas quatro faixas de tela, listamos o que quebra e estimamos o esforço de cada correção. Em muitos casos, um punhado de ajustes resolve a maior parte do problema sem refazer nada.

Quer saber como o seu site se comporta no celular do seu cliente?

Medimos o site atual em aparelho e rede reais e devolvemos a lista do que quebra. Conte o seu cenário e retornamos em até 1 dia útil.