Diseño mobile-first

¿Qué es el diseño mobile-first?

El diseño mobile-first es un enfoque en el que se diseña y construye primero para la pantalla más pequeña, y se añaden diseño y funciones a medida que la pantalla crece. La base es una página sencilla de una columna con lo que necesita quien visita desde el móvil. Las pantallas grandes son una mejora añadida encima, no el punto de partida que luego se comprime.

Cómo funciona

En diseño se empieza por la tarea principal: ¿qué debe poder hacer o leer un visitante en una pantalla pequeña? En el código, el CSS base describe ese diseño estrecho y las media queries min-width añaden columnas y extras cuando hay espacio. MDN describe la idea como crear un diseño simple de una columna para pantallas estrechas y pasar a varias columnas cuando hay ancho suficiente. La página también necesita la etiqueta meta viewport; sin ella, los móviles la renderizan con ancho de escritorio y la reducen. Más en viewport.

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

/* base styles: one column, for every screen */
.cards { display: grid; gap: 1rem; }

/* wider screens get more */
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

El enfoque contrario, desktop-first, escribe primero el diseño completo y luego lo deshace con consultas max-width en pantallas pequeñas. Así, los móviles suelen descargar y procesar CSS que nunca usan.

Por qué lo eligen los equipos

• Foco. Una pantalla pequeña obliga a priorizar contenido y acciones, lo que suele mejorar también la versión de escritorio.
• Menos carga en dispositivos modestos. MDN señala que los móviles siguen teniendo límites como la batería y el ancho de banda, y que servir una sola imagen grande a todos los dispositivos desperdicia ancho de banda. Ayuda servir imágenes del tamaño adecuado y cargar tarde los medios que quedan más abajo; véase tamaño de imagen y carga diferida.
• Búsqueda. Google indica que usa la versión móvil del contenido, rastreada con el agente de smartphone, para indexar y posicionar, y pide que el sitio móvil tenga el mismo contenido que el de escritorio.

Ejemplo

Una página de reservas. En el móvil se ven el selector de fechas, el precio y un botón, en una columna. A partir de 700 px aparece una columna lateral con fotos y la lista de habitaciones. Nada se quitó de la versión de escritorio: se construyó primero la móvil y se amplió.

Errores comunes

• Bloquear el zoom. user-scalable=no en la etiqueta viewport impide ampliar el texto a personas con baja visión. Según MDN, WCAG exige al menos un escalado de 2x y algunos navegadores ignoran el ajuste de todos modos.
• Ocultar contenido en móvil. Recortar texto o secciones en pantallas pequeñas puede costar tráfico, porque Google indexa la versión móvil. Reordene con pestañas o acordeones.
• Recursos de escritorio en el móvil. Una imagen principal de 2.000 px para todos los dispositivos anula la ventaja. Use srcset y sizes.
• Interacciones solo con hover. Los menús y tooltips que necesitan pasar el ratón no tienen equivalente táctil.
• Verlo solo como un truco de diseño. Si la versión móvil es lenta, el diseño no ayuda. Mídala.

Mobile-first, diseño responsive e indexación mobile-first

Están relacionados, pero no son lo mismo. El diseño responsive significa que una página se adapta a cualquier pantalla. Mobile-first es el orden en que se construye una página responsive. La indexación mobile-first es cómo rastrea Google: afecta a la búsqueda, no a cómo escribe su CSS.

Mobile-first, pruebas y monitorización

Una página mobile-first sigue teniendo que ser rápida en móviles reales. Compruebe las Core Web Vitals con un perfil móvil, porque los saltos de diseño y las imágenes lentas se notan antes allí, y repita la comprobación tras cada versión. El verificador gratuito de Core Web Vitals da una lectura rápida de una URL, y la monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas desde regiones en la nube, con el dispositivo que elija en cada monitor. Para el contexto de negocio, lea nuestro artículo sobre pruebas de rendimiento para empresas mobile-first y la comparación entre pruebas de rendimiento móvil en la nube y locales. Un buen diseño móvil también mejora la experiencia de usuario en general.

Preguntas frecuentes

¿Mobile-first es lo mismo que diseño responsive?

No. El diseño responsive significa que la página se adapta a distintos tamaños de pantalla. Mobile-first es una forma de construirlo: se escribe primero la versión para pantalla pequeña y se añaden diseños más anchos con media queries min-width.

¿Necesito media queries min-width para un CSS mobile-first?

Es el patrón habitual. Los estilos base son los móviles y las consultas min-width añaden estilos para pantallas más anchas. También puede usar la sintaxis de rango, como width >= 700px, que significa lo mismo.

¿Cómo debe ser la etiqueta meta viewport?

MDN recomienda width=device-width. Muchos sitios añaden initial-scale=1, que suele ser opcional pero fija el zoom inicial al 100 %. Evite user-scalable=no y maximum-scale, que pueden bloquear el zoom.

¿El diseño mobile-first ayuda al SEO?

De forma indirecta. Google indexa la versión móvil de su contenido, así que ve una página móvil completa y rápida. El enfoque de diseño en sí no es un factor de posicionamiento.

¿Tiene sentido alguna vez el desktop-first?

En herramientas que casi solo se usan en pantallas grandes, como paneles muy densos, puede tenerlo. Aun así, la página debe seguir siendo utilizable en un móvil.