睦勝 Geek
Qui sait quand il faut combattre et quand il faut s'en abstenir sera victorieux.

Responsive or not Responsive ? Je reste pensif


04/12/2012

Cet article est une traduction partielle d’un article écrit par Christopher Butler, le directeur de l’exploitation de l’agence web américaine Newfangled. Il est l’auteur de nombreux articles relatifs à la gestion et à la conduite de projets web.

J’ai choisi de ne m’intéresser, ce mois-ci, qu’à la question de la pertinence  d’adopter ou pas le Responsive Web Design. L’intégralité de l’article est accessible dans la newsletter du mois d’octobre 2012 de Newfangled : What we’ve learned about responsive design pour les anglophones.  Si vous ne lisez pas l’anglais, un peu de patience, ce qui n’est pas encore traduit dans cet article le sera au fur et à mesure et cet article sera mis à jour pour intégrer les liens vous permettant de reconstituer l’article original en entier.

  

J’étais nerveux quand nous avons décidé de nous mettre à faire du Responsive Web Design. Je pensais que cela allait complètement perturber notre chaine de production, rendant les projets beaucoup plus compliqués, stressants et beaucoup moins rentables. Heureusement, ce ne fut pas le cas. Bien sûr, cela ne fut pas sans heurt et nous avons dû procéder à des changements dans nos process. Mais ça n’a pas été une catastrophe, ce que j’ai tendance à attendre du changement…

 

Après environ un an à réaliser des projets en Responsive Web Design, nous avons beaucoup appris et j’ai consolidé mes opinions sur ce que nous faisons et comment nous le faisons. J’aimerais en partager quelques aspects avec vous, mais d’abord, je pense qu’il serait utile de revoir l’idée de base du RWD et d’examiner de manière critique certains aspects de la philosophie qui va avec. Si vous êtes pressé d’avoir des exemples et des images, vous pouvez… patienter ou aller lire l’article original [NDLR : la partie à laquelle l’auteur fait référence est en cours de traduction].

 

Pour faire court, le responsive web design traite du café, pas de la tasse.

 

Pour ceux d’entre vous qui ont besoin d’un petit rappel – ou pour ceux qui n’ont jamais vraiment bien compris ce que signifie le Responsive Web Design – je vais faire de mon mieux pour résumer le concept aussi simplement que possible : Au lieu de réaliser un site complètement séparé vers lequel les internautes sont redirigés, ou de créer des gabarits alternatifs qu’on échange en fonction de leur terminal, le RWD est une approche visant à créer un site web qui étend sa feuille de style CSS avec des agencements spécifiques du contenu basés sur la taille de la fenêtre de navigation. Etant donné le nombre pléthorique d’appareils avec lesquels les internautes peuvent consulter un site, l’approche la plus efficace pour présenter du contenu de manière cohérente sur une telle variété de contextes est de rendre le contenu lui-même flexible et non pas son conteneur. Ça parait logique, non ? Eh bien, cela dépend de ce que l’on entend par “rendre l’affichage du contenu flexible”… ou plutôt “à quel point peut-on vraiment le rendre flexible”.

 

Plus le contenu est flexible, plus il y a de variables à prendre en compte. Et comme nous autres webdesigners et développeurs n’avons aucun contrôle sur le nombre des différents petits écrans dans la nature, nous avons besoin d’une méthodologie différente pour garder ce responsive truc gérable. Sinon, nous nous sentirions obligés de bidouiller nos designs pour chacune des tailles d’écran existantes (et il se trouve qu’il y en a vraiment beaucoup). Donc, ce que nous faisons pour ne pas perdre les pédales, c’est décider d’un nombre restreint de valeurs couperets (généralement 3 ou 4) entre lesquelles se situent les résolutions d’écran correspondant globalement aux catégories “desktop” (ordinateur), “tablet” et “mobile”.  Notre feuille de style CSS “répond” à la fenêtre de navigation en appliquant des amendements – que nous appelons « media queries » (littéralement, requêtes de média) - que nous avons conçus spécifiquement pour ces plages de résolution. Ainsi, les visiteurs naviguant sur une tablette de 7 ou 10 pouces, qui ont des résolutions différentes, vont déclencher les mêmes requêtes, correspondant à la plage située entre deux valeurs couperets : celle de la plus petite résolution d’ordinateur que nous avons prévue et celle de la plus petite résolution de tablette. La différence de résolution entre ces deux appareils est suffisamment petite pour que l’agencement soit pris en charge par des facteurs d’ajustement plus généraux comme le wrapping (« emballage »), le padding (« marges intérieures ») et le margin (« marges »). Je sais, c’est compliqué. Si ça peut vous permettre de mieux visualiser, il s’agit de la même technique que celle que nous utilisons depuis des années pour optimiser la manière dont on imprime une page web – dans ce cas précis, le media que nous ciblons est « impression » - c’est juste que nous avons poussé le concept vers des territoires biens plus riches et complexes. Idéalement, cette approche est la méthode la plus efficace d’optimiser l’expérience utilisateur sur le plus large spectre d’environnements. Idéalement. Je reviendrai un peu plus tard sur les subtilités pas-si-idéales-que-ça, quand je marmonnerai dans ma barbe sur les tests et sur la prise en charge par les appareils…

  

