JAVAJAN S.L.

Manlleu

facebook
Català
Castellano
English

Guia web

Mètode d'implementació de webs responsive

Actualment és gairebé necessari desenvolupar webs que estiguin totalment adaptades al seu ús des de múltiples dispositius (tablet, mòbils, portàtils, PCs...). Aquest apartat pretén orientar al dissenyador gràfic, que fins ara creava els dissenys web dins uns amples estàndards, sobre què ha de tenir en compte a l'hora de plantejar els dissenys web responsive (adaptables) i la diversitat de possibilitats que ofereixen les llibreries JQuery (plugins que implementen diferents funcions en una web: formes de desplegar menús, carrousels d'imatges, dinàmiques d'usabilitat, etc).

Javajan implementa BOOTSTRAP, un dels principals frameworks de desenvolupament d'entorns web responsive. És essencialment una col·lecció de fulles d'estil i funcions Javascript auxiliars que ens permeten construir molt eficaçment la maquetació base de totes les pàgines del website i garantitza una correcta adaptació dels elements a qualsevol dispositiu.

http://getbootstrap.com/examples/theme/ Pàgina de referència de la implementació responsive; si variem l'amplada de la finestra del navegador, podrem observar com es comporten els diferents elements, fent especial atenció al menú principal, doncs es transforma totalment per adaptar la correcta usabilitat en dispositius mòbils.

Exemple d'estructura de blocs segons guia Bootstrap de 12 columnes:

Exemple de comportament de blocs segons l'ample del dispositiu de visualització:

Conceptes bàsics en web responsive

Principalment hem de tenir en compte que:

  • En una web responsive no es treballa amb píxels (en general) sino en %, on 100% és l'ample total del dispositiu en el qual visualitzarem la web.
  • Els elements que es col·loquen un al costat de l'altre, a mida que es redueix l'ample de la pantalla passen a sota: per exemple, si tenim una fila de 6 columnes, podem fer que passin a 2 files de 3 columnes i finalment (o directament) a 6 files de una columna. També es pot fer que mai es recol·loquin, o sigui que per més que es redueix la pàgina, mai es recol·loqui en una sola fila. Exemples a http://getbootstrap.com/examples/grid/.

  • El número de columnes sempre ha de sumar 12, tenint en compte que 12 és el 100% de l'ample total de la pàgina: per exemple, col_8 + col_2 + col_2, sempre tenint en compte que el total 8+2+2 ha de sumar 12. Lo més correcte al plantejar un disseny responsive és dividir l'espai de treball en 12 parts iguals mitjançant guíes i columnes i treballar seguint l'estructura proposada.
  • El comportament de les columnes en mòbil fa que es recol·loquin unes sota les altres, idealment en el mateix ordre en el que apareixen. Si és necessari, en mòbil també podem amagar alguns continguts (si hi ha massa informació o volem simplificar-ho), alhora que potenciar-ne uns altres (imatges per exemple).
  • L'espai entre columnes que ens defineix el Bootstrap és de 30px (15px per cada banda). Es pot variar per tota la web o per una part en concret.
  • Pel què fa a la resta d'elements, tenir en compte que tenim moltíssimes eines aquí: http://bootsnipp.com/ que ens poden ajudar a l'hora de pensar en la usabilitat d'un disseny (elements desplegables, menús o peus fixes a la pàgina, formularis, etc). Només cal escriure al cercador la paraula clau per a trobar diversos exemples sobre un mateix component web.
web responsive

Si vols mantenir-te al dia de les últimes novetats i tendències en disseny web:

Subscriu-te al nostre informatiu de noticies