Ré-évaluer l’approche responsive sur desktop

On lit beaucoup (trop) d’articles et de commentaires sur les blogs qui chantent les louanges du responsive web design à chaque occasion d’aborder le sujet de la stratégie mobile. Il plane même une chape de dédain envers ceux qui n’ont pas « responsifié » leur site web. Cette attitude immature est profondément désolante. J’ai même entendu un développeur dire que Facebook pourrait être un site adaptatif avec « un peu de bonne volonté »…

Ces six derniers mois, j’ai eu la chance de travailler sur un produit à fort trafic exclusivement dédié au mobile, avec par conséquent des contraintes de performances très élevées. Pour accommoder le site à un maximum de configurations mobiles différentes, nous avons conçu cette plateforme en suivant trois principes :

• la performance est très importante : faire en sorte de délivrer à l’utilisateur uniquement le contenu dont il aura besoin,
• amélioration progressive : détection des possibilités du navigateur plutôt que détection du navigateur lui-même,
• mobile-first : quelle que soit la nature du périphérique mobile et la taille de l’écran de l’utilisateur, le contenu doit être accessible.

Le produit en question, Responsive News — si vous êtes redirigé vers la version « desktop », cliquez sur le lien « mobile site » en bas de page, c’est pour le moment une déclinaison mobile des contenus du site « classique » sous une forme très performante, minimaliste, utilisant des techniques de conception modernes.

Afin que les lecteurs accèdent à ces contenus sur leurs feature-phones (ou *dumb*phones), smartphones et petites tablettes, ils sont automatiquement redirigés vers le sous-domaine m. quand ils accèdent au site BBC News. On peut donc parler d’une conception hybride entre responsive web design et sites dédiés.

Cette approche hybride nous a valu de nombreux commentaires désobligeants, allant même jusqu’à taxer la BBC d’incompétents ne sachant pas ce qu’est le responsive web design. Explications et réflexion.

Adaptatif du mobile au desktop ?

Depuis plusieurs mois, les équipes UX, techniques et éditoriales se posent la question du portage au desktop en partant de cette base mobile. Nous avons alors tenté de comprendre comment appliquer les principes précédemment édictés à un site qui serait multi-écrans (depuis le mobile jusqu’à l’ordinateur de bureau, en passant par les tablettes et, pourquoi pas, les téléviseurs connectés).

Le souci est qu’en optimisant ce produit pour le mobile, nous avons complexifié son adaptabilité aux autres types de périphériques. L’expérience utilisateur, la mise en page, la typographie, l’interactivité et l’ordre dans lequel sont présentées les informations sont autant de facettes orientées vers un même but : prodiguer à l’utilisateur la meilleure expérience possible dans un contexte mobile, sans se soucier (pour le moment) de la problématique desktop.

Cette base mobile est clairement tournée vers l’avenir. Matt Chadburn, développeur principal lors de la création du projet, disait : « nous ne construisons pas une plateforme pour aujourd’hui, mais pour les cinq années à venir ».

Le challenge est grandiose et passionnant à la fois. Il s’agit de convertir une chaîne de production entière à un mode de pensée différent, de manière fluide, économique et qui réponde aux attentes des utilisateurs aujourd’hui, et surtout demain.

Fort de ce constat, pouvons-nous encore prétendre être capables de produire des sites totalement adaptatifs, du mobile au desktop ? Certainement, mais cela a un coût : celui des compromis.

Un écosystème à la traîne

Dans un contexte adaptatif, supporter les ordinateurs de bureau signifie aussi s’adapter à une audience équipée de navigateurs antidatés. Prendre en compte ces mauvais bougres (Internet Explorer, pour ne pas le citer) lors du processus de création a un impact direct sur l’accumulation volontaire de dette technique, est un frein à la productivité et limite la capacité d’innovation au cœur du produit.

Ces effets sont causés par une notion d’amélioration progressive quelque peu revisitée, devant s’appliquer à un paysage technique tel que celui-ci :

Et ce que nous voulons construire, c’est plutôt cela :

Outre les navigateurs, c’est tout un écosystème qui doit être chamboulé lors de la mise en mouvement d’un projet en responsive web design :

• la chaîne de production graphique,
• les positions dans l’équipe (collaboration entre les développeurs, les designers, et les décideurs),
• la gestion de la qualité,
• les systèmes de gestion du contenu,
• les processus de gestion de projet (Agile, Scrum et Kanban fonctionnent plutôt bien sur un produit dédié, mais pas forcément en agence),
• les méthodes de développement et de déploiement,
• et bien sûr les standards, mais j’y viens…

