320px-414px: La anchura sweet spot de los menús móviles

Cuando un menú QR se carga, lo único que importa es la anchura real en píxeles del teléfono. Un meyhane de 24 mesas en Izmir Konak vio cómo su conversión móvil subía un 38% tras un rediseño mobile-first — el único cambio fue ajustar el diseño con precisión milimétrica al rango 320-414px.

Por qué 320-414px

Según StatCounter 2024, el 72% de los visitantes de menús QR usan dispositivos en este rango: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Las tablets son solo el 12%, y el escritorio el 16%.

Los temas de thMenu siguen un enfoque "mobile-only-priority". Tablet y desktop tienen sus breakpoints, pero toda decisión crítica de UX se evalúa en 375px.

Reglas de diseño

Tres reglas innegociables:

• Tap-targets ≥ 44×44px — Apple HIG y WCAG 2.5.5.
• Padding ≥ 16px — margen interior obligatorio.
• Fuente body ≥ 14px, input ≥ 16px — iOS hace zoom automático bajo 16px.

Errores comunes

El error más común: un menú perfecto en 1200px que produce scroll horizontal en 360px. El editor thMenu incluye un botón "Probar en 320px" para detectarlo antes del deploy.

Solución: layout de tarjetas en una columna, imágenes aspect-ratio: 4/3, barra de filtros sticky. El tiempo en página pasó de 1:42 a 3:18 y el add-to-cart subió 38%.

FAQ

¿Sigue siendo relevante 320px? Sí — iPhone SE y Android antiguos lo usan; ignorarlos cuesta el 5-8% de la facturación.

¿Hace falta diseño separado para tablet? No — Flexbox/Grid se adapta desde 768px.

¿El modo horizontal rompe el diseño? Puede — thMenu reduce el header un 40% en landscape.

¿Te resultó útil? Compártelo.