dijous, 26 de gener de 2012

Responsive Web Design: Elements

Hi ha tres elements importants en el Responsive Web Design:
  • Grid o quadrícula flexible 
  • Imatges flexibles 
  • Media queries de CSS 


Grid o quadrícula flexible 
El primer element que tenim és el Grid o quadrícula flexible. Avui en dia molts de nosaltres fem anar un grid d’amplada fixa (per exemple el sistema de grid de 960) que és un mètode molt eficaç per dissenyar per una resolució de pantalla concreta. Ara que les resolucions de pantalla han canviat tant, un disseny d'amplada fixa no és la millor solució, cal que fem anar una quadrícula flexible que pugui donar resposta a les diferents resolucions de pantalla.
En una quadrícula flexible es fa una revisió completa en termes de proporcions, de manera que tots els elements canvien de mida en relació uns amb altres quan la finestra s'estira o es contrau. En una quadrícula flexible s’usen unitats percentuals per calcular les proporcions del elements.


Imatges flexibles
El segon element que tenim són les imatges flexibles. Normalment això ho podem aconseguir manipulant l’alçada i l’amplada. Un altre mètode per a que les imatges encaixin en diferents resolucions de pantalla és utilitzar la propietat CSS overflow. També es poden crear múltiples versions d'una imatge i anar-les cridant en funció de la mida de la pantalla actual.
Un dels mètodes més populars per canviar la mida de les imatges és utilitzar la propietat max-width de CSS. Aquesta propietat funciona molt bé sempre que altres estils no ens l’anul·lin. El problema amb aquesta tècnica és que la representació de la imatge es veu afectada quan la imatge ha de ser redimensionada a escales molt petites
També hi ha altres tècniques usant combinacions de CSS i HTML5.


Consultes relatives als diferents sistemes de visualització o Media queries de CSS 
El tercer element són les Media queries de CSS. Aquest sistema es basa en limitar un conjunt de propietats CSS per a que només tinguin efecte en pantalles amb una amplada mínima determinada. Gràcies al CSS3 les Media queries permeten recollir dades sobre els visitants i la utilitzen per aplicar els estils CSS adequats i específics d'acord amb la mida actual del navegador.
Amb les Media queries, els dissenyadors i maquetadors poden crear diversos dissenys usant només els documents HTML i selectivament proporcionar fulls d'estil sobre la base de diferents característiques, com ara, la mida del navegador, l'orientació, la resolució o el color.

En continuem parlant