Diseño Responsivo

¿Qué es el Diseño Responsivo?

En 2010, los usuarios navegaban por internet exclusivamente desde ordenadores de escritorio. Hoy en día, más del 60% del tráfico web proviene de dispositivos móviles. Y los usuarios pueden empezar una tarea en el móvil, continuarla en un portátil y revisarla en una tablet.

El Diseño Responsivo significa que el diseño se adapta automáticamente al tamaño de pantalla que está usando el usuario — desde 320px (el móvil más pequeño) hasta 2560px (monitor grande) y más.

El término fue acuñado por Ethan Marcotte en 2010 y se convirtió en el estándar fundamental del diseño web. La idea es que el contenido es como el agua — toma la forma del recipiente en el que se vierte.

El Enfoque Mobile-First

¿Por qué Empezar desde el Móvil?

En el pasado, los diseñadores diseñaban para escritorio primero y luego "reducían" el diseño para móvil. Esto generaba muchos problemas:

• Elementos que se rompen o se superponen
• Contenido invisible
• Mala experiencia en móvil

El enfoque Mobile-First invierte el proceso: empieza diseñando para la pantalla más pequeña y luego expande gradualmente. Los beneficios:

• Enfoque: La pantalla pequeña te obliga a concentrarte en lo que importa — ¿qué contenido es realmente esencial?
• Rendimiento: Un diseño más simple carga más rápido — y el móvil necesita velocidad
• Más fácil de escalar: Añadir contenido para una pantalla más grande es más fácil que eliminarlo para una más pequeña
• Prioridad: Cuando el espacio es limitado, aprendes a clasificar la información por importancia

El Proceso de Diseño Mobile-First

1. Diseña para móvil primero (375px): define el contenido esencial y el flujo
2. Expande a tablet (768px): añade columnas y contenido lateral
3. Expande a escritorio (1440px): aprovecha el mayor espacio con un layout más rico
4. Prueba cada tamaño: asegúrate de que el diseño es fluido en cada etapa

Puntos de Quiebre (Breakpoints)

Los breakpoints son los tamaños en los que cambia el diseño. No necesitas un breakpoint para cada dispositivo — necesitas breakpoints cuando el contenido necesita cambiar.

Breakpoints Comunes

Nombre	Ancho	Uso
xs	< 475px	Móviles pequeños
sm	475 - 639px	Móviles grandes
md	640 - 767px	Tablet vertical
lg	768 - 1023px	Tablet horizontal
xl	1024 - 1279px	Portátil pequeño
2xl	1280 - 1535px	Escritorio
3xl	1536px+	Pantalla grande

Breakpoints en Tailwind CSS

Tailwind proporciona breakpoints predefinidos:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

¿Qué Cambia en Cada Breakpoint?

• Número de columnas: 4 en móvil → 8 en tablet → 12 en escritorio
• Disposición de elementos: vertical en móvil → horizontal en escritorio
• Tamaños de fuente: más pequeños en móvil y más grandes en escritorio
• Navegación: Hamburger en móvil → barra horizontal en escritorio
• Mostrar/ocultar: algunos elementos desaparecen en móvil (Sidebar, por ejemplo)

Layouts Fluidos

Porcentajes en Lugar de Números Fijos

En lugar de definir el ancho de una columna como 400px, defínelo como 33.33% (un tercio del ancho). Así la columna se adapta a cualquier ancho de pantalla.

CSS Grid y Flexbox

En desarrollo, los layouts fluidos se construyen con:

Flexbox — para layouts unidireccionales (horizontal o vertical):

• Barra de navegación: elementos uno al lado del otro
• Lista de elementos: uno debajo del otro

CSS Grid — para layouts bidimensionales (filas y columnas):

• Rejilla de tarjetas: 3 columnas × varias filas
• Layout de página completa: header + sidebar + content + footer

Tipografía Fluida

En lugar de definir un tamaño fijo para cada breakpoint, usa tipografía fluida que cambia suavemente:

La idea es que el tamaño de fuente cambia gradualmente entre un mínimo y un máximo:

• En una pantalla de 320px: el título es de 24px
• En una pantalla de 1440px: el título es de 48px
• Entre ambos: el tamaño cambia gradualmente

En CSS, esto se hace con clamp():
font-size: clamp(1.5rem, 1rem + 2vw, 3rem)

Imágenes Flexibles

