03. Fundamentos del diseño responsivo

¿Qué aprenderás?

En este tutorial comprenderemos cómo diseñar interfaces web que se adapten correctamente a distintos tamaños de pantalla.

Aplicaremos estos principios al portafolio profesional UX/UI que estamos desarrollando a partir de nuestro prototipo en Figma.

Objetivos de aprendizaje

Al finalizar esta lección podrás:

Explicar qué es el diseño web responsivo.
Comprender el enfoque Mobile First.
Identificar qué son los breakpoints y cuándo utilizarlos.
Reconocer la importancia de los contenedores y diseños flexibles.
Diferenciar unidades absolutas y relativas.
Comprender el funcionamiento básico de las media queries.
Identificar opciones responsivas en Blocksy y Gutenberg.
Analizar cómo adaptar el portafolio UX/UI a diferentes pantallas.

Nivel: Inicial.
Herramientas: Figma, WordPress, Blocksy, Gutenberg y navegador web.
Requisito previo: Conocer el ecosistema WordPress y las herramientas básicas de Blocksy.
Proyecto: Portafolio profesional de un diseñador gráfico especializado en UX/UI.

1. ¿Qué es Responsive Design?

El Responsive Web Design, o diseño web responsivo, es un enfoque de diseño y desarrollo que permite que una interfaz se adapte a diferentes tamaños y características de pantalla.

El objetivo no es simplemente reducir los elementos de un sitio para que quepan en un teléfono.

Un diseño responsivo también debe conservar:

La legibilidad de los textos.
La organización de la información.
La facilidad de navegación.
La correcta visualización de imágenes.
El funcionamiento de botones y enlaces.
Una experiencia de usuario coherente.

Ejemplo aplicado al portafolio

Imagina la sección de proyectos destacados.

En un computador podríamos mostrar tres proyectos distribuidos horizontalmente.

En una pantalla más pequeña podríamos mostrar dos proyectos por fila.

En un teléfono móvil podríamos mostrar solamente un proyecto por fila.

El contenido sigue siendo el mismo, pero su distribución cambia para aprovechar mejor el espacio disponible.

Diferencia importante

Un sitio responsivo no necesita verse exactamente igual en todos los dispositivos.

Lo importante es conservar su funcionalidad, claridad y jerarquía visual.

Documentación oficial

Diseño web adaptable — MDN Web Docs

2. ¿Qué es Mobile First?

Mobile First es un enfoque de diseño que comienza considerando las necesidades y limitaciones de las pantallas pequeñas.

Posteriormente, la interfaz se amplía y reorganiza para aprovechar el espacio adicional disponible en tabletas y computadores.

¿Por qué utilizarlo?

Diseñar inicialmente para pantallas pequeñas nos obliga a priorizar:

El contenido más importante.
La claridad de la navegación.
La jerarquía de los textos.
El espacio entre elementos.
La facilidad de interacción táctil.

Esto resulta especialmente útil cuando trabajamos en proyectos enfocados en la experiencia de usuario.

Ejemplo de nuestro portafolio

En un teléfono móvil, la portada podría organizarse de esta manera:

Nombre del profesional.
Especialidad UX/UI.
Breve presentación.
Botón para ver proyectos.
Imagen o elemento visual de apoyo.

En un computador, algunos de estos elementos podrían distribuirse en dos columnas.

La información mantiene su importancia, pero cambia su composición visual.

¿Significa que debemos eliminar contenido?

No necesariamente.

Mobile First significa priorizar y organizar el contenido según el espacio disponible.

Ocultar información importante únicamente porque la pantalla es pequeña podría perjudicar la experiencia del usuario.

3. Comprender los breakpoints

Los breakpoints, o puntos de quiebre, son condiciones que permiten modificar la presentación de una interfaz cuando el espacio disponible lo requiere.

Por ejemplo, podemos utilizar un breakpoint para cambiar una composición de dos columnas a una sola columna.

Ejemplo conceptual

