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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



Un commentaire pour “Intégration HTML & CSS des maquettes Photoshop au pixel près”

  1. Zipnu dit :

    Le funambulisme est probablement la méthode la plus stable. :D

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site