Grille (Grid), et responsive Design

Bonjour,

La grille est juste un design pattern explicitant le fait d'avoir plusieurs colonnes sur une seule ligne. Avant on codait ça avec des tableaux (beurk !). Il existe plusieurs types de grilles (fixe, liquid, fluid) qui te permettent d'avoir le comportement souhaité. Tu peux ainsi choisir la taille de chaque colonne, la gouttière entre les colonnes et même la taille maximale.

1. 960px est la taille de la grille pour 960grid. Cette grille est un peu dépassée à l'heure actuelle. Mais il existe de grilles plus ou moins grande comme 1140px http://cssgrid.net/ par exemple. Il existe une nouvelle variété de grille dites grille fluide http://twitter.github.com/bootstrap/scaffolding.html#gridSystem. Le conteneur va prendre la largeur de l'écran. Si tu souhaites placer deux élément sur une ligne, chacun fera 50% (570px si l'écran fait 1140px, 480px pour un écran de 960px, ...), Ce type de grille est donc totalement responsive.

2. Oui, il suffit de regarder Foundation. Cette grille est de type 'Mobile first', c'est à dire qu'elle a été pensée pour un mobile et s'adapte aux écrans plus grands (tablettes, puis PC, puis écran TV). Il s'agit d'une grille fluide.

Sinon, il existe un troisième type de grille : la grille dite liquide, c'est une grille mixte :

• grille fixe au dessus de 768px (chaque colonne possède une taille en px) - 768px est une valeur arbitraire mais réaliste, je te conseille de la garder.
• grille fluide en dessous (chaque colonne possède une taille en %).
  C'est le principe de Bootstrap.

3. Le principe de grille liquide est à mon sens le plus sympa, cela permet d'avoir une taille maximale de grille afin de ne pas avoir un site trop étiré sur grands écrans mais quand même adapté aux petits écran (smartphones, GPS, ...).

Il existe de générateurs de grilles sur Internet dans lesquels tu pourras préciser toutes ces options.

Pour ma part je pars de Bootstrap ou Foundation, qui sont de très bonnes bases et j'adapte si nécessaire (mais j'en ai rarement besoin). Tu peux ensuite, grâce aux media queries, définir ou modifier le comportement de ta grille pour des tailles d'écrans non prévus par le système.

Je te remercie pour ta réponse, qui éclaire pas mal de point obscure sur ce sujet.J'ai néanmoins d'autre point "noir" pour le moment.Comme j'aime connaitre un sujet le plus possible, pour toutes les conditions, forcement des chose m'échappent encore.

1/ Tu utilises Bootstrap, mais comment t'en sers tu pour les site de taille "pc" 1300+? (je parle de la grille bien entendu). Utilises-tu la grille fluide?( je prefere les tailles fixes, mais bon...).
Si j'ai bien compris, c'est ce que tu fais avec Foundation.

2/ Penses-tu qu'il est possible avec 2/3 changements "rapide" de valeur, d'adapter la grille Bootstrap 960, a d'autre taille (1920 par exemple,1280, etc), afin de faire des tailles fixes jusqu'a un certains seuil? (c'est le principe de ta grille "liquide" si j'ai bien compris).
J'ai d'ailleurs vu que 960grid permet de faire des grilles a la taille que l'on souhaite. ce qui peut permettre, avec des médias, de gérer plusieurs design pour faire du responsive.

Comme tu peux le constater, j'essaie de trouver un moyen de pouvoir faire des tailles fixes, car j'ai horreur des pourcent, dès qu'un design un peu "poussé" est fait.
Je pose des questions "bêtes" mais si ça peut aider d'autres personnes, tant mieux, que les gens ne sortent pas avec plus de question après avoir lu ce topic, qu'avant :D

Ps: J'ai quand même du mal a comprendre pourquoi BootStrap a pris 960, alors que les écrans peuvent être 2fois plus grand.

Merci en tout cas de ta précédente réponse.

Comme j'aime connaitre un sujet le plus possible, pour toutes les conditions, forcement des chose m'échappent encore.
C'est tout à ton honneur et c'est comme ça qu'on progresse. En comprenant le sujet et pas simplement en appliquant.