Le Responsive Web Design demande plus de travail. Et coute plus cher : Vous n’en avez peut-être pas autant besoin que vous pensez.

 

Une idée m’a traversé l’esprit : Puisque le RWD est une solution mobile plus efficace que de créer des sites spécifiquement pour les smartphones ou des gabarits de page alternatifs, cela va logiquement être moins cher et plus simple que ce à quoi tout le monde s’attend. FAUX ! La réalité, c’est que faire du Responsive Web Design, demande un travail qui ne serait tout simplement pas fait si le mobile n’était pas pris en compte. Comprenez-moi bien, je ne suis pas en train de dire qu’il faut laisser tomber le mobile. Mais dans certains cas, je dirais que le mobile est probablement placé plus haut dans la liste des priorités qu’il ne le mériterait par son rapport coût/bénéfice.

 

Notre audience est principalement composée de personnes travaillant dans la publicité, le marketing et l’industrie du design. Ce sont des personnes qui influencent voire prennent les décisions sur des projets de design et de développement. En gardant en tête notre cœur de cible, si vous me demandez si le mobile doit gagner en priorité, je dirais « oui, absolument ». Je penserais à tous nos visiteurs hipsters et stylés et à combien parmi eux ont probablement déjà un iPhone 5. Mais vous savez quoi ? Le mois dernier, à peine 10% de nos visiteurs ont consulté nos sites à partir d’un appareil mobile. Cela comprend les smartphones ET les tablettes. Si je remonte un peu plus loin, sur les 6 derniers mois, la part des visiteurs mobiles est exactement la même. Un an ? On tombe à 8%. Donc oui, le trafic mobile augmente mais certainement pas aussi vite que ce que j’ai déduit de ce que je crois savoir de notre public. Avec ces chiffres en tête, est-ce que le mobile doit être aussi prioritaire qu’il l’a été (nous sommes sur le point de lancer une refonte d’un site utilisant fortement des techniques de responsive web design – plus de détails plus loin -) ? Avec plus de 90% de nos visiteurs qui continuent à consulter nos sites sur ordinateur ? Probablement pas. Mais pour nous, il y a un intérêt supplémentaire à prendre en compte : la démonstration de notre savoir-faire dans ce domaine, ce qui fait prévaloir les bénéfices sur le coût. Cependant, pour de nombreux autres secteurs, cet intérêt supplémentaire est inexistant.

 

Très peu de nos clients disent « l’argent n’est pas un problème » lorsqu’il s’agit de budgétiser un projet web. En réalité, pour nombre d’entre eux, nous représentons un centre de coût important. Mais ils ont foi en la valeur de ce que nous leur offrons et ils nous font confiance pour les mener vers les issues les plus favorables. Il serait inapproprié de ma part de leur refourguer systématiquement du Responsive Web Design sans tenir compte de ce qu’ils savent de leurs publics, des données réelles concernant leurs visiteurs et de leur budget réel. Si leur argent peut être mieux dépensé autrement, alors il doit l’être.

  

Sérieusement, les gars, « mobile first » n’est pas une règle.

 

Si l’analyse de votre rapport coût/bénéfice est en faveur du responsive web design, super, remontons nos manches et amusons-nous. Mais par où commencer ? Peut-être avez-vous entendu des gens parler d’une approche “mobile first” (mobile en premier) dans la conduite de projets web. C’est devenu une sorte de dogme et je pense qu’il est important de mettre au clair ce que nous entendons par ce terme. Généralement, cela tend à signifier deux choses différentes qui parfois, ne se contredisent pas.

 

