¿Por qué deberías adoptar mobile first en tu desarrollo web?

Diseñar mobile first significa empezar por la pantalla más pequeña y después ir ampliando el diseño para tablets y escritorio. Es lo contrario de lo que se hizo durante años, que era diseñar para escritorio y luego ir recortando hasta que cupiera en un teléfono.

Parece solo una cuestión de orden, pero cambia bastante el resultado.

Por qué empezar por el móvil

Hoy más de la mitad del tráfico web llega desde teléfonos, y Google indexa los sitios usando su versión móvil. Si la versión móvil es la que se hizo a última hora, es también la que ve el buscador.

Pero hay otra razón de más peso: empezar por el espacio pequeño te obliga a decidir qué es importante. En una pantalla de escritorio cabe todo, así que es fácil no priorizar nada. En un teléfono no cabe, y tienes que elegir qué va primero, qué se puede esconder y qué sobra. Cuando después amplías, añades cosas sobre una base que ya está clara.

Al revés cuesta más. Adaptar un diseño de escritorio a móvil suele acabar en una lista de excepciones: ocultar esto, apilar aquello, reducir lo otro. Y cada excepción es un sitio donde algo se puede romper.

Cómo se aplica en CSS

La idea se traduce en escribir los estilos base para móvil y usar media queries con min-width para añadir lo que cambia en pantallas más grandes:

/* Estilos base: móvil */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* A partir de 768px (tablets) */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* A partir de 1024px (escritorio) */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

Si te encuentras escribiendo muchas max-width, probablemente estás trabajando desktop first aunque no lo pretendas.

Cómo se aplica en Tailwind

Tailwind ya funciona así por defecto. Una clase sin prefijo se aplica a todas las pantallas, y los prefijos sm:, md:, lg:… añaden estilos a partir de ese ancho:

<div class="flex flex-col gap-4 md:flex-row md:gap-8">
  <!-- En móvil, una columna; a partir de md, en fila -->
</div>

Por eso conviene leer md: como “a partir de md” y no como “en tablets”. Tailwind también tiene variantes max-* para el caso contrario, pero si las usas en todas partes estás volviendo a diseñar desde el escritorio.

Lo que más pesa en un teléfono

Además del layout, hay tres cosas que se notan mucho más en móvil que en escritorio.

Imágenes. Suelen ser lo que más pesa de una página. Usa formatos ligeros como WebP (o SVG para iconos e ilustraciones) y carga diferida para las que no se ven al entrar:

<img src="imagen.webp" loading="lazy" alt="Descripción de la imagen">

JavaScript. Cada librería que añades la descarga y la ejecuta un procesador bastante más lento que el de tu computadora. Antes de sumar una dependencia, vale la pena preguntarse si hace falta, y cargar los scripts con defer para que no bloqueen el renderizado:

<script src="main.js" defer></script>

El tamaño de lo que se toca. Un botón que con el ratón se pulsa sin problema puede ser difícil de acertar con el dedo. Dale un tamaño cómodo y deja espacio entre elementos para que no se toque el equivocado:

button {
  padding: 12px 20px;
  font-size: 16px;
}

Las WCAG 2.2 fijan un mínimo de 24×24 píxeles para cualquier elemento interactivo; lo explico en el checklist de WCAG 2.2.

Probarlo en serio

Las DevTools del navegador tienen un modo de dispositivo que sirve para ir revisando mientras trabajas, y Lighthouse te da una idea rápida del rendimiento en móvil. Pero ninguno de los dos sustituye a abrir el sitio en un teléfono de verdad, con su conexión y su pantalla, y usarlo con una sola mano.