El 63% del tráfico web global es mobile (StatCounter 2025). Pero el 80% de los diseñadores siguen empezando en Figma con un artboard de 1440px. El resultado: sitios que funcionan en desktop y "aguantan" en móvil.
Mobile-first real: 3 principios 1. **Diseña primero para móvil**, con la limitación de una columna y un dedo. 2. **Escala hacia arriba**, no adaptes hacia abajo. 3. **Prueba en dispositivo real**, no solo en el simulador.
Los errores que delatan un desktop-first - Menús con 8 items que en móvil colapsan en hamburguesa donde nadie los encuentra. - Botones de 32px que en móvil son imposibles de tocar (mínimo 44px según Apple HIG). - Formularios de 3 columnas que en móvil son un scroll interminable. - Grids de 4 productos en desktop que en móvil aparecen de 1 en 1 sin swipe.
Reglas técnicas - **Padding lateral mínimo**: 20–24px en móvil. - **Fuente body**: 16px mínimo, 18px ideal. - **Interlineado**: 1.5x en body. - **Ancho de texto**: 45–75 caracteres por línea. - **Botones táctiles**: 44x44px mínimo.
El uso del viewport `<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">`
El viewport-fit=cover es crítico para diseños que usan el notch/safe area en iPhone.
Test con un pulgar Toma tu móvil con una mano, usa solo el pulgar y navega tu sitio. Si necesitas la otra mano para llegar al menú, para hacer scroll, o para tocar un CTA, el diseño está mal.
R
Rayden Gonzalez
Diseño y construyo sitios web premium para negocios que quieren vender de verdad.