¿Qué es el diseño responsive?

¿Te ha pasado entrar en una web desde el móvil y tener que hacer zoom con los dedos y arrastrar de lado a lado para leer un párrafo? En 2026 eso ya no es un fallo menor: es una venta perdida.

Hoy se da por hecho que una web se ve bien en cualquier pantalla. Y no es una intuición: en una de las tiendas que llevamos, 8 de cada 10 clics que llegan desde Google son desde el móvil —5.630 frente a 1.130 de escritorio en los últimos tres meses, según su Search Console—. Y no solo son más: entran mejor colocados, en la posición media 8,5 frente a la 21,1 del escritorio.

Hay varias formas de que una web funcione en el móvil. Aquí vamos a centrarnos en el diseño responsive —también llamado responsivo o adaptativo—, pero conviene conocer las otras para saber por qué esta gana casi siempre.

01Las tres opciones que tienes

Una web móvil aparte

Crear una web específica para móviles además de la de escritorio. Cuesta tiempo y dinero, porque son dos diseños y dos mantenimientos. Tiene sentido en muy pocos casos: cuando ya hay un sitio antiguo que funciona y no se quiere tocar, o cuando de verdad hace falta enseñar contenidos distintos según la pantalla. Se reconocen porque empiezan por «m»: m.dominio.com.

Una aplicación

Las apps son cómodas y dan muy buena experiencia, pero desarrollarlas sale caro: como mínimo hay que hacer versión de Android y de iOS. Y compites por un hueco en la memoria de un teléfono que ya está lleno. Solo compensa cuando la app aporta algo que la web no puede dar, no como sustituto de tener una web decente.

Diseño responsive

Un solo sitio que se adapta a cada pantalla manteniendo su estructura. Lo que en el ordenador son cuatro columnas, en una tablet son dos y en el móvil una. Un único diseño, un único mantenimiento y un único sitio que posicionar. Por eso es lo que se hace hoy salvo excepción muy justificada.

02Qué ganas con un diseño responsive

La gente encuentra lo que busca

Se accede al mismo contenido desde cualquier dispositivo, sin versiones recortadas ni «esto solo está en el ordenador». Es la diferencia entre que alguien te compre en el sofá o lo deje para luego, que es como decir nunca.

Google indexa la versión móvil

Este es el punto que más gente sigue sin tener claro: Google rastrea e indexa la versión móvil de tu web, y es esa la que decide tu posición, también para quien busca desde un ordenador. Si en el móvil falta contenido o se ve mal, ese es el sitio que Google conoce.

Un solo sitio que posicionar

Con una web móvil aparte tienes dos URLs con el mismo contenido, y hay que decirle a Google cuál manda. Con responsive no hay nada que decidir: hay una sola dirección que acumula todo lo que consigas.

Se comparte sin romperse

Un enlace que alguien pasa por WhatsApp se abre bien esté quien esté al otro lado. Suena obvio, y sin embargo es donde se cae la mitad del tráfico que llega recomendado.

Menos que mantener

Un cambio de precio, un teléfono nuevo o un producto que entra se tocan una vez. Con dos sitios se tocan dos, y el día que se olvida uno, alguien lee el dato viejo.

03Preparado para lo que venga

Cada año aparecen pantallas de tamaños que antes no existían: plegables, relojes, coches. Un diseño responsive no se hace para un modelo concreto, se hace para adaptarse, así que aguanta lo que salga sin rehacerlo.

04Dos ejemplos que puedes mirar ahora

La mejor forma de entenderlo es abrir una web en el ordenador, estrechar la ventana y ver qué pasa.

Spotify

Usa pocos elementos y muy claros, así que la adaptación es casi natural. En el móvil se mantiene todo lo importante y el menú principal se pliega en un desplegable. Nada desaparece: cambia de sitio.

Un medio de noticias

En el ordenador, una columna principal con lo destacado y otra más estrecha al lado con lo secundario. En el móvil, esa segunda columna no se elimina: se coloca debajo. Es la decisión clave del responsive —qué va primero cuando solo cabe una cosa por fila—.

05Qué mirar antes de encargarlo

Si vas a hacer o rehacer tu web, cuatro cosas que conviene dejar claras desde el principio:

• Que no pese. Los efectos y las librerías que no se usan se pagan en segundos de carga, y en el móvil se paga el doble. Ver Core Web Vitals.
• Piensa en cómo llega la gente. Quien entra desde el móvil suele venir con prisa y con una pregunta concreta: el teléfono, el horario, el precio. Que esté a la vista.
• Menos información por pantalla. Textos cortos y botones claros. En una pantalla de seis pulgadas, un párrafo de diez líneas es un muro.
• Empieza por el móvil. Diseñar primero para la pantalla pequeña obliga a decidir qué es importante. Al revés, lo que sobra acaba amontonado abajo.

Tener un diseño responsive dejó de ser una ventaja hace años: es el punto de partida. Lo que marca la diferencia ahora es qué decides enseñar primero cuando solo cabe una cosa en pantalla.