Christophe Gindro | 2 Messages de forum
20 oct

Les grilles sont utilisées en imprimerie pour structurer la mise en page. Elle permettent de définir des colonnes, séparées par des gouttières, pour positionner les contenus.

Ce principe a été adapté pour les pages web, et il existe de nombreux système de grille CSS.

960.gs {PNG} Nous avons choisi 960.gs il y a quelques années car il nous semblait souple et simple d’usage.
Pourquoi 960 ? Cela correspond à la largeur de la page de 960 pixels définie par rapport à la résolution la plus courante de 1024x768.
Cette largeur de 960px, permet d’avoir une structure, au choix,

  • en 12 colonnes de 60px avec 10px de marge pour chacune (soit une gouttière de 20px)
  • en 16 colonnes de 40px avec 10px de marge pour chacune (soit une gouttière de 20px)
  • en 24 colonnes de 30px avec 5px de marge pour chacune (soit une gouttière de 10px) Exemple de grille en 16 colonnes {PNG}

Les colonnes sont définies via des div et l’affectation de classes grid_1, grid_2, …, qui permettent de fixer leur largeur.
Elles utilisent la propriété float pour se positionner côte-à-côte, et sont séparées par la gouttière, qui dépend des marges qui peuvent être annulées par l’affectation de classes .alpha { margin-left: 0; } et .omega { margin-right: 0; }


18 sep

Le Responsive Web Design (traduire par "Web Design Réactif" ou devrait-on dire "conception d’interfaces graphiques adaptatives pour l’Internet" ?) est un concept explicité par Ethan Marcotte pour dépasser les limites que la variabilité des systèmes d’affichages impose. La problématique est : comment concevoir des interfaces Web qui s’adaptent aux conditions de navigations de l’usager, alors que celles-ci varient considérablement d’un environnement à l’autre (ordinateur de bureau, téléphone portable, tablette PC…) ?

Dans cet essai publié sur A List Apart Magazine, Ethan Marcotte montre notamment comment utiliser le CSS3 et les "requêtes de média" pour adapter les feuilles de styles aux différents appareils en fonction de la taille de l’écran ou de sa résolution. Il s’agit alors de les interroger pour modifier l’affichage de l’interface (positionnement des menus, nombre de colonnes, taille des images, etc.) afin de maintenir une présentation optimale de l’information.

Un exemple de comportement d’interface adaptative est disponible à cette adresse : http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html.

 
 

Catégories

 
 
Retour accueil  | Nous contacter  | Suivre la vie du site Flux RSS  | SPIP