Pourquoi largeur 960px ?

Question

J'ai une question concernant la disposition fixe. Elle comporte deux parties, étroitement liées, donc je les pose en une seule question.

Partie (a) Pourquoi recommande-t-on 960px pour la mise en page du site web? Je comprends que cela soit optimisé pour la résolution d'écran la plus courante (1024px). Mais pourquoi précisément 960px? 1000px ne serait-il pas aussi bon?

Partie (b) Qu'est-ce exactement que le système de grille? J'ai bien vérifié 960.gs mais je n'ai pas compris l'idée des colonnes. Est-il préférable d'utiliser le système de grille (en utilisant le modèle de 960.gs, qui semble si désordonné) ou devrais-je m'en tenir à la méthode traditionnelle, comme :

     ..
     .. 
     ..

Answer 1

1024px est la largeur maximale de l'écran qu'il vise. Nous devons autoriser une certaine marge de fenêtre, donc cela doit être moins. Idéalement, nous aimerions qu'il ait de nombreux facteurs, nous permettant de le diviser en colonnes de taille égale avec des largeurs entières.

960 a beaucoup de facteurs :

echo factors(960);
1  2  3  4  5  6  8  10  12  15  16  20  24  30  32  40  48  60  64  80  96  120  160  192  240  320  480  960 

1000 n'en a pas autant

echo factors(1000);
1  2  4  5  8  10  20  25  40  50  100  125  200  250  500  1000  

Plus précisément, vous pouvez facilement diviser 960 en 2, 3, 4, 5, 6 et 8 colonnes.

Answer 2

Pourquoi 960px est-il suggéré pour la mise en page du site web?

960 pixels est une largeur commune pour les mises en page web car 1024 x 768 était la résolution la plus courante pendant de nombreuses années et les designers étaient contraints de concevoir pour le plus bas dénominateur commun. Lors de la conception pour une largeur fixe, il est sage de concevoir pour que la plupart des gens ne voient pas une barre de défilement horizontale. Si votre conception fait 1024 pixels de large, une page plus haute que le viewport (disons 768 pixels pour simplifier), introduira soudainement une barre de défilement verticale, consommant l'espace horizontal disponible qui est alors inférieur à 1024 pixels (1024 moins la largeur de la barre de défilement verticale).

Donc, vous avez besoin d'une largeur inférieure à 1024 moins la largeur de la barre de défilement verticale. La largeur d'une barre de défilement n'est pas beaucoup plus grande que 20 pixels, mais pour prendre en compte les fenêtres non maximisées et obtenir un nombre facilement divisible en autant de facteurs que possible, ce qui facilite la conception de boîtes ou colonnes de taille fixe. Comme 960 a plus de facteurs que 1000, 960 a été choisi.

C'est un filet de sécurité partiellement faux de baser la conception sur une largeur fixe de 960 pixels, cependant, car de nombreuses personnes ne maximiseront pas leurs fenêtres ou ne les redimensionneront pas correctement, donc même avec des résolutions plus élevées que 1024, leur fenêtre de navigateur pourrait ne pas correspondre à 960 pixels. C'est pourquoi le design web adaptatif commence à se développer, où les conceptions sont plus fluides et réactives aux paramètres de l'appareil de l'utilisateur (comme la résolution de l'écran).

Qu'est-ce que le système de grille exactement?

Un système de grille est simplement un ensemble de noms de classes CSS prédéfinis que vous pouvez utiliser dans vos documents HTML pour aligner les différentes boîtes de votre conception dans une "grille" qui correspond à une ou plusieurs mises en page courantes pour la conception web. Un système de grille est utile si vous n'êtes pas familier avec CSS et que vous trouvez difficile d'aligner les boîtes (en largeur et en hauteur) dont votre conception est composée.

Si vous trouvez que le CSS est assez simple à écrire vous-même, je vous recommande de l'écrire vous-même. Je recommande également de ne pas utiliser strictement des colonnes de largeur fixe, mais plutôt un design web plus réactif (comme mentionné ci-dessus) pour mieux s'adapter aux différentes tailles d'écran qu'un design de largeur fixe est capable.

Answer 3

960px est utilisé parce qu'il est divisible par 1, 2, 3, 4, 5, 6, 8, 10, 12, 15 et 16... - permettant aux designers d'avoir une grande variété de largeurs de colonnes différentes et de disposition possibles. Il y a probablement d'autres "nombres magiques" à cet égard.

Aussi, comme indiqué, une largeur de 960px s'adapte "joliment" à la majorité des résolutions.

Answer 4

Un système de grille est utilisé pour aligner les éléments sur les mêmes lignes verticales. Cela donne à votre mise en page un meilleur aspect car tout le texte/en-têtes/images sont alignés à gauche de la même manière.

960 est comme d'autres l'ont dit basé sur 12 ou 16 colonnes car il peut être divisé par le plus grand nombre de chiffres. De cette façon, vous pouvez avoir une rangée de, disons, 8 éléments et une de 4 et avoir le même espace entre vos éléments. Si vous regardez le lien, vous pouvez voir que les marges blanches entre les éléments sont les mêmes que vous fassiez une mise en page de cellules 2-8-2 ou de cellules 4-4-4 (basées sur 12 colonnes)

Answer 5

960px a une énorme quantité de facteurs, ce qui signifie que les mises en page peuvent avoir des valeurs saines en pixels complets avec de nombreuses dimensions différentes.

960px est utilisé car c'est la résolution d'écran la plus courante et la plus petite utilisée régulièrement. Vous rencontrerez des appareils mobiles et quelques écrans 800x600, mais ils sont rares. L'espace supplémentaire sur le(s) côté(s) de la page permet d'afficher les bordures de la fenêtre et les barres de défilement, sans pour autant obscurcir le contenu.