La grille masonry en web design

Définition du composant masonry grid

Le composant graphique masonry grid ou grille masonry est une grille HTML permettant d’afficher des éléments d’une façon structurée dans des colonnes ou des lignes qui se repositionnent en JavaScript. Elle s’utilise pour des images, des blocs de textes ou n’importe quels médias. Son principe repose sur le fait que chaque élément s’empile de façon optimale dans les colonnes pour occuper l’espace disponible en limitant les zones blanches. Le nombre de colonnes est défini en fonction de la largeur de la page, plus la largeur de la page est réduite moins de colonnes s’affichent.

Exemple d’une grille masonry

Times New Roman est une police de caractère avec empattement connue et répandue, faisant partie de la famille des réales. Elle est apparue en 1932 dans le journal londonien The Times (police Times), pour lequel elle a été dessinée par Victor Lardent sous la direction de Stanley Morison (Monotype).

En typographie, les empattements sont les petites extensions qui terminent les extrémités des caractères dans certaines polices d’écriture, dites avec empattement (au singulier ; serif en anglais), que l’on oppose aux polices sans empattement (sans serif).

Didot est un groupe de polices avec empattements néo-classique, nommé d’après le graveur Firmin Didot. Les premiers caractères Didot sont gravés et fondus à Paris par Firmin Didot entre 1784 et 1811, et utilisés par l’imprimeur Pierre Didot, son frère.

En typographie, une ligature est la fusion de deux ou trois graphèmes d’une écriture pour en former un nouveau, considéré ou non comme un caractère à part entière.

Garamond est un groupe de polices serif, nommé d’après le graveur Claude Garamont (vers 1480-1561), à l’origine de la famille des « garaldes ». La plupart des polices d’écriture qui portent aujourd’hui le nom de « Garamond » sont dérivées du travail ultérieur du typographe Jean Jannon.

Une fonderie typographique est une entreprise qui réalise des polices de caractères pour l’imprimerie. À l’origine, entre les xve et xxe siècles, il s’agit de concevoir et de fabriquer des caractères en relief, en plomb, pour la typographie.

Futura est une police de caractères linéale géométrique conçue par Paul Renner, entre 1924 et 1927, pour la fonderie Bauer (Bauersche Gießerei). Elle participe, avec les productions de Jan Tschichold, à la modernité contemporaine du Bauhaus.

En typographie, la graisse est l’épaisseur d’un trait ou d’un caractère. En augmentant la graisse d’un caractère maigre, on obtient un caractère demi-gras, puis gras, et ainsi de suite.

Helvetica est une police de caractères linéale sans empattement (en anglais, sans serif), créée en 1957 par Max Miedinger à Bâle, qui l’a dessinée dans un objectif précis : avoir une police la plus harmonieuse possible1.

En typographie, le corps est la taille d’une fonte de caractères, mesurée en points typographiques : un texte en corps 10 est un texte composé dans une police dont le corps est de dix points.

Source Wikipédia

Comme on peut le voir dans l’exemple ci-dessus, la grille se restructure au redimensionnement de la fenêtre. Elle permet un affichage optimisé sur tous les supports de navigation que ce soit mobile, tablette ou bureau. Cette forme de présentation est adaptée à de nombreux cas d’utilisation comme une galerie de photos, de vidéos ou une liste d’articles ou de news. On peut très bien y afficher n’importe quel type de contenu comme une liste de recette ou de résultats sportifs.

Un composant venant de la presse

La grille masonry est une évolution du système de grille utilisé par la presse dans les journaux et les magazines. L’industrie du web est la continuité logique en terme technique et graphique de l’industrie de la presse. Elle s’approprie certains codes de mise en page, de design et de typographie pour les afficher d’une façon plus moderne. Le web regroupe plus d’un siècle d’évolution de l’industrie de la presse en exploitant tous ces acquis d’une façon numérique.

Comment l’implémenter ?

Coder de A à Z une grille masonry est une tâche un peu longue et fastidieuse. En fonction des technologies utilisé par le développeur web Angular, Vuejs, React ou jQuery, il existe plusieurs librairies open sources proposant de l’incorporer. Elle est disponible nativement dans WordPress, mais nécessite de savoir coder pour être mise en place. Ci-dessous quelques projets open sources implémentant la grille masonry :

• Le projet masonry du développeur David DeSandro
• Une page d’exemple du framework Bootstrap
• Le container masonry du framework Foundation