Mais da metade do tráfego web é mobile. Sites que não funcionam em celular perdem usuários. Este guia apresenta como criar experiências responsivas que se adaptam a qualquer tela.
O Que É Design Responsivo
Definição
Design que adapta a diferentes tamanhos de tela.
Princípio
Uma codebase, múltiplos dispositivos.
Fluid
Layouts que fluem e adaptam.
Por Que Responsivo
Mobile Traffic
Maioria dos acessos são mobile.
SEO
Google prioriza mobile-first.
UX
Experiência unificada.
Manutenção
Uma versão, não múltiplas.
Mobile-First
Abordagem
Desenhe para mobile primeiro, expanda para desktop.
Por Que
Mobile é mais restritivo. Força priorização.
CSS
Min-width media queries.
Técnicas CSS
Media Queries
@media (min-width: 768px) { }.
Flexbox
Layout flexível, uma dimensão.
CSS Grid
Layout em duas dimensões.
Fluid Typography
clamp() para fontes que escalam.
Container Queries
Baseado no container, não viewport.
Breakpoints
Comuns
320px, 480px, 768px, 1024px, 1280px.
Por Conteúdo
Defina onde layout quebra naturalmente.
Não por Device
Devices mudam, breakpoints por conteúdo duram.
Layout Responsivo
Fluid Grids
Proporções, não pixels fixos.
Flexbox
Direção muda: row → column.
Grid Auto-fit
Colunas que se ajustam.
Stack Mobile
Empilhe elementos em mobile.
Tipografia Responsiva
Fluid Type
font-size: clamp(1rem, 2vw, 2rem).
Line Length
Limite caracteres por linha.
Hierarchy
Mantenha em todos tamanhos.
Imagens Responsivas
srcset
Múltiplas resoluções.
sizes
Tamanho em diferentes viewports.
picture
Diferentes imagens por contexto.
Lazy Loading
loading="lazy".
Art Direction
Recorte diferente para mobile.
Navigation
Desktop
Menu horizontal, dropdown.
Mobile
Hamburger, slide-out.
Toggle
JS para abrir/fechar.
Touch Targets
44px mínimo.
Touch vs Click
Touch Targets
Maiores para dedos.
Hover States
Não dependam de hover.
Gestures
Swipe, pinch em contextos apropriados.
Forms Responsivos
Inputs Grandes
Fáceis de tocar.
Labels Claras
Sempre visíveis.
Keyboard Types
type="email", type="tel".
Autofill
Facilite preenchimento.
Performance Mobile
Weight
Menos bytes para mobile.
Critical CSS
CSS inline para above-the-fold.
JS Defer
Não bloqueie render.
Images
Tamanhos apropriados.
Testing
Browser DevTools
Simule dispositivos.
Real Devices
Teste em celulares reais.
BrowserStack
Cloud testing.
Multiple Orientations
Portrait e landscape.
Frameworks CSS
Bootstrap
Grid system robusto.
Tailwind
Utility classes responsivas.
Bulma
Flexbox based.
Custom
Pode ser mais leve.
Erros Comuns
Desktop First
Mais difícil adaptar para baixo.
Fixed Widths
Layouts que não adaptam.
Ignorar Testes
Não testar em real devices.
Text Unreadable
Fontes muito pequenas.
Touch Targets Pequenos
Difícil de clicar.
Ferramentas
Chrome DevTools
Device mode.
Responsively
Múltiplas telas simultaneamente.
Polypane
Browser para devs.
Conclusão
Design responsivo é requisito básico. Adote mobile-first, use CSS moderno e teste em dispositivos reais. O resultado são sites que funcionam para todos.
FAQs
1) Mobile-first é obrigatório? Recomendado. Facilita o processo e prioriza mobile.
2) Quantos breakpoints usar? 3-5. Baseado no conteúdo, não em devices específicos.
3) Flexbox ou Grid? Ambos. Flexbox para uma dimensão, Grid para duas.
4) Framework ou CSS custom? Para projetos pequenos, custom pode ser mais leve.
5) Como testar sem devices? DevTools, BrowserStack. Mas teste real devices importantes.