Guía completa de diseño responsive

Mobile-first significa empezar el diseño por la pantalla más pequeña y escalar hacia arriba. No es solo una técnica CSS: es una filosofía de diseño que obliga a priorizar el contenido esencial y simplificar las interacciones antes de añadir complejidad para pantallas grandes.

Diseñar mobile-first evita un error frecuente: crear una versión desktop completa y luego intentar "comprimirla" para móvil, lo que suele resultar en una experiencia pobre donde sobra contenido y falta espacio. Partiendo de móvil, cada elemento que se añade en desktop debe justificarse.

Los breakpoints son los puntos de ancho de pantalla donde el layout cambia su estructura. La tentación es definir breakpoints por dispositivo (iPhone, iPad, desktop), pero la realidad es que hay cientos de tamaños de pantalla distintos. Los breakpoints deben definirse donde el contenido lo necesita, no donde un dispositivo específico lo exige.

Un conjunto razonable de breakpoints para la mayoría de proyectos: 640 px (móvil grande / paisaje), 768 px (tablet), 1024 px (tablet paisaje / laptop), 1280 px (desktop), 1536 px (desktop grande). Tailwind CSS usa estos valores por defecto con los prefijos sm, md, lg, xl y 2xl.

Un grid fluido usa porcentajes o unidades relativas (fr, rem, vw) en lugar de píxeles fijos. Combinado con CSS Grid y Flexbox, permite crear layouts que se adaptan naturalmente al ancho disponible sin depender exclusivamente de media queries.

CSS Grid es ideal para layouts bidimensionales (filas y columnas simultáneas), mientras que Flexbox funciona mejor para distribuciones unidimensionales (una fila de cards, un menú horizontal). La combinación de ambos cubre prácticamente cualquier necesidad de layout responsive.

Las imágenes suelen ser el recurso más pesado de una web. Servir una imagen de 2000 px a un móvil de 375 px de ancho desperdicia ancho de banda y ralentiza la carga. Las imágenes responsive resuelven esto sirviendo distintas versiones según el tamaño de pantalla y la densidad de píxeles.

El atributo srcset con sizes permite al navegador elegir la imagen óptima. Los formatos modernos como WebP y AVIF reducen el peso entre un 25 % y un 50 % respecto a JPEG sin pérdida visible de calidad. Frameworks como Astro o Next.js incluyen componentes de imagen que generan srcset, formatos modernos y lazy loading automáticamente.

La tipografía también debe adaptarse al viewport. Un título que funciona a 48 px en desktop puede ser demasiado grande en un móvil de 320 px. El escalado fluido con clamp() permite definir un tamaño mínimo, un tamaño preferido (relativo al viewport) y un tamaño máximo en una sola declaración.

Por ejemplo, font-size: clamp(1.25rem, 2.5vw, 2rem) escala el texto suavemente entre 20 px y 32 px según el ancho del viewport, sin saltos bruscos en los breakpoints. Esto reduce la necesidad de media queries para tipografía y produce un escalado más natural.

Arrastrar el borde del navegador para ver cómo responde el layout es un primer paso, pero no sustituye a las pruebas reales. El comportamiento táctil, el rendimiento en redes lentas y los navegadores específicos de cada plataforma (Safari en iOS, Chrome en Android) introducen variables que no se replican en un escritorio.

Las DevTools de Chrome y Firefox incluyen simuladores de dispositivos que replican dimensiones, densidad de píxeles y throttling de red. Para testing real, servicios como BrowserStack o LambdaTest permiten probar en dispositivos físicos remotos. Lo mínimo es testear en un iPhone reciente, un Android mid-range y un iPad.