En aparté, ajoutons que l’apparition d’appareils hybrides équipés à la fois de dispositifs tactiles et de pointage ne nous facilite pas la tâche. Quelle expérience délivrer à une tablette Microsoft Surface ou à l’Asus Transformer ? Il est compliqué de savoir si le propriétaire d’un tel matériel utilise sa tablette comme ordinateur portable ou comme liseuse.

Des standards en retard

Le responsive web design est un outil formidable pour délivrer l’actualité à un maximum d’utilisateurs à moindre coût. Cette approche fait d’autant plus sens que nous observons plus de 1300 périphériques (mobiles et tablettes) différents ayant accès à la version mobile de BBC News. Imaginez quel serait le coût de production de sites dédiés pour un marché aussi fragmenté !

Toutefois, plusieurs challenges techniques se trouvent sur notre chemin, parmi lesquels :

• servir des images, infographies et vidéos adaptatives,
• la mise en page (flexbox, grids, etc.),
• la structure de l’information et les menus de navigation adaptatifs,
• la détection des fonctionnalités du navigateur,
• la détection de la taille du périphérique,
• la typographie adaptative,
• la détection du contexte de navigation (luminosité ambiante, distance de lecture, qualité de la connexion, périphérique de saisie…).

Autant de questions qui ne trouvent pas encore de réponse auprès des standards, et encore moins auprès des navigateurs les plus populaires sur desktop (encore une fois, Internet Explorer…).

Il appartient à la communauté de se mobiliser et militer pour l’adoption et l’émergence rapide de standards. Ceux-ci devront répondre non seulement à des besoins du point de vue business, mais aussi et surtout aux besoins des utilisateurs. Sans cela, point de salut pour des sites réactifs de qualité !

Le temps des concessions

Alors qu’il est de plus en plus proposé comme étant la solution, le responsive web design nous force parfois à faire de notables concessions, que ce soit en termes de performances, d’optimisation de l’expérience, de support, ou encore de maintenabilité du produit.

Nos utilisateurs veulent accéder à des services rapides et ergonomiques dans un maximum de contextes, tandis que nous, concepteurs, souhaitons créer des systèmes maintenables et stables. À ce jour, le croisement de ces desiderata n’a malheureusement pas trouvé sa place au centre du responsive web design :

Le responsive web design est clairement un concept qui n’est pas encore à maturité, par manque d’expérience et surtout de support. Je me répéterai en disant que ni les standards du web ni les navigateurs ne sont aujourd’hui à la hauteur du challenge, surtout sur les ordinateurs de bureau.

Le mobile, quant à lui, est une plateforme parfaite pour expérimenter, sur laquelle nous pouvons pousser le web dans ses retranchements afin de produire une expérience dont se délectera l’utilisateur. Nous pouvons par exemple y faire usage de fonctionnalités natives (nouvelles API JavaScript, CSS, HTML5…) grâce à une meilleure propagation des standards que sur nos bons vieux PC.

Soyons pragmatiques

À la suite de ces recherches, cette veille et cette longue réflexion sur le problème, on arrive à une conclusion assez simple : il est très coûteux de forcer un mode opératoire dans un écosystème pas encore prêt, avant même d’avoir envisagé toutes les composantes d’un projet.

Cessons de ne jurer que par cette unique solution encore peu éprouvée, alors que les recettes de nos grand-mères sont toujours bonnes à cuisiner, et surtout bien meilleures dans la plupart des cas.

Résistons aux sirènes des nouvelles modes et agissons tout simplement en faveur de ce qui est bon pour l’utilisateur, qui lui, s’en fiche bien de l’implémentation technique qui aura été faite.
Je propose deux stratégies, qui pourront s’avérer toutes deux pertinentes selon le contexte du projet :

1. Faire du mobile notre terrain de jeu, et porter ces techniques à d’autres périphériques au fur et à mesure que l’écosystème mûrit. Maintenir plusieurs sites et applications en parallèle a cependant un coût financier non négligeable : c’est le prix à payer pour délivrer nos contenus de manière optimale.
2. Responsive responsable : accepter de délivrer une expérience sub-optimale, mais à un maximum d’utilisateurs. Évaluez précisément les coûts des compromis que vous ferez, car cette stratégie est à double tranchant. J’espère qu’elle deviendra viable dans la plupart des cas à l’avenir, mais elle ne devrait pas être considérée comme l’approche à implémenter « par défaut ».

Quelle que soit la stratégie que vous adopterez, je vous en prie : continuez de repousser les limites du web, relevez ces challenges la tête haute et surtout, partagez vos trouvailles auprès de la communauté.