Las imágenes deben adaptarse al tamaño de su contenedor:

• max-width: 100% para que la imagen no supere los límites del contenedor
• Usa relaciones de aspecto fijas para que la imagen no se distorsione
• Proporciona diferentes tamaños de imagen para diferentes tamaños de pantalla (srcset)

Patrones Responsivos

1. Column Drop

El patrón más común — las columnas que están una al lado de la otra en escritorio se apilan verticalmente en móvil.

Ejemplo: 3 tarjetas una al lado de la otra en escritorio → una tarjeta por fila en móvil.

Cuándo usarlo: para contenido donde cada parte es independiente — tarjetas, productos, artículos.

2. Mostly Fluid

Similar a Column Drop pero con un ancho limitado en pantallas grandes. El contenido alcanza un máximo (max-width) y luego los márgenes aumentan.

Ejemplo: Contenido con un ancho máximo de 1200px — en una pantalla de 1920px, hay grandes márgenes en ambos lados.

Cuándo usarlo: la mayoría de los sitios web y aplicaciones — es el patrón predeterminado.

3. Layout Shifter

El layout cambia radicalmente entre tamaños de pantalla — no solo columnas que se apilan.

Ejemplo: En móvil — Tab Bar en la parte inferior. En tablet — Sidebar colapsado. En escritorio — Sidebar abierto.

Cuándo usarlo: cuando la experiencia necesita ser genuinamente diferente en cada dispositivo.

4. Off Canvas

Cierto contenido está oculto en pantallas pequeñas y aparece cuando el usuario lo solicita.

Ejemplo: El menú de filtros en una tienda online — visible en un Sidebar en escritorio. Oculto detrás de un botón "Filtrar" en móvil.

Cuándo usarlo: para contenido secundario que no es esencial en pantallas pequeñas.

5. Tabla Responsiva

Las tablas son un gran reto en móvil. Existen diferentes soluciones:

• Scroll horizontal: la tabla se queda como está pero el usuario se desplaza horizontalmente
• Convertir a tarjetas: cada fila se convierte en una tarjeta con todos los datos
• Ocultar columnas: las columnas menos importantes desaparecen en móvil
• Apilamiento: las columnas se convierten en filas

Áreas Táctiles (Touch Targets)

En móvil, los usuarios interactúan con sus dedos, no con un ratón. Un dedo es mucho menos preciso que un cursor de ratón.

Tamaño Mínimo de Área Táctil

• Apple HIG: 44 × 44 puntos
• Material Design: 48 × 48dp
• WCAG: 24 × 24px mínimo (AA), 44 × 44px (AAA)

Regla práctica: Cualquier elemento interactivo en móvil debe tener al menos 44px de alto y ancho.

Espaciado entre Elementos Interactivos

Debe haber al menos 8px entre dos elementos interactivos cualesquiera en móvil. Un usuario que pulsa un botón no debe pulsar accidentalmente el de al lado.

Zonas del Pulgar (Thumb Zones)

Cuando un usuario sostiene el teléfono con una mano:

• Zona fácil: parte inferior central de la pantalla
• Zona media: bordes inferiores y centro superior de la pantalla
• Zona difícil: esquinas superiores de la pantalla

La lección: Coloca las acciones más importantes y más frecuentes en la parte inferior de la pantalla. Por eso los Tab Bars están abajo y los botones principales están en la zona del pulgar.

Diseño Responsivo en Figma

Configurar los Frames

Diseña cada pantalla al menos 3 veces:

• Móvil: 375 × 812 (iPhone 13/14)
• Tablet: 768 × 1024 (iPad)
• Escritorio: 1440 × 900

Auto Layout Responsivo

Usa Auto Layout con Fill Container para que los componentes se adapten:

Tarjeta flexible:

• Ancho: Fill Container (toma el ancho del contenedor)
• Alto: Hug Contents (toma el alto del contenido)
• Imagen: Fill Container + relación de aspecto fija

Rejilla de tarjetas flexible:

• En escritorio: Auto Layout horizontal + Wrap
• En móvil: Auto Layout vertical

Constraints en Figma

Si no usas Auto Layout (en casos raros):

• Left & Right: el elemento se estira con el cambio de ancho del frame
• Center: el elemento permanece centrado
• Scale: el elemento se escala proporcionalmente

Patrones de Navegación Responsiva

Escritorio → Móvil

