Compartir en:

¿Qué es Responsive Web Design o RWD?

La frase “Responsive Web Design” apareció por primera vez en Mayo del 2010 en un artículo del blog “A List Apart” una publicación en línea especializada en diseño y desarrollo web, el artículo fue escrito por el diseñador norteamericano Ethan Marcotte quien difundió esta idea en una serie de artículos y que luego extendería en su libro Responsive Web Design. El Responsive Web Design conocido también como RWD por sus siglas en inglés, es una filosofía de diseño y desarrollo web cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.

El Responsive Web Design  pretende que con un sólo diseño web tengamos una visualización adecuada en cualquier dispositivo.

Es una técnica de desarrollo de interfaces web. Mediante el uso de media queries en las hojas de estilo que dotan de una estructura flexible a los contenidos web adaptándolos a cada tipo de dispositivo.

A través del Responsive Web Design se puede mostrar contenidos diferentes de una misma web en diferentes dispositivos, así como escalar a la perfección las imágenes a cada pantalla.

Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, smartphones, libros electrónicos, portátiles, etc.

Además cada dispositivo tiene sus características concretas: Tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria,etc.

¿Cómo funciona el Responsive Web Design?

El Responsive Web Design 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 Responsive Web Design, si una web a resolución de PC (1028×768 px) tiene 5 columnas, para una Tablet (800×600 px) necesitaría sólo 4, y en el caso de un smartphone cuyo ancho suele ser entre 320 px* 480 px las columnas usadas serían 3.

Todo el mundo sabe que estás técnicas han supuesto una auténtica revolución en el mundo del diseño y el desarrollo web, pero son solo técnicas de layout.

Con el paso del tiempo, el concepto ha ido poco a poco evolucionando y cada día es inevitable encontrarse con nuevos métodos y trucos amparados en el espíritu del responsive.

Algunos autores van más allá, como es el caso de Jeffrey Zeldman, que considera que el termino responsive debe ampliarse para cubrir cualquier enfoque que permita entregar elegantes experiencias visuales con independencia del tamaño de la pantalla y las capacidades o limitaciones del dispositivo.

Una ventaja clave del RWD es que los diseñadores pueden utilizar un único diseño para todos los dispositivos, y sólo tiene que modificar los estilos CSS para determinar cómo es presentado el contenido de los diferentes tamaños de pantalla. Además, los diseñadores no necesitan más que trabajar en HTML y CSS, tecnologías con las que ya están familiarizados.