Filosofía mobile-first
Mobile-first NO es "responsive". Es diseñar primero para 360px de ancho y agregar features para pantallas más grandes. Es priorizar contenido sobre adorno y velocidad sobre fanfarria.
Checklist de tipografía
- Body: 16px mínimo. Mejor 17–18px.
- H1: 28–40px en móvil con
clamp(). - Line-height 1.5–1.7 en cuerpo de texto.
- Max-width de párrafo: 64ch.
- Fuentes con
font-display: swapy máximo 2 weights.
Checklist de layout
- Diseñar la pantalla móvil primero, en Figma o directamente en código.
- Padding horizontal mínimo 16–20px.
- Áreas táctiles ≥44×44px (Apple HIG).
- Stickys mínimos: solo header. Evita footer sticky.
- Grid con
auto-fiten lugar de breakpoints fijos para componentes flexibles.
Checklist de performance
- Imágenes WebP/AVIF con
srcset. - Lazy loading nativo (
loading="lazy"). - CSS crítico inline para above-the-fold.
- JS deferred o async.
- Bundle <100KB para la primera carga.
Checklist de accesibilidad
- Contraste mínimo 4.5:1 para texto normal.
- Focus visible siempre.
- Etiquetas y aria-labels en botones de icono.
- Navegación por teclado al 100%.
- Soporte
prefers-reduced-motion.
Checklist de conversión
- CTA principal arriba del fold.
- Click-to-call y click-to-WhatsApp visibles.
- Formularios con teclados específicos (tel, email).
- Auto-fill optimizado con
autocomplete. - Confirmaciones claras post-envío.
¿Necesitas un sitio profesional mobile-first? Cotiza con Grupo Gurú.