Presentación	Distribución posible
Pantalla amplia	Tres tarjetas por fila
Pantalla intermedia	Dos tarjetas por fila
Pantalla estrecha	Una tarjeta por fila

Estos son ejemplos de decisiones de diseño, no reglas universales para todos los sitios web.

¿Cómo elegir un breakpoint?

Un breakpoint debería responder al comportamiento del contenido.

Si una composición comienza a perder legibilidad, presenta desbordamiento horizontal o comprime demasiado sus elementos, podría ser necesario reorganizarla.

No debemos elegir los breakpoints solamente porque corresponden a un modelo específico de teléfono.

Ejemplo técnico

El siguiente código CSS es una demostración conceptual:

.proyectos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .proyectos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

¿Qué sucede aquí?

La composición comienza con una columna.

Cuando el ancho de la ventana cumple la condición establecida, los proyectos se organizan en dos columnas.

El valor 48rem es ilustrativo; no representa un breakpoint obligatorio para WordPress ni para Blocksy.

No necesitas incorporar este CSS en tu sitio durante esta actividad. Su objetivo es ayudarte a comprender la lógica de adaptación.

Referencia oficial

Responsive Web Design Basics — web.dev

4. Diseños fluidos y contenedores flexibles

Un diseño fluido utiliza medidas que permiten aprovechar el espacio disponible sin depender exclusivamente de dimensiones fijas.

Problema habitual

Imagina una imagen configurada con un ancho fijo de 900 píxeles.

Si se visualiza dentro de un espacio de 360 píxeles, podría sobresalir de su contenedor y generar desplazamiento horizontal.

Una alternativa flexible

En CSS podemos utilizar reglas como:

.imagen-portafolio {
  max-width: 100%;
  height: auto;
}

Esto permite que la imagen se reduzca cuando el espacio disponible sea menor que su ancho natural, manteniendo su proporción.

Conceptos fundamentales

Contenedor: elemento que agrupa y organiza otros elementos.

Ancho máximo: límite que impide que un contenido se extienda demasiado.

Espaciado: separación entre elementos internos y externos.

Diseño fluido: distribución capaz de adaptarse al espacio disponible.

Ejemplo aplicado

En nuestro portafolio UX/UI, las tarjetas de proyectos deberían adaptarse a su contenedor.

También debemos comprobar que las imágenes, títulos y botones permanezcan correctamente organizados cuando cambia el ancho de la pantalla.

5. Unidades absolutas y relativas

Las dimensiones de una interfaz pueden expresarse mediante diferentes unidades.

Conocerlas nos ayuda a comprender por qué algunos elementos se adaptan mejor que otros.

Unidad	Descripción	Ejemplo
`px`	Píxeles CSS	Borde de 1px
`%`	Porcentaje relativo al contexto	Ancho de 100%
`rem`	Relativa al tamaño de fuente raíz	Separación de 2rem
`em`	Relativa al tamaño de fuente del elemento	Espaciado de 1em
`vw`	Porcentaje del ancho del viewport	Ancho de 50vw
`fr`	Fracción del espacio disponible en CSS Grid	Columnas `1fr 1fr`

¿Qué unidades debemos utilizar?

No existe una unidad ideal para todos los casos.

Por ejemplo:

Podemos usar px para bordes.
Podemos utilizar % para ciertos anchos fluidos.
Podemos usar rem para espaciados y tamaños relacionados con la tipografía.
Podemos usar fr para distribuir columnas con CSS Grid.

Lo importante es comprender cómo responde cada unidad cuando cambian las dimensiones o las preferencias del usuario.

6. Diseño responsivo en WordPress

Aunque estos conceptos se relacionan con CSS, no siempre necesitamos escribir código para aplicarlos.

En WordPress podemos utilizar las herramientas del tema y los bloques para construir composiciones adaptables.

En nuestro proyecto trabajaremos principalmente con:

Blocksy: configuración global, contenedores, encabezados, pie de página y presentación del sitio.

Gutenberg: estructura y contenido de las páginas mediante bloques.

Ejemplo

