Un sitio web, múltiples pantallas. El diseño responsivo permite que un mismo diseño se adapte a diferentes tamaños y orientaciones de dispositivos. El término fue acuñado por Ethan Marcotte en 2010, basándose en ideas previas sobre cuadrículas flexibles e imágenes fluidas. En lugar de crear sitios separados para computadoras de escritorio y dispositivos móviles, los diseñadores crean un único código base que se reorganiza automáticamente según el ancho de la ventana gráfica.

Tres ingredientes técnicos hacen posible su funcionamiento. Las cuadrículas fluidas utilizan porcentajes en lugar de píxeles fijos, lo que permite que las columnas se estiren y se encojan. Las imágenes flexibles se adaptan al tamaño de sus contenedores. Las consultas de medios detectan el tamaño de la pantalla y aplican diferentes reglas CSS en los puntos de interrupción definidos. Un diseño de escritorio de tres columnas podría reducirse a una sola columna en un teléfono, con la navegación ubicada en un menú desplegable. El objetivo no es un control píxel a píxel perfecto, sino una adaptación fluida.

Técnicas básicas

• Cuadrículas fluidas basadas en porcentajes.
• Imágenes y medios flexibles.
• Consultas de medios en puntos de interrupción definidos.
• Priorización de contenido para dispositivos móviles.

El diseño responsivo es ahora una práctica habitual. Los usuarios esperan que un sitio web funcione correctamente tanto si lo abren en un teléfono, una tableta, un ordenador portátil o un televisor.