UX#04 - Les grilles CSS
Le terme de “Responsive Web Design” existe depuis environ 10 ans. Le concept est né suite à la diversification des supports mobiles. Depuis, un site web doit s’adapter pour ne pas perdre une partie de son audience. Plus que cela, c’est devenu une convention à respecter car les moteurs de recherche pénalisent les sites qui ne s’adaptent pas au support de l’utilisateur.
Toutefois, adapter un site sur une multitude de support prend un temps significativement plus élevé. Et la réalité économique nous rattrape toujours : faire un site coûtait déjà un rein avant, alors comment faire quand on doit encore augmenter ce coût ?
Heureusement, les développeurs sont malins et ont créé des ensembles de composants, que l’on appelle frameworks. Ces derniers permettent de poser des socles qui s’adaptent plutôt bien, tout en étant personnalisables à la charte du client final.
Aujourd’hui, nous allons parler d’une partie essentielle de ces frameworks : le système de grille !
Comment ça marche ?
Une grille est un ensemble de règles qui vont permettre d’agencer des blocs sur des lignes et des colonnes, un peu comme un tableau Excel.
Là où c’est intéressant, c’est que dans ces règles, on va utiliser des breakpoints. Ce sont des points où les règles changent, quand l’écran de l’utilisateur se réduit.
Dans la grille ci-dessus, on a inclus la règle : “4 cols sur md” + “2 cols sur sm” + “1 col sur xs”. Pour mieux comprendre ce que cela veut dire, voilà tout d’abord un tableau des breakpoints principaux :
| XXS < 576px | 576px < XS < 768px | 768px < SM < 992px | 992px < MD < 1200px | 1200px < LG |
| Mobiles | "grand" mobiles & tablettes en mode portrait | Tablettes | Tablettes et mini PC portables | PC |
Nos règles veulent donc dire que tant qu’on a pas dépassé le breakpoint “md”, on aura 4 colonnes de contenus par ligne, puis ensuite, tant qu’on a pas dépassé le breakpoint “sm”, on en aura plus que deux, et enfin, à partir du breakpoint “xs”, on en aura plus qu’une.
Comme les grilles sont générées à partir d’éléments HTML et de classes CSS, il est possible de créer des “nested grids”, ou comprendre des grilles dans des grilles. Tant que vous ouvrez et fermez bien les grilles aux bons endroits, vous pouvez utiliser autant de niveaux que nécessaires.
Les grilles sont extrêmement pratiques car cela permet de standardiser l’agencement des blocs de votre site. Vous déterminez quelle grille utiliser, elle est chargée sur l’ensemble de votre site et vous déclinez enfin la charte graphique et les contenus qui reposent sur elle.
Les différentes grids
Bien des équipes se sont adonnées à l’élaboration de frameworks CSS. Comme pour tout langage et concept informatique, seuls ceux qui acquièrent une bonne réputation perdurent.
Bootstrap
C’est le premier framework qui a fonctionné et c’est aujourd’hui celui qui est le plus utilisé. Sa présence est tellement importante qu’ils définissent les standards et les meilleurs procédés quand il s’agit de concevoir des squelettes.
Beaucoup de sites, sur PC, font 1140px de large, avec un contenu centré dans la page. Ces 1140px ont été définis par Bootstrap et les graphistes doivent respecter ces largeurs.
Autre exemple, les marges entre les éléments doivent être régulières. On les configure en amont dans nos feuilles de style et on ne les modifiera que si on y est contraint techniquement.
La dernière version en date du framework est la version 4, compatible avec la quasi totalité des navigateurs, PC ou mobiles. Il dispose de nombreux composants et thèmes pour réaliser la majorité des interfaces web. C’est très efficace quand il s’agit de prototyper un projet, sans chercher à avoir une identité visuelle marquée.
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ce_image block">
<figure class="image_container">
<a href="files/images/pexels-photo-207529.jpeg" data-lightbox="ebfa22">
<img src="assets/images/4/pexels-photo-207529-49482e89.jpeg" alt="" itemprop="image" width="600" height="338">
</a>
</figure>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ce_image block">
<figure class="image_container">
<a href="files/images/pexels-photo-1427513.jpeg" data-lightbox="36f543">
<img src="assets/images/5/pexels-photo-1427513-832bcb47.jpeg" alt="" itemprop="image" width="600" height="338">
</a>
</figure>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ce_image block">
<figure class="image_container">
<a href="files/images/pexels-photo-805295.jpeg" data-lightbox="956953">
<img src="assets/images/b/pexels-photo-805295-daee30dd.jpeg" alt="" itemprop="image" width="600" height="338">
</a>
</figure>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="ce_image block">
<figure class="image_container">
<a href="files/images/pexels-photo-1027516.jpeg" data-lightbox="86db02">
<img src="assets/images/2/pexels-photo-1027516-c4f85ea8.jpeg" alt="" itemprop="image" width="600" height="338">
</a>
</figure>
</div>
</div>
</div>CSS Grid Layout
Avec la réussite de Bootstrap et la prolifération du concept de grilles, les navigateurs ont créé un standard : Le CSS Grid Layout. Cela veut dire qu’il n’y a plus besoin d’utiliser un framework comme Bootstrap pour faire des grilles responsives. C’est plutôt pratique !
<div class="wrapper">
<div class="one">Un</div>
<div class="two">Deux</div>
<div class="three">Trois</div>
<div class="four">Quatre</div>
<div class="five">Cinq</div>
<div class="six">Six</div>
</div>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.wrapper>div {
background:#ddd;
}
</style>
Elles sont toutefois encore limitées à un seul niveau de grid. Le système n’interdit pas l’utilisation de grilles sur plusieurs niveaux, mais elles ne sont pas aussi bien gérées qu’avec Bootstrap. C’est toutefois un concept prometteur, car le code est plus léger que sur Bootstrap et les performances sensiblement meilleures.
Les autres
Comme on l’a dit plus haut, les frameworks intégrant une grille CSS sont légions. Foundation, Skeleton, PureCSS, Materialize… Chez nous aussi, on a fait le notre, intitulé Framway. Testez-les et choisissez celui qui vous parle le plus. Ils sont tous open-source et téléchargeables gratuitement sur leurs sites respectifs.
Si vous êtes un développeur front-end, c’est un excellent exercice que de créer son propre framework. On apprend énormément de choses en extrayant ce qui fait la qualité des outils connus et d’en faire un condensé spécifique.
Il existe aussi des méthodes hors grilles pour positionner du contenu que l'on a pas évoqué. On les utilise quand les grilles simples ne sont pas suffisamment flexibles. Elles sont toutefois plus techniques et mériteraient un article pour chacune d’entre elles.
Pour vous informer, vous pouvez regarder l’usage des Media-Queries ou du Flexbox !
Les grilles CSS & les frameworks ont marqué un tournant dans la création des sites Internet. Ils ont rendus accessibles le concept de Responsive Web Design à des budgets plus limités.
Cela dit, ils ont également généré tout un lot de standards et de contraintes pour les designers. On privilégie l’ergonomie sur l’esthétisme en respectant ces standards, et la conséquence de tout ça est qu’on voit souvent les mêmes structures d’un site à un autre. Il est un peu plus difficile de se distinguer, à moins d’avoir des maquettes bien plus avancées, avec des règles établies à la main. Comme avant quoi.
Derrière ces frameworks et ces standards du Web, il y a des développeurs, des designers, des ergonomes, des utilisateurs etc…Ils déterminent les meilleurs usages pour que nos interfaces soient lisibles & compréhensibles pour l’ensemble des internautes.
Ne perdez jamais de vue qu’une interface doit être logique avant d’être belle. Si elle l’est, c’est du bonus !
Dans la même catégorie
