Des maquettes difficilement intégrables… wait, what ?

La semaine dernière, Maxime (chef de projet/développeur) a relancé le débat sur les problèmes de communication entre graphistes et intégrateurs à travers son article intitulé « Des maquettes facilement intégrables svp… wait, what ? ». L’article dénonce les intégrateurs fainéants qui se plaignent de maquettes difficilement intégrables, qui ne font pas leur boulot, qui voudraient que les graphistes connaissent les contraintes du web, et qui ne mettent aucun coeur dans leur travail. Comme la dernière fois, en tant qu’intégrateur, je suis choqué qu’on puisse tenir un tel discours et j’avais envie de rectifier quelques points sur le webdesign et l’intégration.

Le design n’est pas la finalité d’une page web.

Quand je lis des articles de non-intégrateurs qui parlent d’intégration, j’ai souvent l’impression qu’ils considèrent le design comme la finalité d’une page web.

Le graphisme d’un site internet doit laisser transparaître une stratégie de communication définie et adaptée aux objectifs, et doit susciter une émotion chez l’internaute.

La maquette doit regorger de surprises et de dynamisme, peu importe s’il faudra du CSS3, des positions absolutes dans tous les sens. Chef de projet, développeurs, intégrateurs, arrêtez de râler et faîtes votre boulot !

C’est probablement la pire idée pré-conçue qu’on puisse avoir de la conception web. Alors répétez après moi : le design n’est pas la finalité d’une page web. Une page web, c’est :

  • Une idée, une volonté (émise par le client)
  • Un cahier des charges (défini par le chef de projet)
  • Un rédactionnel (réalisé par un rédacteur web)
  • Des préconisations de référencement (émises par un référenceur)
  • Une charte graphique (définie par le webdesigner)
  • Un développement (codé par le développeur)
  • Une intégration (conçue par l’intégrateur)
  • Un hébergement (géré par un administrateur réseau)

Afin qu’un projet réussisse, chaque intervenant doit faire son travail du mieux possible en tenant en compte du travail de tous les autres. Un rédacteur web peut pourrir le travail du référenceur en bourrant ses textes de mots clés peu pertinents. L’administrateur réseau peut saccager le travail de tous les autres en hébergeant le site sur sa vieille bécane qui traîne au fond du grenier. L’intégrateur peut détruire le travail du webdesigner en ne respectant pas les bonnes polices, les mêmes marges, etc. Et quand un webdesigner propose une charte graphique compliquée à intégrer, avec des concepts techniques sans intérêts qui vont prendre des jours à intégrer, il mets en péril le déroulement du projet, le planning fixé par le chef de projet.

Les webdesigners doivent savoir coder.

Le point fort de l’article initial, c’est la prétention qu’un webdesigner ne doit pas savoir coder pour bien faire son travail.

Beaucoup de concepteurs web utilisent des grilles prédéfinies, par exemple la plus connue : 960 Grid System. […] En respectant ces contraines, cela ne choque personne ? Comment pouvoir fournir un design innovant si avant même de commencer la création le graphiste possède déjà des règles auxquelles obéir ?

Le graphiste doit savoir ce qui est faisable [est] un argument tout simplement anti-innovation. Si l’on connaît les limites, on ne saura pas les dépasser, on essaiera même pas.

C’est sûrement la pire ineptie que j’ai jamais lu. Dis donc, webdesigner, si une grille limite ta créativité, alors est-ce que les 16 777 216 de couleurs d’un écran moderne limitent également ta créativité ? Du coup, tu fais tes maquettes à la main sur papier, afin de ne pas être limité. Est-ce que les polices existantes et les plus courantes sur le web limitent ta créativité ? Du coup, tu t’assures de travailler à la main sur une typographie complète pour chaque projet, comme ça ta créativité n’est pas limitée.

Ce serait totalement absurde de se prétendre peintre si on ne sait pas utiliser un pinceau, et qu’on a aucune notion de mélanges de couleurs. Ce serait tout aussi absurde de se prétendre photographe si on a pas la moindre idée de ce qu’est un appareil photo. Sur le web, la matière première d’une page web, c’est HTML et CSS. Pas Photoshop.

Déjà en juin 2008, David Heinemeier Hansson de 37Signals écrivait un article intitulait Les webdesigners devraient faire leur propre HTML/CSS.

