Un enfoque de diseño web en el que el diseño se adapta fluidamente a cualquier tamaño de pantalla. El estándar básico para los sitios web modernos.
El diseño responsivo es un enfoque de diseño web en el que el diseño, las imágenes y la navegación de un sitio se ajustan automáticamente para adaptarse al tamaño de pantalla del dispositivo que lo visualiza. Un sitio responsivo se ve y funciona correctamente en un teléfono de 4 pulgadas, una tableta de 10 pulgadas, una laptop de 13 pulgadas y un monitor de escritorio de 27 pulgadas — todo desde un único código base, sin versiones separadas para móvil y escritorio.
El diseño responsivo ha sido el estándar básico desde alrededor de 2014, cuando Google comenzó a penalizar los sitios no responsivos en las clasificaciones de búsqueda móvil. Hoy en día, un sitio web no responsivo no es solo una mala experiencia de usuario — es prácticamente invisible para los buscadores móviles en Google, ya que la indexación móvil primero significa que Google evalúa la versión móvil de tu sitio para todas las clasificaciones.
El diseño responsivo se logra mediante cuadrículas fluidas (columnas de diseño que cambian de tamaño proporcionalmente), imágenes flexibles (imágenes que se escalan dentro de sus contenedores) y media queries de CSS (reglas que aplican diferentes estilos en diferentes anchos de pantalla). Los frameworks modernos y los sistemas CSS como Flexbox y Grid hacen que el diseño responsivo sea significativamente más fácil que en los primeros días de la práctica.
Vale la pena distinguir el diseño responsivo del diseño móvil primero, que es una filosofía de desarrollo sobre el orden de construcción. El diseño responsivo describe el resultado (el sitio se adapta a cualquier pantalla). Móvil primero describe el proceso (construir para móvil, luego expandir hacia arriba). Los mejores sitios son ambos: construidos con enfoque móvil primero y responsivos en todos los tamaños de pantalla.