05 September 2011 0

Dans la conclusion de son précédent billet “Commerce & Big Data”, Benoit lançait telle une bouteille à la mer une notion qui a beaucoup fait parler d’elle dans le domaine du design web ces derniers mois : le “Responsive Design”, ou “Web design réactif”.

Cette méthode de conception consiste à prévoir pour un site ou une application web, des modes d’affichages spécifiques pour chacun des supports depuis lesquels il sera accessible. Grâce aux nouvelles normes de CSS3 et notamment des “media queries”, il est désormais possible de détecter dynamiquement la résolution d’écran du périphérique utilisé et donc d’en déduire sa nature : ordinateur, smartphone, tablette... Le contenu peut alors être présenté de la manière la plus adaptée au contexte de consultation.

Mediaqueri.es recense d’ailleurs un grand nombre d’exemples de sites mettant en pratique cette technologie.

Mais l’engouement suscité autour du Responsive Design dépasse largement le domaine de la technique. Ethan Marcotte, auteur du premier ouvrage sur le sujet en 2010, cite en introduction John Allsopp :

« Le contrôle qu’exercent les designers au sein du média imprimé et qu’ils désirent souvent retrouver au sein du virtuel est simplement le produit d’une limitation de la page imprimée. Nous devrions accepter le fait que le Web n’a pas les mêmes contraintes, et concevoir en fonction de cette flexibilité (...) ».

L’idée sous-jacente est bien de s’abstraire enfin des contraintes de mise en page héritées de l’imprimerie, qui malgré leur bien-fondé esthétique, n’exploitent pas toutes les capacités des nouveaux supports digitaux. En entrant dans l’ère de la mobilité, nous sommes également entrés dans l’ère de la contextualisation de l’information. En plus de l’adaptation à la résolution d’écran se pose la question de la pertinence des informations affichées en fonction du contexte de consultation. Jeffrey Zeldman écrit justement sur son blog à propos de la notion de Responsive Design :

« (...) I also think it may be an even bigger idea than we initially realized—an idea too big to be limited to a single, technical approach to the problem of multiple, disparate viewing environments ».

Ce qui est apparu comme une révélation (pour ne pas dire “révolution”) il y a maintenant un peu plus d’un an, ne s’arrête pas aux considérations matérielles. À vrai dire, les bonnes pratiques en matière de web design les prennent en compte depuis longtemps. CSS3 facilite la manipulation de la mise en page, certes, mais ne résout pas la problématique de fond :

De quelles informations l’utilisateur a-t-il réellement besoin dans un contexte précis ?
On se rend compte alors rapidement que l’usage qui est fait d’un site ou d’une application web est rarement le même selon qu’on y accède depuis son ordinateur ou son téléphone. La “porte d’entrée” doit donc être adaptée et l’information superficielle, sacrifiée. L’approche “Mobile First” élaborée par Luke Wroblewski en 2009, consiste d’ailleurs à appréhender la conception d’un site web d’abord par sa version mobile pour mieux percevoir l’essentiel dans sa version classique.

À MFG Labs, nous intégrons donc les principes du Responsive Design dans notre méthode de conception, basée avant tout sur l’usage, le contexte et la pertinence de l’information.

Pour Cinémur par exemple, notre volonté a toujours été de répondre à la question “Quel film vais-je voir ce soir ?” de la façon la plus rapide et fluide possible. L’interface a donc été pensée en ce sens, délaissant l’exhaustivité des méta-données pour valoriser au contraire ce qui peut réellement faire la différence : les avis de mes amis et les bandes annonces.
Par ailleurs, le nombre d’affiches par ligne varie dynamiquement entre 6 et 8 selon la résolution d’écran utilisée.

Nous nous ferons un plaisir d’approfondir notre approche du design de services dans un prochain billet, en abordant notamment les spécificités et les avantages des applications web (web apps).