El diseño web adaptable (o adaptativo), conocido por las siglas RWD del inglés Responsive Web Design, 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 visualizarlas.

Hoy día las páginas web se visualizan en multitud de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PCs, etcétera. Además, aún 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, se obtenga una visualización adecuada en cualquier dispositivo.

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.

Origen del diseño web adaptable

Tanto la idea como el propósito del diseño web adaptable fueron previamente discutidos y descritos por el World Wide Web Consortium (W3C) en julio de 2008 en su recomendación «Mobile Web Best Practices» bajo el subtítulo «One Web».

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de One Web, y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

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).

Hoy en día, la variedad de dispositivos existentes en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien sea accesible pero con una experiencia de navegación muy pobre.

Ventajas

El uso de dispositivos móviles está creciendo a un ritmo increíble; dispositivos como tabletas y teléfonos inteligentes han incrementado sus ventas en los últimos años y la navegación en Internet mediante estos dispositivos es cada vez más común. Por este motivo el diseño web adaptable se ha vuelto tan popular, pues es una técnica que proporciona una solución web que puede manejar la visualización web tanto de escritorio como de dispositivos.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PC, tabletas, teléfonos móviles, etcétera. Esto mejora la experiencia de usuario a diferencia de lo que ocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde dispositivos móviles.

Desde el punto de vista del posicionamiento en buscadores, aparecería una única URL en los resultados de búsqueda, con lo cual se ahorrarían múltiples redirecciones y los fallos que se derivan de estas. También se evitarían errores al acceder al sitio web en concreto desde los llamados social links, es decir, desde enlaces que los usuarios comparten en medios sociales tales como Facebook o Twitter, y que pueden acabar en error dependiendo desde qué dispositivo se copió y desde qué dispositivo se intenta acceder a ese enlace.

Funcionamiento

El diseño web adaptable se hace posible gracias a la introducción de las media queries en las propiedades de los estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.

Para entenderlo mejor, los diseños de las páginas web, al igual que los periódicos y las revistas, están basados en columnas, entonces con la filosofía del diseño adaptativo, si una web a resolución de PC (1028×768 px) tiene 5 columnas, para una tableta (800×600 píxeles) necesitaría sólo 4, y en el caso de un teléfono inteligente cuyo ancho suele ser entre 320 y 480 píxeles las columnas usadas serían 3.

El diseño responsivo debe fluir con una adaptación constante del tamaño de los gráficos y las estructuras compositivas de un sitio web dentro de los diferentes dispositivos y tamaños de pantalla considerando de forma automática la disposición (vertical – horizontal) en la que se visualizan los contenidos.

Fuente de la información: Wikipedia