Mobile first: qué es y cómo aplicarlo en diseño y CSS

Mobile first significa diseñar y maquetar primero para la pantalla más pequeña y luego añadir columnas y funciones a medida que hay más espacio. En CSS, los estilos por defecto describen la versión para móvil y las media queries con min-width añaden el diseño para pantallas más anchas. El enfoque obliga a decidir qué es lo más importante y suele dar páginas más ligeras y rápidas para quienes tienen menos ancho de banda y menos pantalla.

Mobile first como forma de diseñar

La idea, que el diseñador Luke Wroblewski popularizó entre 2009 y 2011, trata de prioridades antes que de código. En la pantalla de un móvil caben, sin hacer scroll, un titular, una frase y una acción. Empezar por ese espacio obliga a decidir:

• cuál es la acción más importante de la página
• qué contenido es imprescindible y cuál es decoración
• en qué orden deben aparecer las cosas cuando solo hay una columna

Cuando después el diseño crece a tablet y escritorio, el espacio extra se usa para contenido de apoyo, no para lo que le faltaba a la versión móvil. Los equipos que parten de un diseño de escritorio suelen acabar encogiendo y ocultando bloques, y así es como la información importante desaparece en el móvil.

Mobile first frente a desktop first en CSS

El mismo diseño se puede escribir en las dos direcciones.

Desktop first define el diseño ancho por defecto y quita cosas con consultas max-width:

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cards { grid-template-columns: 1fr; gap: 1rem; }
}

Mobile first define una sola columna por defecto y añade con consultas min-width:

.cards { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

La versión mobile first tiene ventajas prácticas. En el móvil solo se aplican las reglas base, así que el navegador resuelve menos sobrescrituras. Los estilos se suman en lugar de deshacerse, lo que hace el CSS más fácil de seguir. Y los navegadores o clientes de correo que ignoran las media queries muestran una columna usable en vez de un escritorio aplastado.

Los frameworks funcionan igual: tanto en Tailwind CSS como en Bootstrap, las clases sin prefijo se aplican a todos los tamaños y los prefijos de breakpoint significan «desde este ancho en adelante».

Mobile first también es rendimiento

Un móvil con mala conexión no debería descargar lo que solo necesita el escritorio. En la práctica:

• servir imágenes pequeñas por defecto y las grandes mediante srcset
• cargar los componentes pesados, como mapas, vídeos de fondo y carruseles grandes, solo cuando hagan falta
• dejar fuera del bundle inicial el JavaScript de funciones solo para escritorio

Google indexa la versión móvil de las páginas, así que la experiencia móvil es también lo que evalúa el buscador. Cómo medir el resultado se explica en la guía del test de velocidad web en móvil.

Cómo aplicar mobile first en un proyecto real

1. Escribe primero la jerarquía del contenido. Antes de cualquier diseño visual, enumera el contenido de la página en una columna, por orden de prioridad.
2. Diseña la versión de 360–390 px. La mayoría de los móviles en uso miden entre 360 y 440 píxeles CSS de ancho.
3. Amplía en breakpoints naturales. Estira el lienzo hasta que el diseño se vea estirado y pon ahí un breakpoint. Los valores habituales están en la guía de breakpoints responsive.
4. Escribe el CSS en el mismo orden. Estilos base para móviles y consultas min-width para el resto.
5. Prueba los tamaños de móvil mientras desarrollas, no al final. Tener una vista móvil abierta en Chrome lo facilita: sirve el modo dispositivo de DevTools o Mobile View Extension, que se activa con un clic y mantiene el marco del móvil al navegar entre páginas.

Errores frecuentes con mobile first

• Mobile first solo en el CSS. Si el diseño se terminó en escritorio, escribir el CSS mobile first no arregla el problema de prioridad del contenido.
• Tratar «móvil» como un único tamaño. Un móvil de 360 px y otro de 440 px se diferencian en un 20 %. Prueba los dos, y también en horizontal.
• Ocultar contenido en vez de reorganizarlo. Si un bloque no merece mostrarse en el móvil, pregúntate si merece mostrarse en absoluto.
• Olvidar el táctil en pantallas grandes. Las tablets y los portátiles táctiles muestran el diseño de escritorio, pero no tienen hover. Usa @media (hover: hover) para los efectos que dependen del ratón.
• Mobile first, escritorio al final. Las pantallas anchas también necesitan cuidado: líneas de texto demasiado largas e imágenes estiradas son el fallo del mismo proceso, en el lado del escritorio.

Preguntas frecuentes

¿Qué diferencia hay entre mobile first y diseño responsive?

El diseño responsive es el objetivo: un solo sitio que se adapta a cualquier pantalla. Mobile first es una manera de llegar a él, empezando por la pantalla más pequeña. Más en qué es el diseño responsive.

¿Hay que usar siempre media queries con min-width?

Para la mayoría de los diseños, sí. Las consultas max-width siguen siendo útiles para pequeñas excepciones, como un ajuste que solo se aplica por debajo de cierto ancho.

¿Sigue siendo relevante mobile first en 2026?

Sí. Los móviles suponen una gran parte del tráfico de la mayoría de los sitios, y Google indexa la versión móvil de las páginas. Empezar por el móvil evita que esos visitantes reciban una versión recortada de tu web.