La mise en forme visuelle et l’affichage des sites web doivent s’adapter à une multitude de critères et de contextes d’utilisation, tels que :
- Nature du périphérique de consultation : smartphones, tablettes, ordinateurs, téléviseurs, consoles de jeux, électroménagers connectés, etc.
- Qualité de la bande passante : connexion limitée, réseau de fin de ligne, fibre optique, etc.
- Handicap de l’utilisateur : troubles de la vue, absence de périphériques comme la souris, haut-parleurs manquants, écrans tactiles endommagés, etc.
- Contexte ou environnement de consultation : usage depuis un pays étranger, clavier à idéogrammes, comptes utilisateurs restreints, imprimantes noir et blanc, etc.
- Situation lors de la consultation : faible niveau de batterie, forte luminosité extérieure, coupures de réseau intermittentes, forfait de données presque épuisé, etc.
Les contextes d’utilisation sont nombreux et variés, mais l’objectif est de garantir une expérience utilisateur homogène et optimale, quel que soit le scénario. Pour répondre à ce défi, nous disposons de plusieurs langages et technologies, notamment les CSS, les media queries, la fonction matchMedia(), et des principes de Responsive Web Design (RWD), qu’ils soient responsifs (concept d’Ethan Marcotte) ou adaptatifs (concept de Marc Boulton). Pour un approfondissement, consultez la série Quid du Responsive Web Design.
Langage de mise en forme
Depuis plusieurs années, la séparation entre le contenu et l’affichage est bien établie. Après avoir vu la mise en forme structurelle et sémantique du contenu, nous nous concentrons ici sur l’aspect visuel, englobant la mise en page (disposition, volume, emplacement, visibilité) et le formatage des éléments (couleurs, typographies, tailles, décorations).
Le langage CSS est au cœur de cette mise en forme. Depuis sa version 3, CSS a beaucoup évolué, incluant des fonctionnalités telles que les grilles de mise en page, les animations, les transitions, les transformations, et l’utilisation de variables et de masques. Cette richesse permet de répondre à des besoins d’affichage complexes et variés tout en garantissant une prise en charge cohérente par les navigateurs modernes.
Préprocesseurs et PostCSS
En complément des CSS natifs, l’utilisation de préprocesseurs tels que Sass ou Less offre des avantages en matière de structuration et d’optimisation des feuilles de styles (voir la série Comprendre et utiliser Sass pour plus de détails). Ces outils permettent d’écrire des CSS de manière plus efficace et modulaire.
En outre, des outils comme PostCSS agissent en tant que post-processeurs, ajoutant des fonctionnalités supplémentaires et optimisant les feuilles de style après leur écriture. Tandis que cette rubrique se concentre sur l’usage du langage CSS proprement dit, la gestion des automatisations via des outils tels que Grunt ou Gulp, ainsi que l’intégration de PostCSS, est abordée dans la section 04-Interaction et flux.
Grilles, maquettes et outils graphiques
La disposition des éléments à l’écran suit une organisation précise. Les grilles CSS permettent de découper la page en lignes et colonnes, utiles pour créer des mises en page régulières : en-têtes, colonnes, pieds de page, etc. Elles posent les fondations du site. Les flexbox, elles, sont pensées pour répartir dynamiquement des éléments dans un espace limité, comme aligner un bouton à droite ou centrer un bloc verticalement. On les utilise souvent ensemble : les grilles structurent, les flexbox ajustent.
Avant d’écrire ce code, la réflexion commence souvent dans un outil graphique. Photopea, Figma ou Sketch servent à construire des maquettes, qui sont comme des brouillons visuels du site. On y place les titres, les blocs, les menus. On teste l’apparence sur mobile ou sur grand écran. Puis on traduit ce visuel en code CSS — ce qui demande parfois des ajustements, mais permet de rester fidèle à l’intention graphique de départ.
Typographie web et lisibilité
La typographie web ne se limite pas au choix d’une police esthétique. Elle structure la lecture, guide l’attention, et véhicule une identité visuelle. Elle influence la hiérarchie de l’information, la lisibilité, l’ambiance générale du site, et même l’accessibilité. Le web moderne permet l’usage de polices variables, l’ajustement fin des hauteurs de ligne, des espacements, ou des ligatures contextuelles. Cela ouvre la voie à une mise en page typographique plus expressive et plus adaptée aux différents formats d’écran.
Des services comme Google Fonts facilitent l’intégration rapide de typographies en ligne, tandis que des outils comme FontFace Observer permettent de mieux contrôler leur chargement pour préserver la performance. Il existe aussi des alternatives plus créatives ou engagées, comme les fonderies abcdinamo.com, f37foundry.com ou 205.tf, qui proposent des caractères originaux, parfois libres, souvent marquants. Savoir choisir une typographie, l’implémenter correctement, et la charger efficacement, reste une compétence essentielle en design d’interface.
Responsive, SPA, PWA : des formes adaptatives
La diversité des supports impose une logique d’adaptation qui ne se limite plus à la seule taille de l’écran. Le Responsive Web Design (RWD) permet de concevoir des interfaces qui s’ajustent automatiquement selon la largeur du viewport, en utilisant des outils comme les media queries, les flexbox ou les grilles CSS. C’est la base d’un site adaptable.
À cette logique s’ajoute une autre dimension : celle des comportements. Les Single Page Applications (SPA) proposent une navigation fluide et instantanée, en mettant à jour dynamiquement le contenu sans recharger la page. De leur côté, les Progressive Web Apps (PWA) combinent les avantages du web et des applications mobiles : elles fonctionnent hors ligne, peuvent envoyer des notifications, s’installer sur l’écran d’accueil, et accéder à certains composants matériels.
Ces approches ne s’opposent pas : une PWA est presque toujours responsive, et peut parfaitement être une SPA. Il s’agit d’un ensemble de stratégies techniques qui, selon les besoins du projet, peuvent être combinées pour offrir une expérience fluide, accessible, performante et cohérente sur tous les supports.
Design system et cohérence visuelle
Quand un site ou une interface évolue, il devient essentiel de maintenir une cohérence visuelle et fonctionnelle. C’est là qu’intervient le design system : une documentation partagée qui regroupe à la fois les règles d’apparence (UI – interface utilisateur) et les principes d’interaction (UX – expérience utilisateur). On y trouve des composants réutilisables (boutons, formulaires, alertes…), des styles typographiques, des couleurs, des espacements, des grilles, mais aussi des lignes directrices sur le ton, les animations, ou la façon de gérer les erreurs et les transitions.
Pour structurer ces ensembles, certaines approches comme le Atomic Design proposé par Brad Frost peuvent servir de guide : elles organisent les composants en niveaux hiérarchiques (atomes, molécules, organismes, templates, pages) et aident à concevoir des systèmes cohérents et évolutifs, sans imposer une méthode unique.
Un design system ne sert pas seulement à harmoniser l’apparence. Il facilite la collaboration entre designers, développeurs, rédacteurs, et toute l’équipe projet. Des outils comme Storybook ou Figma permettent de centraliser ces composants vivants, de les tester, de les mettre à jour, et de les diffuser. Le design system devient ainsi un levier de qualité, de rapidité, d’accessibilité, et de sérénité dans les projets à long terme.