PRINCÍPIOS MOBILE-FIRST
TOQUE PRIMEIRO
Áreas de toque mínimas de 48×48px. Botões grandes e fáceis de pressionar com o polegar.
IMAGEM EM DESTAQUE
O produto é a estrela. Fotos grandes, texto mínimo. O visual vende antes das palavras.
CHECKOUT RÁPIDO
Máximo 3 etapas do produto ao pagamento. Pix, cartão e parcelamento em destaque.
FLUIDO E RÁPIDO
Imagens otimizadas (WebP). Carregamento progressivo. Skeleton screens no lugar de spinners.
TELAS MOBILE
HOME
FEITO PRA
QUEM NÃO
PRECISA EXPLICAR
COLEÇÃO 2025
VER COLEÇÃO COMPLETA
PRODUTO
RF Classic Couro
Patch couro · Aba curva · Ajuste metálico
R$ 89,90
COMPRAR AGORA
FALAR NO WHATSAPP
BREAKPOINTS
| Breakpoint | Valor | Comportamento |
|---|---|---|
| sm (default) | 0 – 767px | 1 coluna. Menu hambúrguer. Hero full-height. Produtos em grid 1 col. |
| md | 768px – 1023px | 2 colunas. Nav links visíveis. Produtos em grid 2 col. |
| lg | 1024px – 1279px | 3 colunas. Layout desktop completo. Lifestyle grid. |
| xl | 1280px+ | Container máximo 1280px. Tipografia em escala máxima. |
IMAGENS E PERFORMANCE
FORMATO
Use WebP para todas as imagens de produto e lifestyle. Fallback JPG. Tamanho máximo: 800KB por imagem.
LAZY LOADING
Imagens abaixo do fold com loading="lazy". Hero image com preload prioritário.
SKELETON SCREEN
Nunca use spinner. Use skeleton com gradiente shimmer nas cores da paleta (#E8E5DF → #F5F3EF).