[Darrera actualització: 21/10/2018]
El responsive design és una aproximació al disseny de pàgines web que té com a objectiu crear pàgines que donin una bona experiència d’usuari independentment del dispositiu que s’utilitzi per accedir-hi. Els elements que solen caracteritzar-són tres:
- l’ús d’una retícula fluida (és a dir, definida usant unitats com
ems o percentatges, que responen a les diferents mides del viewport del navegador, i no en unitats absolutes, com els píxels); - l’ús de continguts flexibles (per exemple, definint l’amplada de les imatges com un percentatge de l’ample del seu contenidor, i no en píxels);
- l’ús de media queries per permetre que el disseny canviï en funció de les característiques del navegador que hi accedeix.
El que probablement sigui el ‘text fundacional’ del ‘responsive’ és A Dao of Web Design, publicat a A List Apart l’abril del 2000, i que encara és un dels textos més rellevants sobre disseny web.
Media Queries
Les media queries són un mòdul de CSS (especificació al W3C) que permet ajustar el CSS que s’aplica a cada element d’una pàgina en funció de característiques del navegador i dispositiu que s’usa per accedir-hi, com la resolució de pantalla o la seva profunditat de color.
Un dels tipus de media query que no existeixen y que molts desenvolupadors acostumen a considerar pràcticament una necessitat és una media query basada en l’ample de banda: si l’ample de banda disponible és alt servirem imatges d’alta qualitat, mentre que si estem en una situació de baix ample de banda servirem imatges amb compressions més altes, sacrificant qualitat per l’estalvi de temps en la descàrrega. Malgrat que aquesta idea s’ha discutit en múltiples ocasions, fins al moment les dificultats d’implementación han fet que la idea no s’hagi materialitzat. Trobareu una discussió sobre el tema a Bandwidth Media Queries? We Don’t Need ’Em!.
Com amb qualsevol innovació, si hem de donar suport a navegadors relativament antics, serà necessari utilitzar polyfills o altres solucions alternatives. Algunes d’elles són Respond.js, Adapt.js, css3-mediaqueries.js o enquire.js.
Imatges
Un dels punts més problemàtics en el disseny responsive és el de les imatges, com ja hem avançat en el punt anterior: servir la imatge adequada a cada dispositiu en funció del context no és un problema senzill. El febrer de 2013 el W3C va publicar un primer esborrany sobre l’element picture. L’element està implementat en les versions 33 de Firefox i 38 de Chrome, i el juliol de 2014 s’estava treballant en la seva implementació en Webkit.
En qualsevol cas, encara es trigarà a que picture estigui suficientment extès entre els navegadors (sempre podeu consultar la informació més actualitzada al corresponent apartat de canIuse.com). Mentrestant, disposem d’algunes solucions temporals, cadascuna d’elles amb els seus avantatges i inconvenients:
- Adaptive Images
- Combina l’ús d’un fitxer
.htaccessamb PHP i JavaScript. - jQuery Picture
- Plug-in de la biblioteca de JavaScript jQuery.
- Responsive Img
- Plug-in de la biblioteca de JavaScript jQuery.
Trobareu una gran quantitat d’informació al respecte a ResponsiveImages.org. També és una lectura interessante Responsive Images: Use Cases and Documented Code Snippets to Get You Started (dev.opera, juliol de 2014)
Per a saber-ne més
Potser la millor llista de recursos sigui Responsive Resources, mantinguda per Brad Frost.
Understanding Responsive Web Design: Clear Concepts and Practical Applications (gener de 2013)
Responsive Web Design: Using Fonts Responsively (gener de 2013)
Responsive Tables (febrer de 2013)
The Overflow Pattern (7 de gener, 2013)
Responsive Design and Accessibility (febrer de 2013)
Una cosa que hem de considerar és que els problemes del disseny reponsive no es limiten al disseny, ni tan sols al disseny i desenvolupament, sinó que els continguts que publiquem també han de tenir en compte la nova filosofia:
Tot i que el responsive és una part essencial d’una estratègia de continguts multidispositiu, no pot ser-ne l’única component, donat que s’han de considerar més aspectes. Un article molt interessant sobre el tema és You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy (Maximiliano Firtman, Smashing Magazine, juliol de 2014)