Significado de Diseño responsive
Sustantivo masculino compuesto. «Diseño» (de diseñar, del italiano disegnare) y responsive, voz inglesa cruda que significa «que responde»; equivalente recomendado: «diseño adaptable» o «diseño receptivo».
El diseño responsive es una técnica de desarrollo web que hace que una misma página se adapte de forma fluida al tamaño y la orientación de la pantalla donde se muestra.
A diferencia de crear varias versiones distintas de un mismo sitio, usa un único código que reorganiza el contenido según el espacio disponible, ya sea un móvil, una tableta o un monitor de escritorio.
Qué es el diseño responsive
El diseño responsive no consiste en reducir el tamaño de una página para que quepa en una pantalla pequeña: consiste en reorganizar su contenido, sus imágenes y su tipografía para que se lean con comodidad en cualquier dispositivo, cambiando incluso el orden o la disposición de los elementos cuando hace falta.
Funciona sobre todo mediante una cuadrícula flexible, imágenes que se ajustan al espacio disponible y reglas que aplican estilos distintos según el ancho de la pantalla que detecta el navegador. Con esas piezas, la misma página puede mostrar varias columnas en un monitor grande y una sola columna apilada en un teléfono.
Lo aplican diseñadores y desarrolladores web desde las primeras fases de un proyecto, porque adaptarlo después de terminado suele exigir rehacer buena parte del código.
Origen de la expresión diseño responsive
«Diseño» procede del italiano disegnare, «dibujar, trazar», a través del francés, y en última instancia del latín designare, «señalar». Responsive es una voz inglesa cruda derivada de respond, «responder», y este del latín respondere. La expresión completa se popularizó en inglés a partir de un artículo de diseño web publicado en 2010 que proponía este enfoque como alternativa a mantener varias versiones separadas de un mismo sitio.
El término entró en español sin traducirse por completo, y hoy convive con equivalentes como «diseño adaptable» o «diseño web adaptativo», aunque en la práctica profesional el anglicismo responsive sigue siendo la forma más usada.
Principios del diseño responsive
| Principio | En qué consiste |
|---|---|
| Cuadrícula fluida | Los elementos se miden en proporciones relativas, no en tamaños fijos. |
| Imágenes flexibles | Las imágenes se ajustan al espacio disponible sin desbordar el diseño. |
| Consultas de medios | Reglas que aplican estilos distintos según el ancho de la pantalla detectada. |
Estos tres principios trabajan juntos: la cuadrícula y las imágenes se adaptan de forma continua, mientras que las consultas de medios permiten cambios más drásticos de disposición en ciertos puntos de ruptura del ancho de pantalla.
Ejemplos de uso de diseño responsive
Rediseñaron la web con diseño responsive porque la mayoría de las visitas llegaban desde el móvil.
El menú del sitio se convierte en un icono desplegable gracias al diseño responsive.
El curso de desarrollo web dedica varias clases al diseño responsive y a las consultas de medios.
Probaron el diseño responsive de la página en distintos tamaños de pantalla antes de publicarla.
Sin diseño responsive, la tabla de precios se desbordaba en las pantallas más pequeñas.
Sinónimos y palabras relacionadas
Sinónimos: diseño adaptable, diseño web receptivo.
Antónimos: diseño de ancho fijo.
No es lo mismo que:
- Diseño adaptativo: usa varias versiones fijas del diseño, cada una pensada para un rango de tamaños, mientras que el responsive reorganiza el contenido de forma continua y fluida.
- Accesibilidad web: se ocupa de que el sitio funcione para personas con discapacidad, un objetivo distinto al de adaptarse al tamaño de pantalla, aunque ambos suelen trabajarse juntos.
- Interfaz de usuario: es el conjunto de elementos con los que interactúa el usuario; el diseño responsive determina cómo se reorganiza esa interfaz según la pantalla.
Preguntas frecuentes sobre diseño responsive
¿Qué diferencia hay entre diseño responsive y diseño adaptativo?
El diseño responsive reorganiza el contenido de forma continua según el espacio disponible, mientras que el diseño adaptativo prepara varias versiones fijas del diseño, cada una pensada para un rango de tamaños de pantalla concreto.
¿Por qué es importante el diseño responsive hoy?
Porque las páginas se visitan desde dispositivos con tamaños de pantalla muy distintos, desde móviles pequeños hasta monitores grandes, y un sitio que no se adapta puede resultar incómodo de leer o de usar en muchos de ellos.
¿El diseño responsive afecta a la velocidad de carga de una web?
Puede influir, sobre todo si las imágenes no están optimizadas para cada tamaño de pantalla; por eso un buen diseño responsive suele combinarse con técnicas que sirven imágenes más ligeras a los dispositivos con pantallas pequeñas.