Responsive Web Design – One Web to Rule them All
19 \19UTC abril \19UTC 2012 Deja un comentario

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.
Comentarios recientes