La web es un mundo en constante movimiento, donde los cambios se dan vertiginosamente y en el que mantener el espíritu de siempre aprendiz es vital para mantenerse al ritmo.
La aparición del primer iPhone, y con él la era de los smartphones con navegadores de verdad fue una nueva vuelta de tuerca en una web donde nuestro querido CSS 2.1 y su atributo “media” (que nos permite aplicar una hoja de estilos específica para impresión, “handsets”, etc.) no pudo responder a los retos que se le planteaban, básicamente porque los fabricantes hacían poco o ningún esfuerzo por implementarlo correctamente.
Los dispositivos comenzaron a salir y el reto se hacía cada vez mayor: ¿Cómo adaptar nuestro sitio para que se vea bien en la mayor cantidad de dispositivos posibles? ¿Hago un sitio fijo y que cada quién lo vea como pueda? ¿Un layout líquido/elástico que se adapte a las distintas pantallas y resoluciones? ¿Mejor un diseño para cada dispositivo (móvil, tablet, monitor) y redirigir al que corresponda? Sí, las cosas se complicaron, y aún se complican.
En mayo de 2010, Ethan Marcotte escribió un artículo en A List Apart (y más tarde un libro con el mismo nombre que no me canso de recomendar) sobre lo que llamó: Responsive Web Design, inspirado por una tendencia de la arquitectura moderna, conocida como responsive architecture y el, en mi opinión, brillante artículo escrito en el 2000 por John Allsopp: A Dao of Web Design. En él presenta su propuesta de crear un sistema que permita adaptar nuestro sitio a los distintos dispositivos en los que será visualizado. Para ello, Ethan hace uso de tres técnicas:
- Fluid Grids (Cuadrículas fluídas/líquidas).
- Fluid Images (Imágenes fluídas/líquidas).
- Media Queries.
La intención detrás del Responsive Design no es simplemente crear un sitio que pueda ser visto correctamente independientemente del dispositivo sino que además pueda ser también accesible, legible y usable en diferentes ambientes, sobre todo en un mundo donde la proliferación de tamaños, resoluciones y modos de uso aumenta cada vez más haciendo imposible predecir desde dónde será leída la información de nuestro sitio y por tanto crear una interfaz para cada caso una tarea insostenible o, cuando menos, sumamente costosa.
Por supuesto, a medida que aumentó la adopción de CSS3, RWD ha ido creciendo en popularidad, saltando incluso del campo de CSS hacia Javascript, para superar las dificultades que se han ido presentando en la implementación de un sitio responsivo.
En los siguientes artículos de esta serie profundizaremos en las técnicas de CSS que conforman el Responsive Web Design, al final hablaremos también de sus ventajas, sus desventajas, la forma óptima de aplicarlo y veremos luego algunos recursos que la comunidad frontend ha desarrollado a su alrededor.
Nota: La imagen que encabeza este post es tomada de Beginners Intro: Considering Responsive Web Design, por Harry Wiseman para Inspiration Feed.
El Aprendiz... 
Porque responsive design tiene que ser pensado desde el concepto de diseño de nuestro website. Este diseño debe tener un concepto de fluido entre los elementos que la componen para así lograr el perfecto flujo al momento de codificarlo. Sí, si sólo diseñas webs, lo mismo debes implementar el concepto en tus diseños. Dependiendo de tu website puede que sea más o menos doloroso. En el peor de los casos estás usando un cms con una plantilla pre-hecha que muy probablemente tenga el código muy desordenado y lo único que te ganes sean dolores de cabeza modificando el flujo del mismo.No obstante te invito a que des el siguiente paso y hagas un diseño a la medida, es decir que desde ya, pienses qué es lo que va a tener tu website y en base a eso planear su implementación para tener el flujo correcto y te sientas un héroe por haberlo logrado (yo soy un héroe). Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, esta no cuenta con responsive design.. Ahora entra a mejorando.la y redimensiona el navegador y mira como todo el contenido se reacomoda.
Veamos. Si lo que querías era hablar de Javascript, está bien. Podías haberlo hecho más directamente. En cuanto al RWD, no es ni más ni menos que una guía de las muchas que hay. Que se haya hecho más popular, bien. Pero no deja de ser eso, una más. Otra cosa: no sólo de javascript está hecho el mundo.
Gracias.
Hola Esteban
Para serte honesto, no veo a qué vienen esas observaciones sobre Javascript, como habrás visto, no lo menciono en el artículo más que una vez y como una forma de resolver las carencias de soporte para el RWD en los navegadores antiguos y modernos, es decir, un polyfill.
Tienes razón, Responsive Web Design es sólo un modelo, entre otros muchos que hay, no es una respuesta a todas las preguntas ni mucho menos. Ahora, la razón por la que se ha hecho popular es precisamente porque permite resolver elegantemente muchos de los retos que el de desarrollo frontend actual presenta, con la aparición de cada vez más dispositivos capaces de ver un sitio web.
Por supuesto que no sólo de javascript está hecho el mundo ¿qué te ha hecho pensar que he dicho lo contrario? Javascript es una herramienta para un propósito y debe usarse en la medida que suple una necesidad. Sobre todo ahora que CSS puede hacer muchas cosas que antes estaban reservadas a Javascript, tanto en el campo de la presentación como -en algunos casos- de la interacción.
En cualquier caso, yo debo agradecerte, porque tu comentario ha hecho que desee retomar el tema y aclarar las posibles dudas.
Gracias.