Le métier d’intégrateur n’a cessé d’évoluer depuis les premières pages web. A l’origine, il s’agissait de créer des pages puis nous avons eu la possibilité d’apporter des éléments de présentation. CSS a constitué la première révolution permettant d’appliquer des styles réutilisables mais l’intégrateur résonnait toujours avec la notion de page. Depuis quelques années maintenant, nous assistons à l’explosion des supports sur lesquels nous diffusons nos sites et force est de constater que la conception de pages ne semble plus répondre aux problématiques actuelles. Les intégrateurs sont devenus des développeurs front-end qui doivent se concentrer sur la conception de composants modulaires plus adaptés aux multitudes d'écrans à adresser.

Je vous propose une synthèse de l’ouvrage Responsive design patterns, collection A book apart de l'excellent Ethan Marcotte.

1 - Du plus petit au plus grand

La notion de page est un héritage de l'imprimerie qui n’est plus adapté à la réalité actuelle. Selon Trent Walton, il faut penser le design comme un réseau de petits systèmes de présentation pouvant être réorganisé en fonction de la taille écran : les design patterns. Cette approche du design est la conséquence logique d'un besoin de modularité dans le travail des designers.

Voici quelques défis auxquels sont confrontés les designers au quotidien :

- La gestion des images : Pouvons-nous être certains que nos images soient reconnaissables sur un petit écran ?
- La navigation : comment transposer des menus denses sur un smartphone ?
- La publicité : comment afficher des publicités dont les formats n'ont que très peu évolué depuis 10 ans !

2 - La navigation

La navigation doit être la boussole de l'utilisateur. Elle doit lui permettre de s'orienter facilement vers une section du site. Ce qui est important pour un système de navigation responsive, ce n'est pas de fonctionner de la même façon sur tous les appareils mais de proposer l'accès au même contenu.

- Identifier le contenu qui doit être visible sur un petit écran
- Considérer que ce contenu sera accessible quelque soit la taille de l’écran
- L'ajout d'information sur des tailles d'écrans plus importantes doit être vu uniquement comme une amélioration.

En adoptant une conception Mobile First, vous allez vous focaliser sur les actions principales de votre application tout simplement parce que la taille de l'écran vous l'impose. La responsabilité de l'équipe de conception sera d'établir les priorités. Au contraire, travailler avec des systèmes responsive, desktop first, c'est prendre le risque de faire tenir dans un petit écran une multitude d'informations en utilisant des astuces qui ne seront pas utilisables et peu compréhensibles par vos utilisateurs.

Bouton pour afficher / masquer un contenu, menu hors canvas, burger menu... Une multitude de solutions s'offrent aux concepteurs lorsqu'il s'agit d'imaginer un système de navigation. La solution n'est pas de deviner ce que souhaite le lecteur mais plutôt de l'intégrer dans une démarche centrée utilisateur pour construire un modèle de navigation qui lui correspond ! N'hésitez pas à faire de l'A/B test et présenter des prototypes rapidement pour valider vos hypothèses.

3 - Images et vidéos

La vidéo ne pose pas réellement de problème au niveau du responsive. Il existe une technique éprouvée pour faire le job : le ratio d'aspect.

En ce qui concerne les images, cela se complique légèrement car nous sommes confrontés à plusieurs problématiques :

- La connexion de l'utilisateur
- La taille et la densité de l'écran qui soulève un point majeur lorsqu'il s'agit de traiter les images responsives : conserver le sens de l'image quelque soit la taille de l'écran.

Des solutions commencent à émerger mais elles ne sont pas supportées par tous les navigateurs. Vous pouvez utiliser srcset combiné à size pour demander au navigateur d'utiliser cette image en fonction de certains critères. La balise picture et source nous propose des solutions encore plus fines pour proposer des images qui conviendront à chaque viewport.

4 - La publicité

La publicité fait partie intégrante de l'expérience. Aujourd'hui, elle est perçue négativement. Les internautes n'hésitent pas à bloquer celle-ci, ou mieux, souscrire un abonnement avec la promesse de ne plus voir de publicité. Quel dommage d'en être arrivé la ! En 2017, les agences ne sont toujours pas matures pour proposer des formats responsives. Pire, les formats actuels n'ont que très peu évolué depuis 10 ans obligeant les concepteurs de site à réaliser des pirouettes pour gérer la pub dans un cadre responsive.

Chargement conditionnel, solution côté serveur, repenser la hiérarchie. Il n'y a pas de solution magique car la publicité responsive est un domaine en chantier qui opère de manière indépendante sans grande concertation avec les éditeurs de site.

5 - Concevoir la grille infinie

Ce qui fonctionne vaut mieux que ce qui est beau. La beauté est subjective, mais ce qui fonctionne fonctionne.

Le processus, selon Vox, commence par la priorisation du contenu et évolue en une mise en page.

- Les grilles créent de l'interconnexion et doivent relier visuellement des morceaux de contenu apparenté mais aussi séparer des éléments. Les grilles nous aident à créer une narration à partir d'une mise en page - Les grilles aident les designers à résoudre les problèmes de mise en page - Un concept de guide bien réalisé sert de guide visuel au lecteur afin de mieux appréhender la hiérarchie visuelle.

Pour atteindre cette objectif, Boulton propose trois principes :

- Définir les relations de votre contenu - Utiliser des proportions ou des mesures relatives plutôt que des mesures fixes - Rendre le contenu indépendant du type d'appareil.

Le problème actuel n'est pas que nous devions concevoir pour de plus en plus d'appareils différents mais plutôt que les frontières entre ceux-ci soient de plus en plus floues… En achetant cet ouvrage, vous découvrirez quelques pistes de réflexion pour réorienter vers le bon sens ce changement.