El diseño web adaptativo, del original inglés Responsive web Design, básicamente gira en torno al diseño de páginas web que sean accesibles desde los distintos dispositivos que existen al alcance del usuario. Por lo tanto, se refiere tanto a equipos de sobremesa (ordenadores, televisiones inteligentes) como a dispositivos móviles (portátiles, smartphones, tablets). El objetivo final del diseño web responsive es que el usuario disfrute de una visualización satisfactoria en la navegación independientemente del dispositivo.
Tanto en lenguaje HTML como en las hojas de estilo CSS se consigue abarcar múltiples resoluciones de pantalla, con lo que se evita tener que desarrollar aplicaciones para cada dispositivo.
Además, la URL es la misma para un sitio web con diseño adaptativo, con lo que no hace falta crear un subdominio para las terminales móviles. Sin duda, este hecho favorece el rendimiento de los motores de búsqueda. Google, por ejemplo, prioriza en sus búsquedas el diseño web responsive, al posicionar mejor los sitios que actúan sobre dispositivos móviles.
Los media queries son reglas de CSS3 que permiten cambiar la manera en que se va a ver la estructura de un sitio dependiendo del dispositivo, pues indican al navegador que los diferentes estilos definidos se aplicarán a la visualización concreta de cada pantalla, en función de su resolución.
Herramientas para diseño web responsive
Los diseñadores cuentan con frameworks CSS que evitan tener que acceder a los códigos. Por ejemplo, Bootstrap, desarrollado por Twitter, simplifica la creación de los diseños web mediante plantillas CSS y ficheros JavaScript, que permiten la visualización adecuada de escalas y resoluciones, así como la integración con librerías como jQuery. 960gs es otro framework similar a este.
1140 CSS Grid se integra en monitores de 1280 píxeles de ancho, transformándose en líquido y adaptándose al ancho del navegador en monitores más pequeños y en terminales móviles.
Adobe Shadow es una herramienta que funciona por wifi, sincronizando el ordenador de sobremesa con, por ejemplo, un smartphone o una tablet, permitiendo al diseñador web navegar por el proyecto en el que está trabajando y encontrar errores, que además puede corregir editando el código para la versión que sea.
Si simplemente lo que se quiere es detectar si una web tiene un diseño responsive, una buena herramienta es Responsive web Design Testing Tool. Basta con escribir la URL de la página, y el programa la carga en marcos de distintos tamaños, que emulan el ancho de pantalla de distintos dispositivos. Herramientas similares son Screenfly y Protofluid.
Con Multi-Device Layout Patterns los diseñadores pueden comprobar cómo se adapta su proyecto a pantallas de distintas resoluciones y, dentro de estas, en qué forma quedan distribuidos los elementos de la página.
Responsive web Design Sktech Sheets permite conocer en qué lugar hay que situar los elementos del proyecto, en función de los distintos navegadores.
Responsive Menu y Convert a Menu to a Dropdown for Small Screens, consiguen que un menú se transforme en una lista de opciones para facilitar la visualización en pantallas pequeñas.
Por último, las imágenes pueden cargarse y crearse en distintos tamaños según interese, gracias al script Adaptative Images.