Podemos configurar el ancho general del sitio desde Blocksy y posteriormente crear una sección de proyectos mediante un bloque de columnas en Gutenberg.

Sin embargo, debemos comprobar cómo se comporta esa combinación en diferentes tamaños de pantalla.

7. Explorar la vista responsiva de Blocksy

El personalizador de Blocksy permite revisar y ajustar diferentes aspectos visuales del sitio.

En determinados controles podemos encontrar opciones específicas para escritorio, tableta o móvil.

Abrir el personalizador de Blocksy

Ingresa al panel de WordPress.

Abre Apariencia → Personalizar.

Identifica las principales opciones visuales del tema.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 01. Personalizador de BlocksyCaptura pendiente: panel general del personalizador.

Resultado esperado:Visualizas la interfaz de personalización del tema.

Explorar las vistas de dispositivos

Identifica las opciones de vista previa para escritorio, tableta y móvil.

Cambia entre ellas y observa cómo se presenta el sitio.

Recuerda que una vista previa es una herramienta de revisión, pero también debemos comprobar el sitio directamente en el navegador.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 02. Vistas responsivasCaptura pendiente: controles de visualización por dispositivo.

Resultado esperado:Reconoces los controles de vista previa disponibles.

Observar el comportamiento del encabezado

Ingresa a las opciones del encabezado de Blocksy.

Observa cómo se presenta el logotipo y la navegación en una pantalla amplia.

Cambia a la vista móvil y comprueba cómo se organiza el encabezado.

Por ahora, no necesitas modificar su estructura.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 03. Encabezado responsivoCaptura pendiente: comparación del encabezado de escritorio y móvil.

Resultado esperado:Identificas diferencias entre la navegación de escritorio y la navegación móvil.

Documentación oficial

Opciones de personalización de Blocksy

8. Diseño responsivo en Gutenberg

Gutenberg ofrece bloques que permiten organizar contenidos con distintas estructuras.

Algunos de los más importantes para nuestro proyecto son:

Grupo.
Fila.
Pila.
Columnas.
Imagen.
Medios y texto.
Botones.

El bloque Columnas

Podemos utilizar este bloque para presentar proyectos, imágenes y textos.

La opción Apilar en móvil permite que las columnas se distribuyan verticalmente en pantallas pequeñas.

Esta opción está disponible en el bloque Columnas y normalmente se encuentra activada de forma predeterminada.

Abrir una página en Gutenberg

En WordPress, ingresa a Páginas.

Abre una página de prueba o una página de tu portafolio.

Identifica la zona de edición, el inserter de bloques y la barra lateral de configuración.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 04. Editor GutenbergCaptura pendiente: interfaz del editor de bloques.

Resultado esperado:Visualizas el editor de bloques y puedes identificar su estructura.

Crear una composición con columnas

En una página de prueba, agrega un bloque Columnas.

Selecciona una distribución de dos columnas.

En una columna incorpora un encabezado y un texto.

En la otra agrega una imagen de ejemplo.

Utiliza contenido de prueba y guarda los cambios cuando corresponda.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 05. Bloque ColumnasCaptura pendiente: composición con dos columnas en Gutenberg.

Resultado esperado:Construyes una sección simple con dos columnas.

Revisar la opción Apilar en móvil

Selecciona el bloque principal Columnas.

Abre sus ajustes desde la barra lateral.

Identifica la opción Apilar en móvil, si está disponible en tu versión del editor.

Comprueba que se encuentre activada.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 06. Apilar en móvilCaptura pendiente: ajuste responsivo del bloque Columnas.

Resultado esperado:Reconoces la configuración que permite reorganizar columnas en pantallas pequeñas.

Documentación oficial

Bloque Columnas — WordPress

9. Comparar el diseño de Figma con WordPress

Nuestro portafolio fue diseñado previamente mediante un prototipo UX/UI.

Ahora debemos comprobar si su implementación conserva las decisiones visuales importantes.

¿Qué debemos comparar?

