Grid 960 etc...

(reprise du message précédent)

ernstein : J'ai un retour de ce que je m'étais fait qui est similaire et c'est relativement pratique... Niveau temps passé c'est pareil que d'écrire .grid_8 dans sont markup sauf qu'on le fait dans son fichier LESS à la place mais sinon ça revient grosso modo au même...

HammHetfield a écrit :

Et à vue d'oeil, largeur = hauteur * 1.618 le Golden Ratio étant 1:1.618 je doute que ça soit un hasard

Toi, t'as pas le compas dans l'oeil, je te l'assure... Les images ont un ratio de 1:2 (416px de large pour 208 de haut pour la taille moyenne).
Une fois de plus le golden ratio est absent (je passerais sur le fait que lui et énormément d'autres chiffres "clés" sont en réalité absent de là où les urbans legend les mettent).


Sinon pour les grids, j'avoue que je connais pas... mais jusque là, je vois pas ce que ça apporte de plus qu'un bon programme de dessin bien calibré. Quand j'ai fait mon design, la moindre image, colonne et compagnie était placée au px près et j'avais mes chiffres via mon programme de dessin.
Modifié par Lothindil (09 Sep 2011 - 17:57)

Le nombre d'or est très difficilement utilisable pour le web design vu que les mise en pages son rarement figées.

bzh a écrit :
Le nombre d'or est très difficilement utilisable pour le web design vu que les mise en pages son rarement figées.

Pourquoi? Le web design implique juste de s'en servir différemment que ce qu'on a l'habitude de faire sur papier. Par exemple, on peut utiliser le golden ratio comme rapport de largeur entre deux ou trois blocs. On peut aussi l'utiliser sur les images dont on maitrise plus facilement le rapport hauteur/largeur.
C'est une vision très réductrice que de ne voir dans le nombre d'or qu'un rapport hauteur/largeur.
Vous pouvez jetez un oeil sur http://golden-ratio-grid.impossible-exil.info pour vous faire une idée de ce qu'on peut faire sur le web avec le golden ratio.

Je vois pas l'intérêt du nombre d'or tout court... Ca reste pour moi un des gros mythes que constitue la numération de l'esthétique.

A partir de là, je vois pas pourquoi j'irais me casser la tête avec un ratio de 1:1,618 alors qu'un ratio de 2:3 (1:1,5) ou 3:5 (1:1,66) est nettement plus simple à employer... idem pour les photos, j'ai du mal à voir l'intérêt d'un ratio bizarre alors que les appareils non-panoramiques travaillent avec un format standard de 3:4 (1:1,33)^^

Bien vu pour le 1:2 j'ai en effet pas de compas dans l'oeil

Sinon c'est probablement plus une façon de voir la chose, moi j'aime bien avoir un "set" de nombres sur lesquels je m'appuies, ça me semble plus sensé que de mettre des tailles plus ou moins au pif... Après tout entre utiliser un ratio sorti de nulle part et utiliser un ration qui n'a peut être aucun intérêt... Je vois pas pourquoi l'un serait mieux que l'autre.

Au fait, joli vert, j'aime bien ton site.
En général on part du grid system pour coder, a priori, puisque l'on conçoit avec.

Donc si ton site est déjà bien codé et qu'il tient la route, tu n'auras pas forcément intérêt à tout reprendre avec les grilles.

IshimaruChiaki a écrit :
Donc puisque le design est déjà codé et que la partie PHP est déjà bien avancée, est-ce possible d'utiliser les grilles pour les ajustements ?

Utiliser un framework CSS qui propose une ou plusieurs grilles pré-déterminées? Non, ça me semble pas trop jouable.

Par contre, tu peux prendre certaines données de base de ton design (largeur, structure) et essayer de déterminer une grille personnalisée. Par exemple tu as un conteneur principal de 980px de large (960 + 10px de padding de chaque côté). Ça pourrait être aligné sur une grille avec 12 colonnes de 60px et des gouttières de 20px (60*12 + 20*13 = 980) et tu pourrais modifier les marges et les largeurs de certains éléments pour te caler sur cette grille. Ou bien une grille avec des colonnes de 65px et des gouttières de 15px (65*12 + 13*15 = 975).

Après avoir déterminé la grille qui te convient, tu peux utiliser un élément placé en absolu par dessus ton design, avec une image de fond comme celle-ci répétée en hauteur, pour te servir de guide pour tes corrections CSS. Il y a aussi des bookmarklets, extensions pour les navigateurs et logiciels qui font sensiblement la même chose.

Pour récapituler sur la régularité de disposition des éléments dans une page:
1. Si tu veilles déjà à avoir des alignements verticaux corrects (donc pas un élément qui commence à 10px du bord gauche, un autre à 12px et un troisième à 15px...), tu obtiens un design plus régulier qui a l'air plus «solide».
2. Si tes repères verticaux sont eux-mêmes répartis régulièrement et logiquement, tu as une grille verticale qui t'apporte un rythme horizontal.
3. Si en plus tu travailles le rythme vertical, là tu peux obtenir des choses vraiment tip top. Mais c'est assez compliqué à gérer et le gain est moins évident que pour le rythme horizontal je trouve.

L'utilisation d'un framework CSS ou pas, ensuite, c'est du détail d'implémentation, et à la rigueur on s'en fiche.

Donc pour répondre à ta question: pour ton design, ça serait bien d'arriver au moins au niveau 1 (avoir des repères verticaux arbitraires et s'y tenir), éventuellement au niveau 2 (se caler sur une grille verticale régulière).
Modifié par fvsch (24 Sep 2011 - 15:14)

