El diseño web adaptativo o adaptable (en inglés, Adaptive) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en las hojas de estilo CSS, se consigue adaptar el sitio web al dispositivo del usuario.

Esta técnica, aunque específica para dispositivos móviles, está realizada dentro del contexto "One Web", y que por lo tanto engloba no sólo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como tabletas, netbooks, portátiles o dispositivos de sobremesa, etc.

El concepto de "One Web" hace referencia a la idea de construir una Web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

El ahorro de tiempo para desarrollar un sitio web adaptativo es considerable, sobre todo si el desarrollo se realiza en un CMS, pues con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla que se puedan necesitar optimizadas para cualquier tipo de dispositivos. De esta forma se reducen los costes de creación y mantenimiento, pues se evita tener que desarrollar aplicaciones expresas para versiones móviles, por ejemplo, una para iPhone, otra para Android, etc.

En la optimización de motores de búsqueda, sólo aparecería una URL en los resultados, por lo que se ahorran realizar redirecciones y se evitan los fallos que se derivan de éstas.

También se evitarían errores al acceder al sitio web desde enlaces que los usuarios comparten en medios sociales.

Actualmente aún es menos el acceso a Internet desde dispositivos móviles, pero la utilización del acceso a la red desde estos, está siendo cada vez mayor. Los mayores problemas para la utilización de estos dispositivos es la velocidad de conexión, o la optimización del hardware para dispositivos móviles, pero estamos seguros de que este problema pronto lo solucionarán las compañías  de telecomunicaciones.

Los vaticinios realizados por expertos, aseguran que para el año 2015, el 80% de las aplicaciones móviles estarán, en gran parte, creadas o basadas en HTML5.

En la siguiente comparativa se pueden observar las ventajas y desventajas de uno y otro sistema de implementación.

Beneficios del Diseño Web Adaptativo

Resumimos en unos puntos las ventajas que ofrece esta técnica.

• Reducción de costes. Se reducen los costes al realizar un solo sitio web, para todos los dispositivos.
• Eficiencia en la actualización. Las diferentes vistas del sitio web se actualizan en una sola actualización, mientras que si son sitios independientes, cada plataforma requiere una actualización independiente, lo que puede hacer que necesite mayor cantidad de recursos y aumenta la posibilidad de errores.
• Mejora de la usabilidad. Esta tecnología, si se realiza bien, aporta una mayor usabilidad al poder acceder desde cualquier dispositivo.
• Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación. 

Algunos ejemplos de sitios Adaptativos

Como no, empezaremos por los sitios de joomla.org ;-)

• La Joomla! World Comference (JWC) http://conference.joomla.org/
• El sitio de desarrolladores de joomla.org http://developer.joomla.org/
• Sitio personal de Stephen Caver: http://stephencaver.com/
• Sitio web del festival de música de Sasquatch!: http://sasquatchfestival.com/
• Sitio de la diseñadora Naomi Atkinson: http://naomiatkinson.com/
• Sitio web de Casa Teixidor: http://teixido.co/espanol