Pourquoi Utilise-t-on 12 Colonnes en Webdesign ?

Historique et origine du placement

Les grilles en design

Les grilles ont toujours été essentielles dans la mise en forme des contenus.

Que cela soit pour les journaux imprimés ou les interfaces numériques, elles permettent de structurer, aérer et optimiser l’espace disponible.

Lorsqu’ils conçoivent une interface, les designers et intégrateurs mentalisent ces lignes verticales, formant les colonnes de l’interface.

Evolution du CSS

Bien que le langage de mise en page CSS soit toujours dans la même version majeure (CSS3) depuis 2011, il évolue constamment.

Et le placement des éléments sur une interface web a été fortement impacté par ces évolutions.

Tableaux HTML

Initialement, les développeurs web utilisaient les balises HTML <table>, <tr>, <td>… pour forcer une mise en page spécifique au travers du balisage de la page au sein d’une sorte de tableau géant.

C’était laborieux, sémantiquement très cracra, mais… ça marchait !

Propriété float

Un jour CSS intègre la propriété CSS float, qui révolutionne le placement en permettant de disposer des éléments de manière flottante, autrement dit, en les alignant horizontalement les uns à côté des autres. Bien que float ait résolu certains problèmes de mise en page, il a également introduit de nouveaux défis, comme :

1. La gestion des hauteurs de colonnes
2. Le fait de rétablir le flux normal du document pour éviter que les éléments ne continuent de s’aligner horizontalement

Propriétés flex et grid 🙌

Puis, sont arrivées les techniques révolutionnaires et actuelles comme Flexbox et les Grid CSS qui ont changé la donne.

Flexbox, avec son modèle de boîtes flexibles, a simplifié la création de mises en page complexes en offrant une meilleure répartition de l’espace entre les éléments et un alignement plus intuitif.

CSS Grid, de son côté, a permis de concevoir des grilles bidimensionnelles, donnant ainsi aux développeurs un contrôle total sur les lignes et les colonnes, sans recourir à des solutions de contournement maladroites.

Aujourd’hui, les modules CSS flex et grid sont exploités pour toutes les routines de placement mais aussi pour créer des systèmes de grille prêts à l’emploi, permettant de faciliter l’élaboration de mises en page robustes, responsives et maintenables.

Des frameworks pour donner la tendance

Placer des éléments est une activité unniverselle et incontournable lorsque l’on designe une interface.

« Réinventer la roue » était chose courante pour un développeur qui allait recréer son système de grille responsive à chaque nouveau projet.

Mais créer son propre système de grille :

• Ça prend du temps
• Ça nécessite de la maintenance
• Ça n’est pas toujours parfait (compatibilité navigateur partielle, breakpoints utilisés non recommandés…)

Pour pallier à cela, les premiers grands frameworks CSS tels que Bootstrap ou encore Foundation ont implémentés cette mécanique, réduisant son usage à l’emploi de classes HTML.

L’utilisateur du framework se contentera désormais d’utiliser les classes mises à disposition par le framework :

• .row pour définir un conteneur de grille
• .col-8 pour définir un bloc occupant 8 colonnes
• .col-lg-3 pour définir un bloc occupant 3 colonnes à partir des écrans larges
• Etc.

Et vous savez quoi ? La plupart des grilles implémentées par ces framework font 12 colonnes, mais pourquoi cela ?

Pourquoi 12 colonnes ?

Flexibilité et divisabilité

12 est considéré comme étant un nombre d’or en webdesign en raison de sa grande divisibilité entière.

Ce nombre permet de créer une variété de combinaisons de colonnes offrant une flexibilité maximale en termes de design.

12 permet d’obtenir un large panel de colonnes de largeur identique :

Outre la possibilité de diviser l’écran en colonnes de taille identique, cette divisibilité confère aux grilles de 12 colonnes une capacité à créer des combinaisons complémentaires classiques :

• 33.33% | 66.66% = 4/12 | 8/12
• 25% | 75% = 3/12 | 9/12
• 25% | 50% | 25% = 3/12 | 6/12 | 3/12
• Etc…

Mais aussi des combinaisons bien plus atypiques et précises, comme 5/12 | 7/12 ou encore 1/12 | 11/12.

Précision

Le nombre 12 est suffisamment élevé pour offrir une précision bien souvent suffisante en termes de placement.

Si l’on prend par exemple une page web ou un conteneur ayant une largeur de 1200px, cela confère 100px pour chaque colonne, ce qui est dans la grande majorité de cas suffisamment petit, et donc précis, pour obtenir le placement souhaité.

Norme

La flexibilité et la précision offertes par le nombre 12 ont largement contribué à son adoption massive par les communautés de designers et développeurs qui sont désormais habitués à traviller comme cela.

A tel point que cette grille de 12 colonnes est aujourd’hui devenue une norme, une configuration par défaut pour la plupart des projets d’interface web.

Et le responsive dans tout ça ?

12 colonnes c’est top sur desktop, mais sur mobile ? On en parle ? 🙈

Un smartphone propose généralement une largeur moyenne possédant aux alentours de 400px.

Et 400px / 12 ca fait… 33.33px, et autant vous dire que dans si peu d’espace on a du mal à faire rentrer un simple mot.

Vous l’aurez compris, 12 colonnes sur mobile c’est petit, très petit !

Mais il n’y a en réalité aucun problème à diviser son écran en 12 colonnes sur mobile, car si vous avez bien suivi tout à l’heure, je vous disais qu’il est possible pour un élément de s’étirer sur plusieurs colonnes.

Nous allons donc pouvoir dire à nos éléments de s’étendre sur 12, 6, 4 ou 3 colonnes sur mobile.

Les valeurs 3, 4, 6 et 12 permettent ainsi d’obtenir respectivement 1, 2, 3 et 4 colonnes.

En règle générale, le placement sur mobile consiste à empiler les blocs les uns sous les autres sur une seule colonne, mais dans certains cas, il peut être utile de diviser l’écran en 2, 3 voire au maximum 4 colonnes.

Créer ma grille CSS responsive

Si vous souhaitez mettre au point une grille CSS universelle s’adaptant à toutes vos problématiques de placement, je vous invite à découvrir notre tutoriel sur la création d’une grille responsive en CSS.