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 :

Amélioration progressive de navigateurs desktop et mobile

Un marché des navigateurs qui casse la notion d’amélioration progressive.

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

Passage de feature phone au desktop

Comment passer d’une présentation aussi simple à un site aussi complet à l’aide du responsive web design ?

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 :

Expérience optimale + Large support + Maintenabilité : Cela n'existe pas

Expérience utilisateur, large support et maintenabilité : choisissez-en deux.

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é.

Kaelig

À propos de Kaelig

Intégrateur exilé à Londres, il se base sur une expérience acquise en web agency, chez BBC News et plus récemment en start-up quand il milite pour une vision à la fois pragmatique et qualitative de la conception web. Il transmet son expertise via un blog, Le ministère de l'intégration, et sur le papier dans le livre CSS maintenables.

Vous pouvez partager cet article sur Facebook, Twitter ou Google+.

Faites un don pour soutenir l'association Handiparentalité !

L'association Handiparentalité a pour objet d'aider les parents ou futur-parents en situation de handicap, et de faire reconnaître le statut de parent handicapé au niveau des institutions.

Les fonds récoltés vont directement sur le compte PayPal de l'association. En cliquant sur le bouton "Faire un don" ci-dessus, vous allez être redirigé vers PayPal. Vous n'êtes pas obligés de créer un compte PayPal pour faire un don.

11 commentaires sur “Ré-évaluer l’approche responsive sur desktop

  1. shazen, le Jeudi 20 décembre 2012 à 09:15

    Superbe travail effectué sur la version mobile !
    Du coup je préfère utiliser la version mobile depuis mon smartphone ;-)

  2. Xavier, le Jeudi 20 décembre 2012 à 09:32

    Une analyse très intéressante et que je partage entièrement. Le responsive design est une très bonne chose mais peut compliquer la mise en place d'un site pour desktop. Il est maintenant urgent de pouvoir détecter si le visiteur du site est sur une tablette, un desktop ou un smartphone pour pouvoir adapter le contenu de manière optimale (et pas juste masquer certaines zones en fonction de la résolution...)

  3. Nico, le Jeudi 20 décembre 2012 à 10:40

    Il n'y a pas de mystère, le responsive c'est bien, c'est même génial, mais de là à ce que cela solutionne tous les problèmes, il y a un pas... de géant pas encore franchi.

    Enfin, bon, comme tous les buzzwords, y a la réalité. :)

  4. MoOx, le Jeudi 20 décembre 2012 à 15:59

    Y'a un petit commentaire quand même, c'est que dans certains cas, la vitesse de connexion n'a aucun rapport avec la taille du média. J'utilise beaucoup mon smartphone chez moi pour faire de la veille dans mon canapé ou au toilette :p et inversement j'utilise souvent mon smartphone en modem sur ma laptop lors de déplacement, j'ai donc une connexion dès fois pourri sur mon site "desktop". Je ne fais que soulevé un autre problème je sais bien... =)

  5. iManu, le Jeudi 20 décembre 2012 à 17:21

    Je crois que la version desktop de Starbuks, un site souvent donné en exemple de bon design responsive, souffre de ce problème non ?

  6. Kaelig, le Jeudi 20 décembre 2012 à 18:04

    En effet, des sites comme celui de Starbucks ont un petit souci d'obésité sur mobile.

  7. noclat, le Samedi 22 décembre 2012 à 15:20

    Entièrement d'accord avec ton constat sur les insoucieux du RWD. Une bonne adaptation mobile nécessite une réelle recherche sur tous les plans, et pas une simple application de media-queries.
    Bonne étude, bonne réponse, et surtout, bonne réalisation. Bravo à vous ;).

  8. Rudy Rigot, le Lundi 24 décembre 2012 à 11:15

    Oh mon dieu +10000 !

    Je suis content d'avoir maintenant un article de référence vers lequel renvoyer, c'était bien compliqué jusqu'à maintenant de convaincre les fashion victims sur 140 caractères... :)
    Du fond du coeur, merci pour cet article !! ;)

  9. Nicolas Froidure, le Lundi 24 décembre 2012 à 12:01

    @MoOx Exactement, peut-être faudrait-il des conditions sur la connexion également dans les règles responsives. Je sais que ça peut se voir avec du Javascript, mais cela implique alors un chargement Ajax des ressources complémentaires quand la connexion est bonne.

    Peut-être que les frameworks comme AngularJs ou Backbone peuvent aider à charger un minimum puis, d'autres ressources enfocntion du contexte. C'est tout pété quand y'a pas Js, mais c'est à la marge je pense.

    Bref, effectivement, on a pas la solution pour le moment. Mais le responsive répond bien pour des sites qui n'ont pas les moyens de faire un site à part, avec une feuille de style, on améliore un peu l'affichage sur mobile et c'est déjà mieux que rien. J'aurai pas créé un site mobile à part entière pour mon blog par exemple.

  10. Frank Taillandier, le Samedi 29 décembre 2012 à 17:47

    Merci Kaelig pour ce retour d'expérience plein de bon sens. Comme Rudy, je ne manquerais pas de le pointer comme référence en la matière.

    Honnêtement j'ai du mal à revenir vers la version desktop, même sur mon laptop connecté en ADSL car l'essentiel est là sur la version mobile. Less is more.

    Je crois de moins en moins à des sites "mobiles" et à des sites "desktops", il y a juste les sites conçus pour l'utilisateur et les autres. L'obésité grandissante des pages web est un triste constat à l'image du monde d'aujourd'hui. Dans les deux cas, la décroissance est peut-être la solution ;)

  11. Kusto, le Samedi 4 mai 2013 à 03:25

    Sympathique article. Pourtant comme le souligne Frank Taillandier, pourquoi la version Desktop, celle remplie de contenu dans tous les sens imbuvables et donnant la migraine. Vous traitez de mobile-first, mais sans en prendre l'essence même: éviter ce genre de version Desktop rebutante… Forcément s'y on s'entête à vouloir en mettre un max, le responsive devient casse-gueule.
    De plus, quelques problèmes:
    - sur un écran de grande taille, la version "mobile" souffre de quelques problèmes de mise en page, c'est dommage car elle est bien plus agréable au niveau du contenu que la version "desktop"
    - Les contenus non liés: retour à la case homepage lorsque l'on change de version.
    - Le liens de renvois automatiques: http://www.bbc.co.uk/ me renvoie sur le mobile et http://m.bbc.co.uk/ sur le desktop suivant ma session, seule manière de changer: un lien perdu dans un coin au bas de page, pour le confort utilisateur, prendre les décisions à sa place, on repassera.
    - Les contenus incomplets sur la version mobile, ce qui doit forcer à passer sur la version desktop si on souhaite réellement les consulter. (et en se retappant toute la navigation au vu du retour case desktop)
    - Et pour la blague: «Media playback is unsupported on your device» sur mon laptop^^

    Au final, dire que le responsive est la réponse à tout est une absurdité, mais le contraire l'est tout autant. Dans ce cas là, j'aurais préféré du responsive quitte à supprimer une partie des "blocks de liens" qui polluent excessivement la version desktop, ce qui n'aurait pas été un sacrifice, mais un bienfait.

Laisser un commentaire

Les commentaires sont modérés manuellement. Merci de respecter l'auteur de l'article, les autres participants à la discussion, et la langue française. Vous pouvez suivre les réponses par flux RSS.