[Darrera actualitzaci\u00f3: 21\/10\/2018]<\/p>\n
El responsive design<\/i> \u00e9s una aproximaci\u00f3 al disseny de p\u00e0gines web que t\u00e9 com a objectiu crear p\u00e0gines que donin una bona experi\u00e8ncia d’usuari independentment del dispositiu que s’utilitzi per accedir-hi. Els elements que solen caracteritzar-s\u00f3n tres:<\/p>\n El que probablement sigui el ‘text fundacional’ del ‘responsive’ \u00e9s A Dao of Web Design<\/a>, publicat a A List Apart<\/cite> l’abril del 2000, i que encara \u00e9s un dels textos m\u00e9s rellevants sobre disseny web.<\/p>\n Les media queries<\/i> s\u00f3n un m\u00f2dul de CSS (especificaci\u00f3 al W3C<\/a>) que permet ajustar el CSS que s’aplica a cada element d’una p\u00e0gina en funci\u00f3 de caracter\u00edstiques del navegador i dispositiu que s’usa per accedir-hi, com la resoluci\u00f3 de pantalla o la seva profunditat de color.<\/p>\n Un dels tipus de media query<\/i> que no<\/em> existeixen y que molts desenvolupadors acostumen a considerar pr\u00e0cticament una necessitat \u00e9s una media query<\/i> basada en l’ample de banda<\/strong>: si l’ample de banda disponible \u00e9s alt servirem imatges d’alta qualitat, mentre que si estem en una situaci\u00f3 de baix ample de banda servirem imatges amb compressions m\u00e9s altes, sacrificant qualitat per l’estalvi de temps en la desc\u00e0rrega. Malgrat que aquesta idea s’ha discutit en m\u00faltiples ocasions, fins al moment les dificultats d’implementaci\u00f3n han fet que la idea no s’hagi materialitzat. Trobareu una discussi\u00f3 sobre el tema a Bandwidth Media Queries? We Don\u2019t Need \u2019Em!<\/a>.<\/p>\n Com amb qualsevol innovaci\u00f3, si hem de donar suport a navegadors relativament antics, ser\u00e0 necessari utilitzar polyfills<\/i> o altres solucions alternatives. Algunes d’elles s\u00f3n Respond.js<\/a>, Adapt.js<\/a>, css3-mediaqueries.js<\/a> o enquire.js<\/a>.<\/p>\n Un dels punts m\u00e9s problem\u00e0tics en el disseny responsive<\/i> \u00e9s el de les imatges, com ja hem avan\u00e7at en el punt anterior: servir la imatge adequada a cada dispositiu en funci\u00f3 del context no \u00e9s un problema senzill. El febrer de 2013 el W3C va publicar un primer esborrany sobre l’element En qualsevol cas, encara es trigar\u00e0 a que Trobareu una gran quantitat d’informaci\u00f3 al respecte a ResponsiveImages.org<\/a>. Tamb\u00e9 \u00e9s una lectura interessante Responsive Images: Use Cases and Documented Code Snippets to Get You Started<\/a> (dev.opera<\/cite>, juliol de 2014)<\/p>\n Potser la millor llista de recursos sigui Responsive Resources<\/a>, mantinguda per Brad Frost.<\/p>\n Understanding Responsive Web Design: Clear Concepts and Practical Applications<\/a> (gener de 2013)<\/p>\n Responsive Web Design: Using Fonts Responsively<\/a> (gener de 2013)<\/p>\n Responsive Tables<\/a> (febrer de 2013)<\/p>\n\n
em<\/code>s o percentatges, que responen a les diferents mides del viewport <\/i> del navegador, i no en unitats absolutes, com els p\u00edxels);<\/li>\nMedia Queries<\/h2>\n
Imatges<\/h2>\n
picture<\/code><\/a>. L’element est\u00e0 implementat en les versions 33 de Firefox i 38 de Chrome, i el juliol de 2014 s’estava treballant en la seva implementaci\u00f3 en Webkit.<\/p>\npicture<\/code> estigui suficientment ext\u00e8s entre els navegadors (sempre podeu consultar la informaci\u00f3 m\u00e9s actualitzada al corresponent apartat de canIuse.com<\/a>). Mentrestant, disposem d’algunes solucions temporals<\/em>, cadascuna d’elles amb els seus avantatges i inconvenients:<\/p>\n\n
.htaccess<\/code> amb PHP i JavaScript.<\/dd>\nPer a saber-ne m\u00e9s<\/h2>\n