[\u00daltima actualizaci\u00f3n: 21\/10\/2018]<\/p>\n
El responsive design<\/i> es una aproximaci\u00f3n al dise\u00f1o de p\u00e1ginas web que tiene el objetivo de crear p\u00e1ginas 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:<\/p>\n El que probablemente sea el ‘texto fundacional’ del ‘responsive’ es A Dao of Web Design<\/a>, publicado en A List Apart<\/cite> en abril de 2000, y que aun es uno de los textos m\u00e1s relevantes sobre dise\u00f1o web.<\/p>\n Las media queries<\/i> son un m\u00f3dulo de CSS (especificaci\u00f3n en el W3C<\/a>) que permite ajustar el CSS que se aplica a cada elemento de una p\u00e1gina en funci\u00f3n de caracter\u00edsticas del navegador y dispositivo que se usa para acceder a ella, como la resoluci\u00f3n de pantalla o su profundidad de color.<\/p>\n Uno de los tipos de media query<\/i> que no<\/em> existen y que muchos desarrolladores suelen considerar pr\u00e1cticamente una necesidad es una media query<\/i> basada en el ancho de banda<\/strong>: si el ancho de banda disponible es alto serviremos una imagen de alta calidad, mientras que si estamos en una situaci\u00f3n de bajo ancho de banda serviremos im\u00e1genes con compresiones m\u00e1s altas, sacrificando calidad por el ahorro de tiempo en la descarga. A pesar de que dicha idea se ha discutido en m\u00faltiples ocasiones, hasta el momento las dificultades de implementaci\u00f3n han hecho que la idea no se haya materializado. Encontrar\u00e9is una discusi\u00f3n sobre el tema en Bandwidth Media Queries? We Don\u2019t Need \u2019Em!<\/a>.<\/p>\n Como con cualquier innovaci\u00f3n, si debemos dar soporte a navegadores relativamente antiguos, ser\u00e1 necesario utilizar polyfills<\/i> u otras soluciones alternativas. Algunas de ellas son Respond.js<\/a>, Adapt.js<\/a>, css3-mediaqueries.js<\/a> o enquire.js<\/a>.<\/p>\n Uno de los puntos m\u00e1s problem\u00e1ticos en el dise\u00f1o responsive<\/i> es el de las im\u00e1genes, como ya avanzamos en el punto anterior: servir la imagen adecuada a cada dispositivo en funci\u00f3n del contexto no es un problema sencillo. En febrero de 2013 el W3C public\u00f3 un primer borrador sobre el elemento De todas formas, aun se tardar\u00e1 en que Pod\u00e9is encontrar una gran cantidad de informaci\u00f3n al respecto en ResponsiveImages.org<\/a>. Tambi\u00e9n es una lectura interesante Responsive Images: Use Cases and Documented Code Snippets to Get You Started<\/a> (dev.opera<\/cite>, julio de 2014)<\/p>\n Quiz\u00e1 la mejor lista de recursos sea Responsive Resources<\/a>, mantenida por Brad Frost.<\/p>\n Understanding Responsive Web Design: Clear Concepts and Practical Applications<\/a> (Enero de 2013)<\/p>\n Responsive Web Design: Using Fonts Responsively<\/a> (Enero de 2013)<\/p>\n Responsive Tables<\/a> (Febrero de 2013)<\/p>\n\n
em<\/code>s o porcentajes, que responden a los diferentes tama\u00f1os del viewport<\/i> del navegador, y no en unidades absolutas, como los p\u00edxeles);<\/li>\nMedia Queries<\/h2>\n
Im\u00e1genes<\/h2>\n
picture<\/code><\/a>. El elemento est\u00e1 implementado ya en las versiones 33 de Firefox y 38 de Chrome y a julio de 2014 se estaba trabajando en su implementaci\u00f3n en Webkit.<\/p>\npicture<\/code> est\u00e9 suficientemente implementado en los navegadores (siempre pod\u00e9is consultar la informaci\u00f3n m\u00e1s actualizada en el apartado correspondiente de canIuse.com<\/a>). Mientras tanto, disponemos de algunas soluciones temporales<\/em>, cada una de ellas con sus ventajas e inconvenientes:<\/p>\n\n
.htaccess<\/code> con PHP y JavaScript.<\/dd>\nPara saber m\u00e1s<\/h2>\n