Escritorio	Móvil
Barra de navegación horizontal completa	Hamburger Menu o Bottom Tab Bar
Sidebar siempre abierto	Sidebar oculto (Drawer)
Breadcrumbs	Botón atrás
Pestañas horizontales	Pestañas desplazables o Dropdown
Tabla completa	Tarjetas o tabla con scroll
Formulario multicolumna	Formulario de una columna
Tooltips al pasar el ratón	Pulsación larga o icono de información

Consejos Importantes

• No ocultes contenido importante en móvil — si el contenido importa, debe estar presente en todos los tamaños
• No crees un sitio móvil separado (m.ejemplo.com) — usa un único diseño responsivo
• Prueba en dispositivos reales — el simulador no muestra todos los problemas

Probar el Diseño Responsivo

En Figma

• Usa Prototype Mode y configura el Device en diferentes tamaños
• Usa Figma Mirror para probar el diseño en tu dispositivo móvil real

En el Navegador

• Chrome DevTools: pulsa Ctrl+Shift+M para abrir el emulador de dispositivos
• Redimensiona la ventana manualmente y observa el diseño en cada tamaño
• Responsively App: una herramienta que muestra el sitio web en múltiples tamaños simultáneamente

En Dispositivos Reales

• Tu móvil personal: la primera y más importante prueba
• BrowserStack: prueba en dispositivos reales de forma remota
• Dispositivos diferentes: si es posible, prueba en iPhone, Android e iPad como mínimo

Errores Comunes en el Diseño Responsivo

1. Diseñar para Escritorio Primero

Cuando empiezas por escritorio, llenas el espacio con mucho contenido. Luego, cuando llegas a diseñar para móvil, no puedes encajar todo eso en un espacio pequeño. Empieza siempre con móvil.

2. Demasiados Breakpoints

3-4 breakpoints son suficientes para la mayoría de los proyectos. Cada breakpoint adicional añade complejidad al diseño, al desarrollo y al mantenimiento.

3. Botones Pequeños en Móvil

Un botón de 30px en móvil es imposible de pulsar cómodamente. 44px es el mínimo.

4. Ignorar las Pantallas Grandes

Muchos diseñadores diseñan solo para móvil y escritorio, ignorando las pantallas grandes (2560px+). El resultado: contenido fino en el centro de una pantalla enorme. Define un max-width y usa el espacio inteligentemente.

5. Texto Ilegible

Un tamaño de fuente que se ve bien en escritorio puede ser demasiado pequeño en móvil. 16px es el mínimo para el texto del cuerpo normal en móvil.

6. No Probar con Contenido Real

Lorem Ipsum no revela los problemas. Usa contenido real — títulos largos, nombres largos, texto real. El contenido real expone problemas que el contenido de marcador de posición oculta.

Lista de Verificación para el Diseño Responsivo

Antes de entregar cualquier diseño, pregúntate:

• ¿Has diseñado para todos los tamaños de pantalla requeridos?
• ¿Todos los botones y elementos interactivos tienen al menos 44px en móvil?
• ¿Es el texto legible en todos los tamaños?
• ¿Es la navegación fácil en todos los dispositivos?
• ¿El contenido esencial no está oculto en ningún tamaño de pantalla?
• ¿Las imágenes son adaptables y no se distorsionan?
• ¿Hay espacio suficiente entre los elementos interactivos en móvil?
• ¿Se ve bien el diseño también en orientación horizontal (landscape)?

Ejercicio Práctico

Diseña la página de inicio de un sitio web personal en 3 tamaños:

Móvil (375px):

1. Header simple + Hamburger Menu
2. Sección Hero con título y botón CTA
3. Sección "Mi trabajo" — tarjetas apiladas verticalmente
4. Sección "Sobre mí" — texto y foto
5. Footer

Tablet (768px):

1. Header + navegación parcialmente visible
2. Hero más grande
3. Tarjetas en dos filas (2 por fila)
4. "Sobre mí": foto al lado del texto
5. Footer con dos columnas

Escritorio (1440px):

1. Header completo + todos los enlaces visibles
2. Hero grande con imagen lateral
3. Tarjetas en 3 columnas
4. "Sobre mí": layout rico
5. Footer con 4 columnas

Empieza con el móvil y asegúrate de que todo funciona, luego expande. Observa cómo las decisiones de diseño en móvil también mejoran el diseño en pantallas más grandes.