Il est aujourd’hui temps pour nous d’aborder le monde du design responsive. L’expression responsive désigne l’opération qui consiste à adapter un site web à différents ordinateurs clients, tant du point de vue du design que du développement.
Variations, infinies, (si peu) prévisibles
Un site web, contrairement à un objet imprimé, peut être appréhendé par différentes technologies, et rendu de différentes manières selon l’ordinateur qui le télécharge (client) et l’ordinateur qui l’héberge (serveur). La variation la plus évidente est la taille d’écran, liée à l'appareil. Mais comme nous allons le voir, celle-ci est loin d’être la seule.
On peut catégoriser les variations en deux grandes familles:
- Les variations matérielles
- Taille d’écran
- Résolution d’écran (matérielle et logicielle)
- Mais aussi RAM, processeur... peuvent influer sur la vitesse ou la capacité d’un ordinateur client à rendre un site web.
- Les variations logicielles
- Systèmes d’exploitation (ex: rendu des emojis)
- Navigateurs (ex: support CSS)
...
Ces variations sont virtuellement infinies et impossibles à prévoir entièrement, et encore moins à tester. La mise en page se doit donc d’être fluide et ouverte à un maximum de technologies, de manière à ce que le plus d’utilisateurs possible puisse voir le website tel qu’il a été pensé.
Les variations sont parfois difficiles à concevoir pour les graphistes issus du monde imprimé, habitués à un contrôle bien plus important sur la réception des objets qu’ils concoivent. Concevoir un site web potentiellement vue sous des angles imprévus sous-entend être obligé d’abandonner un certain rapport au texte notamment, car il est impossible de régler le texte à la manière d’un livre sur toutes les tailles d’écrans. Le format se pense variable, et il s’agit de définir des fourchettes et non plus des surfaces à tailles fixes. Il s’agit d’apprendre à laisser derrière soi l’imprimé, pour rentrer dans les enjeux propres à la programmation (temps de chargements, support et pérénité des technologies, écrans sensiblement autres...), qui eux aussi influent et même doivent influer sur le design. Si le rapport entre éthique, média et forme vous intéresse, je vous conseille les textes de Régis Debray, et notamment, son cours de médiologie générale.
Concrètement
La balise meta viewport
La balise viewport est une balise meta qui donne aux navigateurs mobiles une indication sur la manière dont rendre le site web. Au commencement du web, les appareils mobiles étaient minoritaires et les sites exclusivement conçus pour être vus sur des écrans Desktop. Afin de rendre accessible depuis des mobiles des sites non-responsive, certains navigateurs rendent par défaut les sites à une échelle réduite, afin de permettre l'accès à l'information, quand bien même le site n'est pas adapté aux mobiles. Pour forcer les navigateurs mobiles à rendre les sites échelle 1, on ajoute cette balise :
<meta name="viewport" content="width=device-width, initial-scale=1" />Les media-queries
Les média queries sont une technologie CSS qui permet de changer des paramètres de style selon la taille d’un écran, son orientation, sa capacité à rendre le survol... et bien d'autres paramètres. Celles-ci permettent ainsi d’adapter un design pensé premièrement pour une seule taille d’écran. Une approche pouplaire appellée mobile-first consiste à designer en premier la version mobile, car cette approche simplifie le travail. Néanmoins, ce n’est pas celle que nous abroderons, car elle tend à normaliser l’apparence des sites. Nous commencerons donc par designer le site sur un écran dit desktop. Plus de travail, mais infiniment plus de possibilités.
Un site test
Vous trouverez ici un exemple de site responsive > responsive-exemple.zip, que nous allons étudier ensemble pour comprendre le fonctionnement des média querys. Ci-dessous, différentes captures d’écrans de ce même site avec différentes tailles d’écrans, toutes faites sur le même appareils.
Le site est en ligne ici: https://dev.marianneplano.net/responsive-exemple. Pour commencer, chacun devra charger le site sur son appareil, et nous regarderons les rendus à tour de rôle. Cette expérience permet d’appréhender par l’expérience le concept de variations.
