Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.
Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio 😉
Découper avec «dextérité»
Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.
A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.
Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.
Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.
Sur le fil du rasoir
Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !
Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?
Conclusion…
… Y en a pas 😉 Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?
On peut aussi par expérience anticiper la réaction du client final :
‘Oui mais sur la maquette JPG que j’ai validé les bords sont arrondis de cette façon, l’ombre de ce bloc était comme ça, actuellement je n’ai pas le même rendu sur mon navigateur etc etc’
On peut aussi anticiper la réaction du Créa :
‘Oui mais sur ma maquette, l’ombre portée à toute son importance dans le rendu final, merci de respecter ma créa et de ne pas m’embrouiller avec tes CSS machin truc’
Avant-Projet, à moins d’une information claire et nette, d’une compréhension de mes interlocuteurs sur le traitement en CCS et ses conséquence ‘Cross-Browser’ :
Rendu Maquette = Rendu HTML (pixel perfect power)
Ca évite les retours épuisants et ça ne change rien aux respects des standards du web.
Pour rebondir sur ta conclusion, je pense que nous ne sommes pas près de voir des clients, voir créatifs poussant dans le sens des CSS3. Disons que nous ne sommes pas près de voir des ‘briefs’ laissant le choix aux intégrateurs de traiter le graphisme (arrondis, ombrés etc) en CSS3.
Et même si c’est le cas, ça sera souvent la porte ouverte à des retours du style :
‘Oui, mais au final, vu la différence sur tel navigateur, pouvons nous revenir sur une intégration classique ?’
Beaucoup de vérité et de vécu dans ce post, j’ai régulièrement des cas semblables. Le temps et l’énergie que tu vas déployer à vanter les mérites de CSS3 ou à expliquer des concepts tels que l’amélioration progressive (ou la dégradation gracieuse), tu as plus vite fait de coller le plus possible au graphisme.
A la rigueur, le client tolère (j’ai bien dit « tolère ») des espacements différents entre les blocs… mais toucher au sacro-saint graphisme, JAMAIS ! 🙂
Ehé, ça me rappelle un peu mon univers d’intégrateur que j’ai mit en BD : http://annuaireblogbd.com/fr/bd/1/?next=14
Salut,
ça dépend des clients, mais en général, c’est une obligation de travailler au pixel près au risque d’avoir moult retour …
Bonjour,
Article intéressant 😉
Sauf si on me le demande, je n’intègre pas mes maquettes au pixel près, j’estime que c’est une perte de temps et que les contraintes des navigateurs ne le permettent pas, ils sont bien trop capricieux pour un rendu au pixel perfect, c’est pas du flash…
J’ajuste mes rendus à l’œil en évitant les différences importantes entre les navigateurs.
je pense que le rendu au pixel près est une perte de temps considérable. Car je pense que le design soit la chose sur laquelle il faut passer le plus de temps.
Évidemment que le client risque de grogner un peu en ne comprenant pas pourquoi son design n’est pas exactement le même entre la charte graphique et le site finale. Mais comme pour tous les métiers il est essentiel d’expliquer au client dès le début les contraintes techniques et les avantages et inconvénients d’utiliser de telles pratiques ou non.
Perso, j’ai eu ces soucis au départ de différence entre l’image et le site.
Maintenant, je fais valider soit un site ou une capture du site, avec l’idée générale.
Le client peut valider tel ou tel élément en fonction du cadre que je lui propose; celui de la faisabilité.
Avec mes clients ça passe, je ne sais pas si avec d’autres ça pourrait le faire de la même manière.
Je vends mes sites sur leur fonctionnalité et sur le référencement, grace à un travail pédagogique que je fais avant la signature du contrat, ensuite je propose du « beau » 😀
Les exigences métier se soucient malheureusement assez peu de ces réflexions. Au final, c’est pourtant lui qui est perdant à exiger un rendu pixel perfect.
Les navigateurs n’ont pas les même normes et certains ne sont d’ailleurs plus maintenu. A quoi bon exiger un rendu identique sur des navigateurs qui ont 10 ans d’écart technologique. Les statistiques ont beau livrer leur verdict, on ne peut pas être innovant et performant sur un marché évoluant pourtant à une vitesse considérable.
Merci pour ce billet 😉