Vidéo: Tutoriel CSS : Les grilles en CSS 2025
Un angle utile pour commencer le défi de concevoir des pages web avec pourquoi les pages Web sont 960 px de large. Mais sont-ils? Non, pas tous. Mais il existe de puissantes raisons pour lesquelles les concepteurs de sites Web sont attirés par les pages dont la largeur standard est de 960 px: fonction et forme.
Tout d'abord, un très large éventail de fenêtres peut afficher une page de 960 px. Comment un écran de taille normale et un iPhone peuvent-ils afficher une page de 960 px? Cette question a une réponse en deux parties:
-
Une page de 960 px ne remplira pas toute la largeur d'un moniteur de taille normale - mais c'est une bonne chose. Une page Web qui remplit toute la largeur d'un moniteur à grand écran serait trop difficile à digérer. Les lignes de texte seraient trop longues à lire. Le contenu de la page serait trop étiré pour que les visiteurs l'absorbent comme un tout unifié.
-
Les appareils mobiles ont plus de pixels par pouce que les moniteurs de taille normale. Ainsi, même les androïdes, les iPhones et d'autres petits appareils peuvent afficher des pages de 960 px.
L'autre attraction de l'utilisation d'une grille de 960 est que "960" est facilement divisible. Cela signifie que vous pouvez décomposer (diviser) votre page en plusieurs parties gérables - des colonnes - pour vous aider à tracer votre conception. Par exemple, disons que vous basez un design sur une approche à trois colonnes, chaque 320 px de large.
La figure montre un tel design: une grille de 960 divisé en trois colonnes de même largeur, en utilisant Adobe Illustrator comme outil de conception. Dans cette illustration, un en-tête (en blanc) remplit le haut de l'écran et les trois colonnes sont placées sous l'en-tête.
Ou, une grille de 960 peut être facilement divisée en huit colonnes (120 px de large) ou 16 colonnes (60 px de large). Cette répartition de l'immobilier permet à un concepteur (ce qui pourrait être vous!) De créer facilement des illustrations de taille appropriée pour les annonces, les bannières et autres contenus.
En fait, si les problèmes techniques étaient le seul problème, les concepteurs de sites Web pourraient avoir des tailles de page Web standard un peu plus grandes que 960 px, et les conteneurs seraient toujours compatibles avec les appareils mobiles. La plupart des fenêtres, y compris les mobiles, prétendent avoir au moins 1024 pixels de large - mais la valeur d'utilisation de 960 réside dans la possibilité d'utiliser la "divisibilité" de ce nombre dans le flux de travail.
L'essentiel est que les concepteurs - en utilisant des programmes comme Adobe Illustrator, Adobe Photoshop, ou même une feuille de papier millimétré - peuvent créer jusqu'à 16 colonnes de taille égale (60 px).
Et, en créant leur conception au-dessus de cette grille de 16 colonnes, ils transfèrent l'illustration à un concepteur Web qui traduit la page en HTML et CSS en utilisant un conteneur de 960 px de large, et plusieurs colonnes correspondant à ces dans l'illustration originale.
