Intégration HTML & CSS des maquettes Photoshop au pixel près

Je reviens rapidement sur la question du rendu identique des maquettes quelque soit le navigateur. Je pense que tout le monde est d’accord pour reconnaitre que les standards ont encore une marge de progression et que les spécifications CSS3 et HTML5 prendront du temps avant d’être validées et implémentées correctement dans au moins deux navigateurs. En attendant, il faut bien faire avec l’existant. Est-ce à dire qu’il faut faire son deuil du rendu unique dans tous les navigateurs ?

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.