Abre una página web en tu teléfono, luego en un portátil y después en un televisor. Si se ve bien en las tres pantallas sin necesidad de pellizcar ni forzar la vista, significa que se diseñó con diseño adaptable. Este enfoque permite que un único código base adapte su diseño, imágenes y tipografía a cualquier pantalla.

Ethan Marcotte acuñó el término en 2010, cuando la navegación móvil estaba en pleno auge y los diseñadores se enfrentaban a una disyuntiva: crear sitios web independientes para cada dispositivo o uno adaptable. El diseño responsivo se impuso. Las herramientas clave son las cuadrículas fluidas, las imágenes flexibles y las consultas de medios. Una consulta de medios le pregunta al navegador el ancho de la ventana gráfica y aplica diferentes reglas CSS según la respuesta.

¿Qué hace que un diseño sea adaptable?

• Rejillas fluidas que utilizan porcentajes en lugar de píxeles fijos.
• Imágenes flexibles que se adaptan al tamaño de sus contenedores.
• Consultas de medios que aplican puntos de interrupción para diferentes tamaños de pantalla.
• Objetivos optimizados para pantallas táctiles en diseños para móviles

El objetivo no es solo adaptar el contenido a una pantalla pequeña, sino preservar la legibilidad, la jerarquía y la usabilidad en cualquier contexto. Un diseño de escritorio de tres columnas puede reducirse a una sola columna en un teléfono. Un menú desplegable reemplaza una barra de navegación completa. Un buen diseño responsivo se siente inevitable, como si el sitio siempre hubiera estado pensado para verse así en tu dispositivo.