La première est que le mobile est désormais dominant à un point qui nous oblige à inverser notre ordre habituel des priorités – construire d’abord pour les ordinateurs puis trouver un moyen pour que l’affichage sur petits écrans ne merdoie pas – ce qui fait que nous commençons par le petit, le faisons bien, puis étendons à partir de là. Cela signifie, bien sûr, qu’une part significative de vos visiteurs consultent votre site à partir d’un mobile. Oui, l’utilisation des dispositifs mobiles a explosé. Nous sommes pratiquement des cyborgs et tout et tout. Mais votre site est-il le genre de site que l’on vient principalement visiter à partir d’un terminal mobile ? Observez vos visiteurs, vérifiez vos informations. Si c’est bien le cas, alors, super ! Mobile first ! Mais dans le cas contraire, référez-vous à la section traitant du rapport coût/bénéfice.

 

La seconde est que partir du mobile entraine une certaine économie dans la réflexion autour du design qui devrait permettre un affichage correct quel que soit l’environnement – que ce soit un petit écran de smartphone ou un écran géant de home cinema -. C’est tout simplement faux ! Concevoir un design qui va parfaitement sur un téléphone mobile, aussi beau et ergonomique soit-il selon les normes classiques, n’ira jamais parfaitement sur un terminal beaucoup plus grand. Souvenez-vous, quand l’iPad est sorti et qu’Apple a dû le « vendre » aux développeurs iPhone en disant : « Bonne nouvelle ! Vous n’avez pas besoin de redesigner vos applications pour ce nouvel appareil. Vous pouvez simplement la centrer dans le grand écran ou l’étirer pour que ça prenne tout l’écran. » Euh… attendez une seconde ! Elle est où la bonne nouvelle ? Vous avez raison, il n’y en a pas. Centrer l’application était juste nul et l’étirer la faisait baver. Si le développeur se contentait de corriger son code pour rentrer nativement dans les dimensions du nouvel écran de l’iPad sans pour autant repenser son application, ça ne bavait effectivement plus mais ça ressemblait quand même à une application iPhone étirée. En somme, un bon design tient compte du contexte. Ce n’est pas parce que les petits écrans nous obligent à prendre des décisions fortes (voire drastiques) en termes de priorisation que nous aurons le meilleur des designs possibles.

 

Une dernière chose : La réalité de votre public doit vraiment déterminer la philosophie derrière votre design. C’est une chose qu’une part significative de vos visiteurs consulte votre site à l’aide d’un terminal mobile. C’en est une autre si la portion de votre audience qui vous tient le plus à cœur utilise leurs mobiles pour consulter votre site et militent (en répondant à vos appels à participation) à l’aide de ces appareils. Nous devons vraiment réfléchir profondément à ce sujet puis vérifier les conclusions de nos réflexions en parlant aux personnes qui sont les plus représentatives de notre audience. Demandez-leur. Consultent-ils plus souvent votre site sur mobile ou sur ordinateur ? Participent-ils plus souvent à partir d’un terminal mobile ou à leur bureau ? En me basant sur les conversations que j’ai pu avoir depuis maintenant quelques années, notre public consomme peut-être nos sites de plus en plus à partir de terminaux divers et variés mais dès qu’il s’agit d’interagir, ils le font de leur bureau. Pour moi, cela apporte un éclairage nouveau sur la priorité à accorder au mobile. Oui, c’est anecdotique. Et à part mes propres analyses, je n’ai pas de chiffres à vous présenter ; je vous encourage donc fortement à commencer à poser ces questions vous-mêmes.

A propos de Young Sun TAN :

Young Sun TAN est un geek webophile, technophile, bidouilleur et gourmet.

Sur la toile depuis 1995 avec sa première page web (une biographie de Beaumarchais pour le compte du collège Beaumarchais de Paris), il revendique une identité de "digital native". Après une Terminale S au Lycée Louis-le-Grand à Paris et un Master en Informatique option Ingénierie Informatique - Systèmes d'Information, il a entamé une carrière d'analyste web et est désormais Project Leader pour le Groupe Lagardère. Il compte parmi ses réalisations les sites de Celebrity Cruises, Royal Caribbean ainsi que Gulli, Canal J, Tiji et Europe 1.

Menant un veille constante sur les évolutions du web et du développement, son expertise couvre le PHP-MySQL, le framework jQuery ainsi que le CMS eZPublish et Symfony pour lequel il a une affection toute particulière.

Côté détente, il affectionne tout particulièrement les bonnes tables et les bons plans foodista. Bien que la street food occupe une place de premier choix dans son cœur ventre, il n'est pas allergique à une excursion gastronomique ou bistronomique.

Retrouvez Young Sun TAN sur :