Grade de colunas
A régua invisível que alinha tudo. Cada bloco declara quantas colunas ocupa em cada faixa de largura.
Ecossistema YveTech · Web · Por dentro
Layout adaptativo
Não existe versão mobile e versão desktop. Existe um projeto só, construído sobre uma grade, que se reorganiza conforme o espaço disponível — mantendo a mesma ordem de importância em qualquer largura.
Um projeto, não dois sites
Manter duas versões separadas dobra o custo de cada alteração e garante que uma delas vai ficar desatualizada.
Houve um tempo em que se fazia um site separado para o celular, num endereço à parte. Quem herdou esse arranjo conhece o resultado: toda mudança precisava ser feita duas vezes, e a segunda vez sempre demorava mais — até que as duas versões passaram a mostrar preços diferentes.
O layout adaptativo resolve isso com uma ideia simples: o conteúdo é o mesmo, o que muda é o arranjo. Uma grade de colunas serve de régua invisível, e cada bloco declara quantas colunas ocupa em cada faixa de largura. Três colunas viram duas, depois uma. Nada some, nada é escondido — o que se mantém de pé é a ordem de importância.
Os pontos de quebra também não são copiados de uma lista de aparelhos. São escolhidos olhando o conteúdo: a largura em que a linha de texto fica longa demais para ler com conforto, a largura em que o cartão fica estreito demais para o preço caber. Aparelho novo aparece todo ano; a legibilidade do texto continua a mesma.
Esconder blocos no celular é o atalho mais comum e o mais caro: o visitante que decidiu no telefone não viu o argumento que fecharia a venda.
As peças do layout adaptativo
Seis decisões técnicas que fazem um projeto só atender bem qualquer tela.
Pontos de quebra pelo conteúdo
A largura em que o layout muda é escolhida onde o conteúdo pede — não pelo tamanho do aparelho da moda.
Tipografia fluida
O texto cresce e encolhe com a tela dentro de limites definidos, mantendo a linha em tamanho legível.
Imagens por tamanho de tela
O navegador baixa a versão adequada à largura. O celular não paga pela imagem do monitor grande.
Componentes que se reorganizam
Tabela vira lista, menu vira gaveta, colunas viram pilha. A informação continua toda ali.
Ordem preservada
O que é mais importante continua vindo antes, inclusive para quem usa leitor de tela.
A grade em funcionamento
O mesmo conteúdo mudando de arranjo conforme a largura disponível.
Como o layout é construído
A sequência que evita o remendo de adaptar o desktop para o celular depois.
Primeiro a tela estreita
Desenhamos e construímos partindo do celular. Priorizar com pouco espaço obriga a decidir o que realmente importa — o caminho inverso adapta por corte.
Grade e escala
Definimos a grade de colunas, os espaçamentos e a escala tipográfica. A partir daí, nenhuma medida é escolhida no olho.
Componentes com regra
Cada componente recebe a regra de como se comporta em cada faixa: quantas colunas ocupa, o que empilha, o que vira gaveta.
Conferência nas quatro faixas
A página é percorrida nas quatro faixas de largura com o conteúdo real, incluindo os casos extremos: título muito longo, preço com muitos dígitos, lista vazia.
Erros que o layout adaptativo evita
Cada um deles aparece em site que tratou o celular como adaptação de última hora.
- Conteúdo escondido no celular — o argumento de venda some justamente para quem decide no telefone.
- Texto minúsculo para caber — reduzir a fonte não resolve espaço, só afasta o leitor.
- Tabela com rolagem lateral — informação que existe, mas ninguém encontra.
- Duas versões para manter — toda alteração feita duas vezes, e uma delas esquecida.
O que a grade dá de brinde
Benefícios que aparecem meses depois, quando o site precisa crescer.
- Página nova sem design novo — os componentes já existem e já sabem se comportar.
- Consistência entre páginas — o mesmo alinhamento e o mesmo ritmo do começo ao fim.
- Manutenção mais barata — a alteração é feita uma vez e vale em todas as larguras.
- Menos peso na página — sem código duplicado para versões separadas.
Como o conteúdo se comporta em cada faixa
Exemplo de uma página de serviço com seis blocos. As colunas mudam; a ordem de importância, não.
| Faixa de largura | Arranjo dos blocos | O que muda na navegação |
|---|---|---|
| Até 600 px | uma coluna, tudo empilhado | menu em gaveta e chamada principal ao alcance do polegar |
| 600 a 900 px | duas colunas nos cartões | menu ainda em gaveta, com espaço para o telefone visível |
| 900 a 1200 px | três colunas, a barra lateral aparece | menu horizontal completo |
| Acima de 1200 px | três colunas com margens generosas | largura do texto limitada para a linha continuar legível |
Compromissos desta etapa
O que combinamos antes de começar — e cobramos de nós mesmos durante o projeto.
1 projetouma base atendendo todas as telas
4 faixasde largura com comportamento definido
Nada escondidoo conteúdo é o mesmo em qualquer tela
Mobile primeiroa construção começa pela tela estreita
Perguntas frequentes sobre layout adaptativo
As dúvidas que mais aparecem nesta etapa. Sobre prazo, forma de cobrança e contrato, veja as perguntas frequentes da YveTech.
Qual a diferença entre responsivo e adaptativo?
Na prática do mercado os termos se misturam. O que fazemos é um layout fluido com pontos de quebra: ele se ajusta continuamente ao espaço e, em larguras determinadas, muda de arranjo. O que não fazemos é manter versões separadas por aparelho — isso dobra o custo de manutenção e sempre desatualiza uma delas.
Posso esconder algumas coisas no celular para simplificar?
Pode, mas raramente deveria. Se um bloco não é importante o suficiente para o celular, provavelmente não é importante no desktop também — e a resposta certa é cortar dos dois. Esconder só no telefone significa deixar de mostrar o argumento justamente para a maioria do seu tráfego.
E se o meu site tem tabelas grandes de produtos?
Tabela é o caso mais difícil, e tem solução conhecida: no celular cada linha vira um cartão com rótulo e valor, mantendo tudo visível sem rolagem lateral. Quando a tabela é realmente extensa, acrescentamos busca e filtro em vez de obrigar a percorrer.
Isso funciona em telas muito grandes também?
Funciona, e exige cuidado no sentido oposto: em monitor grande, deixar o texto ocupar a largura inteira torna a leitura cansativa. Por isso a grade limita a largura da coluna de texto e usa o espaço extra para respiro e imagem, em vez de esticar tudo.
Seu site quebra no tablet ou no celular?
Conferimos as quatro faixas de largura do site atual e devolvemos a lista do que se reorganiza mal. Conte o seu cenário e retornamos em até 1 dia útil.
Continue explorando
As quatro etapas do método e os três recortes da operação — cada uma com o seu próprio detalhamento.
Criação de SitesVoltar à visão geral da área
Estratégia e conteúdoA jornada de quem compra virando a estrutura do site
Design e protótipoO layout navegável aprovado antes de existir código
Construção e otimizaçãoCódigo enxuto, imagens tratadas e SEO técnico desde o primeiro arquivo
Publicação e evoluçãoA virada de chave e os ajustes guiados pelos primeiros meses
Responsivo de verdadeComo testamos cada entrega em aparelho e rede reais
Ambiente de Criação de SitesDomínio, hospedagem, certificado e backup — tudo no seu nome