Mobile-first: por qué se diseña desde 375px

Más de la mitad del tráfico web mundial es móvil — y en Latinoamérica, aún más. Este módulo te enseña a construir para TODAS las pantallas, y empieza por la decisión de orden que lo cambia todo: diseñar primero para 375px y crecer, nunca al revés. No es una moda: es la dirección en la que el CSS trabaja a tu favor.

Desktop-first vs mobile-first: la dirección importa

Ambos enfoques usan las mismas herramientas; la diferencia es QUÉ escribes como base y qué como excepción:

• Desktop-first (el viejo camino): la base es la pantalla grande, y con media queries vas QUITANDO — columnas, tamaños, elementos — hacia abajo. Restar es difícil: terminas sobrescribiendo media página.
• Mobile-first: la base es la versión de 375px — una columna, tipografía legible, lo esencial — y con media queries vas AGREGANDO cuando hay espacio. Sumar es fácil: cada breakpoint solo declara lo que CAMBIA.

Hay una razón técnica además de la mental: en CSS, la base (sin media query) aplica SIEMPRE, y las media queries de min-width van sumando por encima en orden natural — la cascada fluye en la misma dirección que tu diseño. Y una de negocio: si algo se sacrifica, que sea la decoración de desktop, no el contenido que ve la mayoría.

La etiqueta que hace posible todo

La conociste en el módulo 2; ahora entiéndela:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sin ella, el móvil finge ser una pantalla de 980px y ENCOGE tu página como una foto (texto microscópico, el web de 2008). Con ella, el viewport mide lo que el dispositivo mide (width=device-width) sin zoom inicial (initial-scale=1) — y tu CSS responsive por fin tiene sobre qué actuar. Jamás agregues maximum-scale=1 o user-scalable=no: bloquear el zoom del usuario es un fallo de accesibilidad directo.

El flujo de trabajo

1. DevTools en modo dispositivo (Ctrl+Shift+M): elige un perfil de ~375px (iPhone SE es el clásico). AHÍ es donde maquetas primero.
2. Construye la versión de una columna completa y usable: navegación, contenido, formularios — todo debe funcionar SIN media queries.
3. Estira la ventana hasta que el diseño "pida" espacio (una línea de texto demasiado larga, aire desperdiciado): ese punto natural será tu breakpoint — tema de la próxima lección.

Mini-reto

Abre tu periódico en modo dispositivo a 375px y sé brutal en el diagnóstico: ¿qué se rompe? ¿Qué queda ilegible o inalcanzable con el pulgar? Anota la lista — es literalmente el plan de trabajo de este módulo, y la vas a tachar completa en el proyecto final.

Qué sigue

La mentalidad está. La próxima lección trae la herramienta: media queries con sistema — los breakpoints 375/768/1024/1440, orientación y las queries de preferencias del usuario (prefers-*).