Diseño Web Adaptable

El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media en la Hoja CSS, consigue adaptar el sitio web al entorno del usuario.


El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Hoy en día los usuarios de nuestras páginas web o tiendas online pueden acceder a las mismas desde diferentes medios: un ordenador de sobremesa con pantalla panorámica, un móvil, una tableta…

Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla.

Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Web Design o Diseño Web adaptable.

¿Qué es el Responsive Web Design o Diseño Web Adaptable?

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma.

Los tamaños de pantalla cambian según el medio con el que se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panorámico de sobremesa) pero el usuario cada vez más exige que su experiencia usando nuestra web sea la óptima en cada caso concreto.

Utilizando HTML y principalmente CSS podemos servir al usuario una versión de nuestra web en función del ancho de pantalla utilizado.

Es decir, nuestra web se adapta al ancho de pantalla, responde ante los cambios del tamaño la misma.

Además podemos pensar en mejorar el acceso a formularios, botones, etc… Eso es Responsive Web Design o Diseño Web Adaptable.