Design Responsivo: Por que sua landing page cai em pedaços no celular de alguém

Você lançou sua página. Se parece ótima em seu MacBook de 14". Depois você abriu em seu celular e o botão de CTA foi cortado. Depois um amigo a abriu em um pequeno celular Android e o texto hero sobrepôs a navegação.

Agora multiplique: iPhones, foldables, monitores ultrawide, iPads em landscape, mid-range Androids. Seus visitantes não estão no seu hardware. Se sua página funciona apenas na tela aonde você a construiu, você está perdendo o resto.

Isto é aonde design responsivo conserta. E aonde a maioria dos builders tropeça.

O que design responsivo realmente é

Design responsivo significa seu layout se adapta à tela, não ao contrário. Um codebase, grids fluidos e breakpoints que remodelam a página conforme o viewport muda.

Pense nisso como água, ela toma a forma de tudo que você a despeja. Mesmo conteúdo, containers diferentes.

"Design responsivo não é apenas sobre tamanhos de tela, é sobre desenho para flexibilidade." Ethan Marcotte

O ponto não é perfeitar três telas específicas. É estabelecer regras que deixam o conteúdo viver confortavelmente em qualquer lugar.

Por que isto importa em uma landing page

A maioria do seu tráfego está em mobile. Se sua página quebra lá, seu launch está morto antes de começar.

Conversão

Um visitante no ônibus em seu celular bate um hero aonde o CTA está below the fold ou fora da tela. Eles saem. Você nunca fica sabendo.

SEO

Google indexa seu site mobile, não o desktop. Se mobile está faltando conteúdo ou difícil de navegar, seus rankings caem.

Prova de futuro

Foldables, aspect ratios estranhos, smart watches. Há sempre outro dispositivo. Construir regras flexíveis em vez de layouts pixel-perfeitos significa você não redesenha toda vez que um novo celular é lançado.

Acessibilidade

Alguns visitantes zoomam 200-400%. Uma página realmente responsiva refaz o reflow; uma rígida quebra horizontalmente e fica inutilizável.

Como usar isto em sua página

É menos sobre "desenhar três layouts" e mais sobre pensar em sistemas.

1. Comece do mobile

Mobile-first significa desenhar para a tela menor primeiro. Por quê? Force você a cortar qualquer coisa que não importa. Com espaço real limitado, cada elemento tem que ganhar seu lugar.

Em Figma:

• Construa para pelo menos três breakpoints:
  • Mobile: 320px - 480px
  • Tablet: 768px - 1024px
  • Desktop: 1024px+
• Use-as como checkpoints, não designs separados.

2. Evite larguras em pixel fixas

A forma mais rápida de quebrar um layout: width: 1200px. Use percentagens, vw, vh, rem em vez.

Em Figma, incline-se em Auto Layout com "Fill Container." Seus elementos esticam e encolhem com o frame pai. Isto simula como flexbox e CSS grid realmente funcionam.

Para a estrutura subjacente, veja O Foundation of Design: Grids.

3. Estabeleça restrições de frame

Restrições dizem a Figma como layers se comportam quando o pai redimensiona:

• Scale: cresce proporcionalmente.
• Esquerda e direita: estica com ambas as arestas.
• Centro: fica preso ao meio.

Estes conseguem você um botão que prende ao fundo de uma tela de celular, ou uma imagem hero que segura peso visual em um monitor de 27". Para posicionamento, veja Alignment Matters.

4. Teste em um celular real

Não confie no preview de desktop. Alvos de toque se sentem completamente diferentes sob um polegar do que sob um cursor.

• Faça: Abra seu prototype no seu celular real.
• Evite: Redimensionar a janela do browser e chamar de feito.

Jeitos comuns que builders quebram

Shrink-to-fit

• O erro: Escalar o layout desktop pra baixo até se encaixar num celular. Texto minúsculo, botões não-clicáveis.
• O conserto: Reflow. Um layout desktop de 3-colunas vira uma única coluna empilhada em mobile.

Alvos de toque muito pequenos

• O erro: Links móveis e botões colocados muito pertos. Visitantes tocam a coisa errada.
• O conserto: Mínimo 44x44px (Apple) ou 48x48dp (Google). Com espaço em volta deles.

Navegação escondida

• O erro: Esconder nav atrás de um hamburger em desktop só para parecer "minimalista."
• O conserto: Em telas maiores, mantenha nav primária visível. O hamburger é um compromisso mobile, não uma escolha de design limpa.

Imagens oversized

• O erro: Carregar um hero de 5MB em um celular 3G. Página nunca pinta.
• O conserto: Use srcset então dispositivos menores pegam arquivos menores.

Como produtos reais lidam

Instagram

Em mobile, um feed de coluna única maximizando tamanho de foto. Em desktop, o mesmo feed centralizado com nav à esquerda e sugestões à direita. Mesmo conteúdo, containers diferentes. Isto é exatamente o que responsivo significa.

Spotify

Mobile prioriza controles de thumb-zone. Desktop e tablet puxam em album art, queue, e metadata conforme espaço permite. O sentimento de brand fica o mesmo em celular, tablet, desktop, e até displays de carro.

Princípios relacionados

Responsiveness é uma peça de layout. Estes pareiam com:

O Foundation of Design: Grids

Como estabelecer a estrutura subjacente que seu layout depende.

Recursos e leitura adicional

Am I Responsive?

Deixe sua URL e veja como sua página renderiza em quatro tamanhos de dispositivo de uma vez.

Responsify

Um plugin Figma para testar designs em uma gama de tamanhos de dispositivo em um clique.

Perguntas frequentes