• Imprimeix

Retícules

Tot i que l’estil gencat és responsiu i que les mides són relatives i s'adapten a la pantalla on es mostra, resulta impossible documentar el disseny amb dades relatives. Per tant, aquesta guia està expressada en píxels, i és en les descàrregues dels estils on hi ha expressats els percentatges per a cada una de les retícules.

Mides de les retícules:

  • Escriptori: 960 píxels d'amplada
  • Tauleta: 768 píxels d'amplada
  • Mòbil: 320 píxels d'amplada

Escriptori

És la retícula que regeix quan la pàgina es mostra en pantalles d'amplada major de 768 píxels, tradicionalment coneguda com a versió d'escriptori.

En la versió d'escriptori, el web fa 960 píxels d'amplada. Si la resolució de la pantalla és superior, carrega espai per l’esquerra i la dreta.

Aquestes són les columnes a les quals cal ajustar-se per desenvolupar noves pàgines i peces de contingut:

 

Retícula per a versió escriptori

Tauleta

La retícula de la versió tauleta fa 768 píxels d'amplada (amb 30 píxels de marge per a cada costat), i correspon a l'amplada que té la pantalla d'un iPad en vertical.

 

Retícula per a tauletes

Mòbil

A causa de les limitacions de mida de la pròpia pantalla, els continguts es representen normalment a una columna. Aquesta pot ser, com a mínim:

  • De 320 píxels, a sang amb el marge del mòbil.
  • De 300 píxels, amb marge de 10 píxels a banda i banda.

També es poden representar els elements a dues columnes. En aquest cas es divideix en 145 i 145 píxels deixant sempre els marges de 10 píxels a banda i banda.

 

Retícula per a mòbils

Fons de les pàgines: escriptori i tauleta

El fons de les pàgines combina les franges següents:

  • Capçalera: color de fons gris fosc #333333
  • Subcapçalera: banda de fons gris clar #F5F5F5
  • Banda de contingut blanca: color de fons #FFFFFF
  • Peu: color de fons #F5F5F5

La composició es mostra de la següent manera:

Color de fons per a pàgina completa

Els continguts es van muntant sobre bandes o pisos que es diferencien entre si pel seu color de fons, ja sigui gris clar (#F5F5F5) o blanc (#FFFFFF), començant sempre pel color gris clar (#F5F5F5), i creant un efecte zebra.

Si la pàgina té imatge de banda a banda a la capçalera, aquesta es carrega a sobre del primer bloc amb fons gris.


Color de fons de la barrera banda del pijama
Quan l’última banda de contingut és grisa, donat que el peu també ho és, se separen amb 30 píxels de blanc perquè no quedin enganxades.

Color de fons de la subcapçalera
Quan la pàgina comença amb una imatge d’impacte que va de banda a banda, aquesta carrega sobre el primer fons gris. Per tant, després de la imatge sempre va una franja blanca.

Color de fons del contingut a dues columnes
Quan el contingut es divideix en dues columnes, tot el bloc es carrega sobre fons blanc.

Fons de les pàgines: mòbil

Per a la versió mòbil, les bandes coincideixen amb la versió d'escriptori/tauleta i segueixen el mateix comportament: el primer bloc és gris clar (#F5F5F5), el segon blanc, el tercer gris clar i així successivament creant l'efecte de zebra.

 

De la mateixa manera que a la versió escriptori/tauleta:

  • Si la pàgina comença per imatge, aquesta carrega sobre fons gris i, per tant, el bloc següent és de fons blanc.
  • Si el darrer bloc de contingut està sobre fons gris, es deixa un espai blanc de 30 píxels entre aquest i el fons del peu de pàgina.
Composició de la retícula amb colors al mòbil
Data d'actualització:  06.08.2015