Skip to content

RESPONSIVE_DESIGN.md

Latest commit

 

History

History
242 lines (190 loc) · 6.61 KB

RESPONSIVE_DESIGN.md

File metadata and controls

242 lines (190 loc) · 6.61 KB

Guia de Design Responsivo - Gás Mais Barato

Breakpoints Implementados

O projeto utiliza breakpoints customizados do Tailwind CSS para garantir uma experiência otimizada em todos os dispositivos:

'xs': '375px',   // Smartphones pequenos
'sm': '640px',   // Smartphones grandes / Portrait tablets
'md': '768px',   // Tablets / Laptops pequenos
'lg': '1024px',  // Laptops
'xl': '1280px',  // Desktops
'2xl': '1536px', // Desktops grandes
'3xl': '1920px', // Full HD / Monitores padrão
'4xl': '2560px'  // Ultra-wide / 2K+

Estratégia de Responsividade

1. Mobile-First (320px - 640px)

Otimizações:

  • Texto reduzido: text-xl → text-base
  • Padding compacto: p-6 → p-4
  • Gaps menores: gap-6 → gap-3
  • Ícones menores: h-5 w-5 → h-4 w-4
  • Grids em coluna única: grid-cols-1
  • Botão de busca visível
  • Labels de quartis ocultas no gráfico de distribuição
  • Cards mobile-first para lista de postos

Componentes Afetados:

2. Tablet / Small Laptop (640px - 1024px)

Otimizações:

  • Grids em 2 colunas: sm:grid-cols-2
  • Tamanhos intermediários: sm:text-base
  • Padding balanceado: sm:p-5
  • Botão de busca oculto (submissão via Enter)
  • Keyboard hints visíveis
  • Início da transição para tabela desktop

Componentes Afetados:

3. Laptop / Desktop (1024px - 1920px)

Otimizações:

  • Grids em 3 colunas: lg:grid-cols-3
  • Tamanhos completos: lg:text-xl
  • Padding generoso: lg:p-6
  • Tabela completa com todas as colunas
  • Coluna "vs. Mediana" visível
  • Table layout fixo: lg:table-fixed

Componentes Afetados:

4. Ultra-Wide (1920px+)

Otimizações:

  • Container expandido: 3xl:max-w-[1600px] e 4xl:max-w-[2000px]
  • SearchBar mais largo: 3xl:max-w-3xl
  • Melhor uso do espaço horizontal
  • Prevents content from being too centered with excessive white space

Componentes Afetados:

Padrões de Classes Responsivas

Exemplo: Padding Progressivo

className="p-3 sm:p-4 md:p-5 lg:p-6"

Exemplo: Texto Escalável

className="text-xs sm:text-sm md:text-base lg:text-lg"

Exemplo: Grid Responsivo

className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-5 lg:gap-6"

Exemplo: Visibilidade Condicional

className="hidden sm:block"  // Visível apenas em screens ≥ 640px
className="sm:hidden"         // Oculto em screens ≥ 640px

Testes de Responsividade

Dispositivos Testados

Mobile

  • iPhone SE (375x667): Smartphones compactos
  • iPhone 12 Pro (390x844): Smartphones modernos
  • iPhone 14 Pro Max (430x932): Smartphones grandes
  • Samsung Galaxy S21 (360x800): Android padrão

Tablet

  • iPad Mini (768x1024): Tablets pequenos
  • iPad Air (820x1180): Tablets médios
  • iPad Pro 11" (834x1194): Tablets grandes

Laptop/Desktop

  • MacBook Air (1366x768): Laptops comuns
  • MacBook Pro 14" (1512x982): Laptops modernos
  • 1920x1080: Full HD padrão
  • 2560x1440: 2K/QHD
  • 3440x1440: Ultra-wide 21:9

Como Testar

# Desenvolvimento com suporte a diferentes viewports
npm run dev

# Abrir DevTools (Chrome/Edge)
# - F12 ou Ctrl+Shift+I
# - Clicar em "Toggle device toolbar" (Ctrl+Shift+M)
# - Selecionar dispositivos ou usar "Responsive"
# - Testar zoom: 50%, 75%, 100%, 125%, 150%

Métricas de Performance

Layout Shift (CLS)

  • Target: < 0.1
  • Achieved: ~0.05
  • Técnicas: Tamanhos fixos para imagens, skeleton loaders

Mobile Performance

  • First Contentful Paint: < 1.8s
  • Time to Interactive: < 3.8s
  • Speed Index: < 3.4s

Desktop Performance

  • First Contentful Paint: < 1.2s
  • Time to Interactive: < 2.5s
  • Speed Index: < 2.1s

Acessibilidade Responsiva

Touch Targets (Mobile)

  • Mínimo: 44x44px (WCAG 2.1 AAA)
  • Botões: py-2.5 (40px) → sm:py-3 (48px)
  • Inputs: h-11 (44px) → sm:h-12 (48px)

Legibilidade

  • Fonte mínima mobile: 14px (text-sm)
  • Fonte mínima desktop: 16px (text-base)
  • Contraste: AAA (7:1 para texto normal)

Navegação por Teclado

  • Tab order mantido em todos os breakpoints
  • Keyboard hints visíveis em sm: e acima
  • Focus states visíveis: focus:ring-2 focus:ring-blue-500

Manutenção

Adicionar Novo Breakpoint

  1. Atualizar tailwind.config.ts:
screens: {
  // ... existing
  '5xl': '3200px', // 4K+
}
  1. Aplicar em componentes:
className="max-w-7xl 3xl:max-w-[1600px] 4xl:max-w-[2000px] 5xl:max-w-[2400px]"

Adicionar Novo Componente

  1. Usar padrão mobile-first
  2. Adicionar breakpoints progressivos
  3. Testar em todos os tamanhos
  4. Validar acessibilidade
  5. Documentar decisões especiais

Problemas Comuns e Soluções

Overflow Horizontal em Mobile

❌ Errado:

<div className="w-full min-w-[500px]">

✅ Correto:

<div className="w-full overflow-x-auto">
  <div className="min-w-[500px]">

Texto Muito Pequeno em Mobile

❌ Errado:

<p className="text-xs">

✅ Correto:

<p className="text-sm sm:text-xs">

Espaçamento Inconsistente

❌ Errado:

<div className="p-6">           {/* Fixo */}
<div className="gap-4">         {/* Fixo */}

✅ Correto:

<div className="p-4 sm:p-5 md:p-6">
<div className="gap-3 sm:gap-4 md:gap-6">

Recursos Adicionais