[Última actualización: 21/10/2018]
El responsive design es una aproximación al diseño de páginas web que tiene el objetivo de crear páginas que den una buena de experiencia de usuario independientemente del dispositivo que se use para acceder a ellas. Los elementos que suelen caracterizarla son tres:
- el uso de una retícula fluida (esto es, definida usando unidades como
ems o porcentajes, que responden a los diferentes tamaños del viewport del navegador, y no en unidades absolutas, como los píxeles); - el uso de contenidos flexibles (por ejemplo, definiendo el ancho de las imágenes como un porcentaje del ancho de su contenedor, y no en píxeles);
- el uso de media queries para permitir que el diseño cambie en función de las características del navegador que accede a él.
El que probablemente sea el ‘texto fundacional’ del ‘responsive’ es A Dao of Web Design, publicado en A List Apart en abril de 2000, y que aun es uno de los textos más relevantes sobre diseño web.
Media Queries
Las media queries son un módulo de CSS (especificación en el W3C) que permite ajustar el CSS que se aplica a cada elemento de una página en función de características del navegador y dispositivo que se usa para acceder a ella, como la resolución de pantalla o su profundidad de color.
Uno de los tipos de media query que no existen y que muchos desarrolladores suelen considerar prácticamente una necesidad es una media query basada en el ancho de banda: si el ancho de banda disponible es alto serviremos una imagen de alta calidad, mientras que si estamos en una situación de bajo ancho de banda serviremos imágenes con compresiones más altas, sacrificando calidad por el ahorro de tiempo en la descarga. A pesar de que dicha idea se ha discutido en múltiples ocasiones, hasta el momento las dificultades de implementación han hecho que la idea no se haya materializado. Encontraréis una discusión sobre el tema en Bandwidth Media Queries? We Don’t Need ’Em!.
Como con cualquier innovación, si debemos dar soporte a navegadores relativamente antiguos, será necesario utilizar polyfills u otras soluciones alternativas. Algunas de ellas son Respond.js, Adapt.js, css3-mediaqueries.js o enquire.js.
Imágenes
Uno de los puntos más problemáticos en el diseño responsive es el de las imágenes, como ya avanzamos en el punto anterior: servir la imagen adecuada a cada dispositivo en función del contexto no es un problema sencillo. En febrero de 2013 el W3C publicó un primer borrador sobre el elemento picture. El elemento está implementado ya en las versiones 33 de Firefox y 38 de Chrome y a julio de 2014 se estaba trabajando en su implementación en Webkit.
De todas formas, aun se tardará en que picture esté suficientemente implementado en los navegadores (siempre podéis consultar la información más actualizada en el apartado correspondiente de canIuse.com). Mientras tanto, disponemos de algunas soluciones temporales, cada una de ellas con sus ventajas e inconvenientes:
- Adaptive Images
- Combina el uso de un fichero
.htaccesscon PHP y JavaScript. - jQuery Picture
- Plug-in de la biblioteca de JavaScript jQuery.
- Responsive Img
- Plug-in de la biblioteca de JavaScript jQuery.
Podéis encontrar una gran cantidad de información al respecto en ResponsiveImages.org. También es una lectura interesante Responsive Images: Use Cases and Documented Code Snippets to Get You Started (dev.opera, julio de 2014)
Para saber más
Quizá la mejor lista de recursos sea Responsive Resources, mantenida por Brad Frost.
Understanding Responsive Web Design: Clear Concepts and Practical Applications (Enero de 2013)
Responsive Web Design: Using Fonts Responsively (Enero de 2013)
Responsive Tables (Febrero de 2013)
The Overflow Pattern (7 de enero, 2013)
Responsive Design and Accessibility (febrero de 2013)
Algo que debe considerarse es que los problemas del diseño reponsive no se limitan al diseño, ni al diseño y el desarrollo, sino que los contenidos que publicamos también deben tener en cuenta la nueva filosofía:
Aunque el responsive es una parte esencial de una estrategia de contenidos multidispositivo, no puede ser el único componente de dicha estrategia, puesto que deben considerarse más aspectos. Un artículo muy interesante sobre el tema es You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy (Maximiliano Firtman, Smashing Magazine, julio de 2014)