Merci Florent pour ces précisions.
J'avais déjà commencé à faire des ajustements, sauf qu'après avoir placé ma grille faite avec gimp, mes pages semblent mieux fitter avec du 16 colonnes qu'avec du 12 colonnes.

Voici ce que ça donne : http://dl.dropbox.com/u/25752921/ishimaru-design/local-grid1.png
les deux colonnes de blocs sont de largeur identiques, et l'espace entre les deux arrivent au milieu d'une colonne.

Peut-être que c'est correct justement, mais comme ce concept est nouveau pour moi, j'aime mieux poser des questions connes dans ce cas.
Modifié par IshimaruChiaki (25 Sep 2011 - 07:22)

Sinon, si tu n'as pas trop envie de toucher à ton design, tu peux étendre le système de grille que tu utilises. Par exemple si pour placer un bloc qui occupe 4 colonnes tu utilises une classe nommée .span4 qui a est défini comme ceci dans le css du grid-system :

.span4 {
  width: 460px;
}

, dans ton fichier css perso, tu peux te créer une nouvelle classe qui correspondra à 4 colonnes + 1/3 nommée par exemple .span4-and-third. Ca demande juste de bien étudier le css du grid-system pour définir aussi tous les styles qui s'y rapportent sur le modèle des autres spanX définis. Mais généralement, le css de ce type d'outil est assez simple et concis.
Les systèmes de grid ne sont pas quelque chose de figé, tu peux les étendre à ta sauce. Mais je suis d'accord avec Florent, ça casse forcément un peu le rythme théorique de la page, mais au final visuellement y'a rien de choquant à ce niveau dans ta maquette.
Modifié par Yvan L. (25 Sep 2011 - 09:00)

Salut,
J'ai longtemps chercher un framework css et je me suis arrêté à 1140.css. une grille de 1140 pixel de large à 12 col avec les médias queries. Du coup, tu gagnes un temps fou sur la mise en page.

http://cssgrid.net/

N'hésitez pas si vous avez des retours à faire.

Le choix se confirme bel et bien, puisqu'en testant deux pages où j'ai des blocs de catégories (de ressources et tutos) qui sont affichés à trois par ligne (ce sera pareil pour la liste des styles), ça cadre parfaitement, chaque bloc faisant 4 colonnes de largeur.

Salut,
Je remonte le sujet parce que je me demande pourquoi tout les frameworks utilisent "float" plutôt qu'"inline-block"?

Merci d'avance.

Bonjour,

Ceci expliquant cela : espaces indésirables

Salut,
Dans la mesure où on sait qu'il y a un espace indésirable, il suffit de réduire le margin right (ou le bloc) non?
C'est juste à cause de cette espace indésirable?

David-Dante a écrit :
Salut,
Dans la mesure où on sait qu'il y a un espace indésirable, il suffit de réduire le margin right (ou le bloc) non?
C'est juste à cause de cette espace indésirable?

Si tu lis l'article pointé par Pascal, tu verras qu'il n'y a pas de solutions propre et bulletproof.

Le but d'un framework est de fonctionner "out-of-the-box". Si son utilisation requiert d'altérer le HTML, le contrat est rompu.

Malheureusement, les floats restent le moyen le plus simple pour faire des mises en pages robustes dans tous les navigateurs .

David-Dante a écrit :
C'est juste à cause de cette espace indésirable?

Non, c'est aussi pour le support d'IE 6-7.