Jerarquía visual: ¿los títulos y elementos importantes mantienen su protagonismo?

Distribución: ¿las columnas se reorganizan correctamente?

Navegación: ¿el menú sigue siendo fácil de utilizar?

Imágenes: ¿se muestran sin deformaciones ni desbordamientos?

Legibilidad: ¿el texto es cómodo de leer?

Interacción: ¿los botones y enlaces siguen siendo accesibles?

Comparar la portada del portafolio

Abre el prototipo de Figma de tu portafolio profesional.

En otra pestaña, abre la versión implementada en WordPress.

Compara la portada y registra al menos tres observaciones.

No busques solamente diferencias estéticas: presta atención a la jerarquía, navegación y legibilidad.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 07. Comparación Figma y WordPressCaptura pendiente: prototipo y sitio implementado.

Resultado esperado:Identificas diferencias entre el prototipo y la implementación en WordPress.

Observar el sitio en una pantalla pequeña

Reduce progresivamente el ancho de la ventana del navegador.

Observa cómo se reorganizan las imágenes, textos, columnas y menús.

Registra los problemas que encuentres.

En el siguiente tutorial aprenderemos a utilizar Chrome DevTools para realizar un diagnóstico más preciso.

Captura pendienteAquí incorporaremos una captura real del procedimiento.

Figura 08. Revisión preliminar en móvilCaptura pendiente: visualización móvil del portafolio.

Resultado esperado:Identificas elementos que necesitan adaptarse para mejorar la experiencia móvil.

10. Problemas frecuentes del diseño responsivo

Durante la implementación de nuestro portafolio podemos encontrar distintos problemas.

Problema	Posible causa	Qué revisar
Desplazamiento horizontal	Elementos demasiado anchos	Anchos fijos y contenedores
Texto difícil de leer	Tamaño o contraste inadecuado	Tipografía y colores
Columnas comprimidas	Distribución no adaptada	Opciones del bloque Columnas
Menú difícil de usar	Navegación móvil mal organizada	Header de Blocksy
Imágenes deformadas	Dimensiones o recorte inadecuados	Ajustes de imagen
Botones demasiado juntos	Espaciado insuficiente	Separación y tamaño de controles

Estos problemas no siempre se corrigen desde la misma herramienta.

Es importante aprender a identificar si la configuración corresponde a Blocksy, Gutenberg o a los contenidos de la página.

11. Actividad práctica

Analizando el diseño responsivo del portafolio

Utilizando tu prototipo de Figma y la implementación de WordPress, realiza las siguientes tareas.

Parte A. Análisis visual

Identifica tres secciones del portafolio que necesitan adaptarse a pantallas pequeñas.

Para cada una, explica cómo debería cambiar su composición.

Parte B. Análisis de herramientas

Indica qué herramientas utilizarías para realizar las modificaciones.

Por ejemplo:

Blocksy para la configuración del encabezado.
Gutenberg para la distribución de bloques.
Figma para consultar el diseño de referencia.

Parte C. Registro de observaciones

Elabora una tabla como esta:

Sección	Problema observado	Solución propuesta	Herramienta
Portada	Ejemplo: columnas comprimidas	Reorganizar verticalmente	Gutenberg
Proyectos	Completar	Completar	Completar
Navegación	Completar	Completar	Completar

Evidencia de aprendizaje

Registra tus observaciones y acompáñalas con capturas del prototipo y de la implementación cuando estén disponibles.

Esta actividad prepara el trabajo posterior de diagnóstico y corrección responsiva. No sustituye las instrucciones oficiales de evaluación.

12. Lista de verificación

Lista de verificación

Marca las actividades que hayas completado.

Tu progreso0 de 10 completados

13. Documentación oficial

Para profundizar en los contenidos:

Próximo tutorial

En la siguiente lección aprenderemos a utilizar Chrome DevTools para inspeccionar nuestro sitio web, simular diferentes tamaños de pantalla e identificar problemas de diseño responsivo.

Aplicaremos ese diagnóstico directamente al portafolio profesional UX/UI.