1. Bootstrap est basé sur 960gs car Bootstrap est un framework CSS qui est utilisé par des millions de personnes et doit donc proposer une base solide. Il y a énormément de personnes à être sur du 1024px, voire moins, notamment au travail. Seuls les geeks possèdent de grands écrans au boulot. 960px est une largeur qui permet à des grands écrans d'afficher le contenu normalement (même si il y a beaucoup de vide) et aux plus petits écrans d'avoir un rendu pas trop trop moche.
   Par ailleurs, si tu analyses la documentation, Bootstrap propose une grille de 1170px en mode liquid.
   Pour répondre à ta question, cela dépend des cas. Si je dois faire un site visualisable par des internautes, alors je reste sur la version 1170px. Cela permet de ne pas avoir un design trop étiré. Si je dois coder une interface d'administration, je réfléchis à comment utiliser tout l'écran. Avoir un site de 1920px de large présente plus d'inconvénients d'affichage que d'avantage si le contenu est uniquement du texte, des images, ... . La bonne taille d'une phrase est environ 20-25 mots par ligne. Au delà, le contenu va être difficile à lire.

2. Oui, il te suffit d'analyser le code de Bootstrap dans la version responsive ( http://twitter.github.com/bootstrap/examples/hero.html). Tu peux voir que le design se fait par pallier au dessus de 768px et devient fluide en dessous. Tu peux donc t'amuser à rajouter des media queries pour modifier le comportement. Concrètement, il te suffit de prendre le media queries écrit pour un intervalle et de le coller avec ton nouvel intervalle et tes nouvelles valeurs.

J'ai par contre un peu de mal à comprendre pourquoi tu n'aimes pas le design en pourcentage ? Car c'est la meilleur façon de développer une grille adaptée à n'importe quel écran et pour n'importe quelle densité de pixels. Prenons deux tablettes par exemple, même si elles ont toutes les deux la même taille d'écran, si la densité de pixels est différente, le rendu ne sera pas le même et tu peux te retrouver avec des éléments mal positionnés si tu le codes en px (ex : une barre de recherche contenue dans un bloc qui dépasse de celui ci). Avec une gestion en pourcentage, tu t'affranchis de ces problèmes là. On se rapproche du développement d'interface pour Android avec les mêmes problématiques et la même façon de la résoudre.

Pour ma part, j'utilise la grille fluide de Bootstrap (Bootstrap possède les 3 types de grilles), tout en % donc. Par contre j'ai fixé une taille maximale de 1170px pour mon conteneur. Si mon écran est grand (PC), j'ai un site qui reste visible sans avoir de grosses bandes, si mon écran est plus petit (PC toujours), le site prend tout l'écran mais les colonnes sont toujours placées de gauche à droite et si l'écran devient encore plus petit (smartphone) les colonnes se placent les unes en dessous des autres. Et comme expliqué plus haut, les largeurs en pourcentage me permettent de gérer les densités de pixels sans trop de réajustement.

Le plus gros soucis avec le responsive web design, ce n'est pas les grands écrans, ce sont les plus petits. Gérer la place sur les smartphones peut rapidement devenir un casse tête.

Ces questions/réponses sont très intéressantes. Je prendrai le temps de vous lire à de ces jours, car je suis dans le même cas que l'auteur. Je suis un gros fana du bootstrap mais c'est vrai que j'aimerais comprendre ce système de grilles.

Je te remercie pour tes réponses PrBaron.

J'ai ainsi pu comprendre 2/3 choses intéressantes sur ce sujet grâce a toi et a tes explications.
J'ai aussi fais des "recherches" et beaucoup de sites sont encore au format 960 (entre 950 et 1050 pour la plupart on va dire), ce qui prouve que j'avais tort, et que cette largeur est encore beaucoup utilisé de nos jours.

Pour le pourcentage, c'est surtout une question design, selon le design, ça peut être très contraignant.

J’espère que ce sujet servira pour d'autre personne, pour répondre a 2/3 questions. Je ne dois pas être le seul a avoir la qualité, et le défaut, d'être "bloqué" sur un sujet dès que j'ai des points d'interrogation dessus.

Les grilles en webdesign c'est très magnifique, et le fait d'utiliser bootstrap avec c'est vraiment un bonheur absolu. sur ce lien j'ai appris plein de trucs

Grafikart a fait un tres bon tutoriel sur les grille et te permet de créer ton propre systeme.

http://www.grafikart.fr/tutoriels/html-css/grille-responsive-css-498