Le web est un monde de contraintes, les matériaux de HTML et CSS se mélangent et donnent lieux à des moyens qui encouragent certains styles. Et être capable de comprendre et se fondre dans ce périmètre est ce qui fait qu’un design semble natif. Les designers qui travaillent directement avec les matériaux plutôt qu’à travers un environnement simulé comme Photoshop ont un avantage distinct pour faire en sorte que ça arrive.

Si vous travaillez sur un jeu Flash ou une campagne media pour présenter une nouvelle montre, vous pouvez vous permettre de mépriser cet avantage. C’est lorsque la prouesse graphique d’une toile totalement vierge, l’approche « le ciel est la limite », est exactement ce que vous souhaitez. Vous voulez des lumières et des paillettes. Faire quelque chose qui soit natif au web n’a pas d’importance.

Mais à l’exception de cette niche, faire du design pour le web revient beaucoup moins à faire quelque chose qui brille, et beaucoup plus à faire quelque chose qui marche. Les décisions du design qui comptent touchent directement aux contraintes des matériaux. Quels éléments de formulaires utiliser. Quelles polices utiliser. Quelle mise en page. Quel déroulement. Ces décisions sont faites pauvrement quand on fait son design à part.

Quand on me demande des exemples de bons designs web, je pense à FacebookLe Bon Coin, ou encore Reddit. Ce sont des bons exemples, car chacun de ces sites remplit parfaitement sa tâche. Mais je suis sûr que si vous présentiez des maquettes Photoshop proches de ces sites à vos clients, on vous rirait au nez. Par contre, si vous avez une version HTML fonctionnelle, où l’on peut cliquer sur les boutons, enchaîner la navigation, vous n’aurez aucun mal à convaincre du bien fondé de vos maquettes., et de la pertinence de votre charte graphique.

Travailler sous Photoshop incite à passer du temps sur des détails visuels, souvent sans importance. En maquettant en HTML, dans un navigateur, on se rends compte immédiatement de problèmes d’utilisation, d’ergonomie, et même de rédaction (désolé, mais personne ne lit sur une maquette JPG). Maxime pense « qu’intégrer ses propres maquettes amène un nivellement par le bas ». Mais qu’est-ce qui est nivelé par le bas ? La partie purement graphique (« les lumières », « les paillettes ») ? La facture faite au client ? Ou l’expérience utilisateur ?

On ne travaille pas pour le client.

A travers son article, Maxime (également entrepreneur) insiste lourdement sur le fait de travailler pour satisfaire son client.

Mais la plupart des choses sont tout de même réalisables, sans non plus passer 3 jours sur une maquette. Il faut simplement avoir un respect du travail, un souci du détail, un souci du client, et un peu de courage bon sang ! […]

Quand le couple graphiste-intégrateur se connaît bien, la séparation entre les deux métiers peuvent même être avantageuse. Cela m’arrive souvent avec Thomas, notre directeur artistique ; il sait que je vais intégrer sa création au pixel près, que je vais harmoniser moi-même les incohérences qu’il a pu laisser, et que je vais me débrouiller pour concrétiser en intégration ses idées créatives et farfelues sans dévaluer la chose par souci de rapidité ou de simplicité. Le résultat ? Des clients heureux.

Voilà encore une idée saugrenue. Si je voulais me contenter de rendre mes clients heureux, je les écouterais et je mettrais de la musique en fond des sites que j’intègre. On ne fait pas un site web pour le client. On fait un site web pour un utilisateur. Un utilisateur est une vraie personne. Un utilisateur a son terminal (ordinateur, smartphone, télévision, …), son entrée (clavier/souris, tactile, …), sa sortie (écran 16/9, 4/3, 72 dpi, 326 ppi, …), sa connexion internet (56k, ADSL, Fibre, Edge, 3G, …). Un terminal à son système d’exploitation (Windows, Mac OS, iOS, Android, …), son processeur, sa carte graphique, … En pratique, vous aurez quasiment autant de configurations possibles que de visiteurs. Quand vous travaillez pour le client, vous rendez 1 personne heureuse. Quand vous travaillez pour l’utilisateur, vous rendez des milliers voire des millions de personnes heureuses.