La mise en forme visuelle et l’affichage de nos sites doivent pouvoir s’adapter et répondre à divers critères ou contextes d’utilisation, tel que;
- la nature du périphérique de consultation (smartphone, tablette, ordinateur, TV, console de jeux, électroménager…),
- la qualité de la bande passante du réseau de connexion (fin de ligne, réseau limité, connexion T1, fibre…),
- la situation de handicap de l’utilisateur qu’il soit physique ou autres (problème de vue, absence de souris, haut parleur absents, écran tactile abîmé…),
- le contexte ou l’environnement de consultation (utilisation depuis un pays étranger, présence d’un clavier à idéogrammes, compte utilisateur non accessible, imprimante noir et blanc uniquement …)
- la situation lors de la consultation (niveau de batterie faible, luminosité extérieure trop forte, coupure de réseau intermittente, forfait quasi épuisé…)
- et bien d’autres…
…Bref les contextes d’utilisation ne manquent pas et pourtant tous doivent tendre vers une expérience utilisateur qui soit quasi identique et quoiqu’il en soit, optimale. Pour faire face à cela nous avons accès à divers langages et technologies, comme les CSS, les médias queries, ou matchmedia() et au sens le plus large à un aspect Responsive Web Design, et que celui ci soit Responsif (Ethan Marcotte) ou Adaptatif (Marc Boulton). Pour plus de détails directement se rapprocher de la série Quid du Responsive Web Design.
Langage de mise en forme
Depuis plusieurs années déjà il existe une séparation forte entre contenu et affichage. Dans l’étape précédente, nous avons vu la mise en forme structurelle et sémantique du contenu, maintenant au cours de cette étape nous allons nous focaliser sur la mise en forme visuelle, prenant en compte aussi bien la mise en page (disposition, volume, emplacement, visibilité…), que le formatage des éléments (couleurs, typos, taille, décorations…).
Pour cela nous avons à disposition le langage CSS, et depuis sa version 3 celui-ci ne cesse d’évoluer, voir CSS current work, de s’affiner et surtout d’être pris en compte de manière standard par l’ensemble des navigateurs. Les CSS couvrent aussi bien l’aspect visuel que les animations, transitions, ou autre transformations, que des notions comme les grilles, ou la prise en compte de variables, de formes ou encore de masquages. Bref les CSS vont prendre en compte de manière très poussée l’ensemble de nos besoins d’affichage des données.
Préprocesseurs et PostCSS à la rescousse
En parallèle de l’usage des CSS, il est également possible soit d’avoir recours à des Préprocesseurs, Sass ou Less, qui vont nous permettre d’optimiser la manière d’écrire et d’architecturer les feuilles de styles (Pour plus de détails se rapprocher de la série Comprendre et utiliser Sass), soit d’utiliser un Post Processeur comme Post-CSS.
La partie purement liée à l’usage du langage CSS sera traité dans cette rubrique 03-Affichage et visuel, alors que la partie programmation JavaScript qui serait pris en charge par des automatiseurs de tâches, tel que Grunt ou Gulp, ou l’usage de Post-CSS, sera quant à elle abordée dans la rubrique 04-Interaction et flux.
- Les principales catégories de ce chapitre sont :
- CSS (20)
- Grilles & Maquettes (3)
- Outils graphiques (1)
- PWA (1)
- Responsive Web Design (10)