Diseño web adaptable

Diseño web adaptativo (adaptable) o Responsive Web Design (RWD).

El diseño web adaptable (también diseño web adaptativo o responsivo; este último calco 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 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ñ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 ha aumentado notablemente en los años 2010, en particular, el uso de tabletas y teléfonos inteligentes. La evolución de la navegación en Internet ha ido a la par, y ello ha popularizado la navegación en Internet mediante una creciente variedad de dispositivos y resoluciones de pantalla, lo que a su vez ha creado unas necesidades de adaptar la experiencia de la navegación web a ellos.

Con una sola versión en HTML y CSS se pueden cubrir todas las resoluciones de pantalla, con lo que el sitio web estará optimizado para distintos dispositivos y resoluciones de pantalla. 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. De esta forma se reducen los costos de creación y mantenimiento cuando el diseño de las pantallas es similar entre dispositivos de distintos tamaños. También evita tener que desarrollar aplicaciones ad-hoc para cada sistema operativo móvil: iOS, Android, Windows Phone, BlackBerry OS, etcétera.

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.

A la hora de visualizar Google tu página responsiva, puntúa mejor su posicionamiento web. Esto se debe a que Google piensa en los usuarios y cómo van a poder visualizar de mejor forma las páginas web.

Funcionamiento

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 (media queries) 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 (pantallas, impresoras, reproductor de voz), orientación, resolución, espacio de color, relación de aspecto, etc.​

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. Con la filosofía del diseño adaptativo, si una web se muestra con la resolución habitual de un PC (ancho igual o mayor a 1028px) muestra el contenido en 5 columnas, para una tableta (con un ancho superior a 800px) necesitaría sólo 4 y, en el caso de un teléfono inteligente (entre 320px y 480px), 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 (retrato o apaisada) en la que se visualizan los contenidos.