El concepto de diseño adaptativo hace referencia a la idea de construir una ‘Web para Todos’ y accesible desde cualquier tipo de dispositivo.
El diseño web adaptable es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas.
Hoy día las páginas web se ven en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera.
Además, aun dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria entre otras.
Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo.
El diseño web adaptable es posible gracias al uso de un sistema de rejilla fluida basada en proporciones, imágenes flexibles y consultas de medios de CSS3.
Las consultas de medios son una extensión de la regla @media que se incluye en la hoja de estilos para indicar al documento HTML cómo debe comportarse en diferentes medios, orientación, resolución, espacio de color, relación de aspecto, etc.
Con la filosofía del diseño adaptativo, si una web se muestra con la resolución habitual de un PC muestra el contenido en 5 columnas, para una tableta necesitaría sólo 4 y, en el caso de un teléfono inteligente, las columnas mostradas deberían ser 3.
El diseño adaptable debe fluir con una adaptación constante del tamaño de los gráficos y las estructuras que componen un sitio web dentro de los diferentes dispositivos y tamaños de pantalla, considerando de forma automática la orientación en la que se visualizan los contenidos.