dimecres, 25 de gener del 2012

Responsive Web Design: una aproximació

L’anomenat Responsive Web Design neix de la necessitat i de la visió de futur de les noves tecnologies i dispositius, sobretot dels dispositius mòbils, que han anat apareixent en els últims temps. Ara mateix ens trobem immersos en un amalgama de dispositius: tablets, smartphones, mini portàtils, així com monitors de sobretaula cada cop més grans (panoràmics, panoràmics ampliats etc.).
Si parlem en termes econòmics no surt a compte dissenyar i desenvolupar diferents llocs webs pels diferents dispositius, i el seu manteniment pot resultar difícil en quan a temps i diners.
El concepte de Responsive Web Design fa referència al procés de disseny i desenvolupament de llocs web que són capaços de reaccionar a les accions de l’usuari i detectar el dispositiu amb el que s’està visualitzant el lloc web, amb la finalitat de proporcionar la millor experiència d’usuari en matèria de navegabilitat i llegibilitat.



NOTA: el terme Responsive Web Design l’hem vist traduït com a Disseny web sensible, Disseny web de resposta o Disseny web adaptable, nosaltres no el traduirem i sempre en farem referència al terme en anglès.

Qui primer en van parlar va ser al web A List Apart on ara tenim la possibilitat de comprar un llibre sencer sobre el Responsive Web Design.
Llegiu l’article: http://www.alistapart.com/articles/responsive-web-design/ 
El llibre: http://www.abookapart.com/products/responsive-web-design 

La teoria darrera del Responsive Web Design ens parla de la utilització de grids (o quadrícules) i sistemes de plantilles, optimització d’imatges, i media queries de CSS de manera que no es compromet el disseny d’un web a un sola mida de pantalla o un sol dispositiu. Si es dissenyen i desenvolupen correctament els llocs webs sempre seran visualitzats correctament i respondran correctament.
La idea bàsica del Responsive Web Design és que un lloc web ha de "respondre" al dispositiu en el que l’estem visualitzant. En termes generals, això pot significar coses com:
  • Adaptar el disseny per adaptar-se a diferents mides de pantalla 
  • Canviar la mida de les imatges per adaptar-se a la resolució de la pantalla 
  • La simplificació d'elements de la pàgina per a l'ús mòbil 
  • Ocultar els elements no essencials 
  • Tenir en compte que les pantalles tàctils dels dispositius mòbils es fan anar amb els dits en quant a enllaços i botons 
  • Detectar i respondre a les característiques mòbils, com la geolocalització i l'orientació del dispositiu. 
En continuem parlant