[Résolu] La fidélité des intégrations face aux maquettes

Bonjour,

J'aimerais savoir : est ce que vous calculez vos intégration au pixel près par rapport aux maquettes ?

Personnellement oui, j'essaye d'avoir le rendu le plus fidèle mais uniquement sur Firefox et IE7 (les navigateurs les plus utilisés) mais pour les navigateurs IE8, IE6, Safari, etc... il y a des petits décalages de 1 à 2 pixels, j'aimerais savoir si c'est une perte de temps de vouloir que ça soit aussi nickel sur ces navigateurs.

Merci.
Modifié par Chok71 (05 Oct 2010 - 16:02)

Bonjour,

je reproduis le plus fidèlement possible mes maquettes mais pas au pixel près car c'est impossible. D'autre part tu serais le seul à voir que c'est réalisé au pixel près donc c'est complétement inutile.

Bonjour,

au pixel près pour l'alignement d'une puce devant un item de liste oui, l'oeil humain y est très sensible.
En règle générale, j'utilise des outils comme MeasureIt et PixelPerfect qui me permettent d'être plutôt fidèle à la maquette.
12px de padding alors qu'il y en a 13 sur la maquette : euh non, surtout quand les différentes maquettes ne sont pas au cordeau. Je préfère autant pas créer une règle spécialement pour un bloc qui a 12px de padding au lieu de 13 pour les autres ...
Après tout dépend de la complexité de l'alignement (et je pense très fort aux formulaires).


Un des aspects les plus difficiles à expliquer à certains clients, c'est le fait que personne à part eux (et nous) ne regarde un site à la fois dans IE7 et dans Firefox ! Ils sont les seuls à voir ce décalage d'1px.
Le visiteur aura peut-être IE7 au travail et Safari chez lui mais entre les deux il y a quelques minutes de trajet ; personne ne s'amuse à lancer plusieurs navigateurs en même temps.

Salut,

Idem, je ne reproduis pas au pixel près, surtout quand il faut travailler pour 12 navigateurs.
Et comme Felipe, lorsque pour un même bloc on trouve des valeurs différentes, j'harmonise pour ne pas multiplier les styles.

En agence, j'ai eu un chef de projet qui passait ses journées à faire des copies d'écran et à comparer dans Photoshop le rendu dans les navigateurs par rapport aux PSD.
Un jour, j'ai failli lui coller mon poing dans la g*****. Plutôt que me laisser gagner par une violence inutile, j'ai préféré rédiger une lettre de démission

Bonjour,
au pixel prés lorsqu'il s'agit de bien aligner les éléments entre eux ou régler le positionnement d'un élément de petite taille (puce...) et encore pas toujours... mais pas pour des marges ou /espacements verticaux ou des blancs tournants, car je considère que c'est une perte de temps pour pas grand chose. Le web t'apprends à être moins perfectionniste et à lâcher prise avec ce genre de contraintes.
Il faut surtout que la maquette semble équilibrée et bien construite au premier coup d'œil.
Modifié par Hermann (03 Oct 2010 - 12:11)

Hello,

Au pixel près sur des lignes repères verticales: oui, pour les navigateurs décents. J'ai même tendance à corriger par rapport aux maquettes qui peuvent contenir des imprécisions (texte 2px trop à droite par rapport à un repère vertical, sans que ça soit clairement voulu).

Au pixel sur des lignes repères horizontales: non. J'essaie de respecter les espaces et proportions, mais pas au pixel près. La seule intégration où j'ai respecté des espaces verticaux au pixel près, c'est ici (cliquer sur le "by" dans l'en-tête), mais c'est à la limite de l'exercice de styles.

Dans tous les cas, lorsque je vise un rendu précis c'est dans les navigateurs modernes, IE8 compris, mais pas sur IE7 (moteur de rendu capricieux) ou IE6 (comme pour IE7 avec en plus de bons gros bugs velus).
Modifié par Florent V. (04 Oct 2010 - 14:00)

Salut,

À vouloir tout reproduire au pixel près, autant faire du Flash.

Ok, merci pour vos réponses. Ça me rassure un peu car c'est vraie que c'est casse tête de vouloir que ça soit "parfait" partout.

Tout dépend ensuite de l'exigence (et de l'intelligence) de ton client : par exemple en ce moment, j'ai un bon gros benêt administratif qui a fait du design by committee sa méthode de travail, et ça donne des directives stupides du genre : "on veut du pixel-perfect ET une flexibilité maximale des contenus".

Dans ces cas-là, la meilleure solution est encore de se loger une balle dans la nuque.
(ce que je m’apprête à faire...)

Hello,

STPo a écrit :
Dans ces cas-là, la meilleure solution est encore de se loger une balle dans la nuque.
(ce que je m’apprête à faire...)

Plutôt dans celle du client?

Plus sérieusement, si c'est pour avoir du pixel perfect, pas mieux que Victor Britto => Flash.
Ou une image map.

STPo a écrit :
Tout dépend ensuite de l'exigence (et de l'intelligence) de ton client : par exemple en ce moment, j'ai un bon gros benêt administratif qui a fait du design by committee sa méthode de travail, et ça donne des directives stupides du genre : "on veut du pixel-perfect ET une flexibilité maximale des contenus".

Dans ces cas-là, la meilleure solution est encore de se loger une balle dans la nuque.
(ce que je m’apprête à faire...)

Florian_R a écrit :
Hello,

Plutôt dans celle du client?

Cf. les propos d'Éric.

Florian_R a écrit :
Victor Britto

Avec un seul T.

Florian_R a écrit :
Ou une image map.

À la rigueur.
Modifié par Victor BRITO (06 Oct 2010 - 13:48)

Autant pour moi pour l'orthographe. Je précise quand même, l'image map, c'était juste pour le fun. Pas fou à ce point quand même.

Essayer de faire de l'intégration au pixel près c'est un coup à perdre du temps inutilement.

Il vaut mieux faire une intégration intelligente qui prennent en compte l'accessibilité, le référencement et la lisibilité plutôt que de se référer exactement au PSD.

Pierre

Même si le topic est résolu, si un jour vous souhaitez quand même faire du pixel perfet, ou ne serait-ce que pour contrôler, il y a un super bookmarklet (association de bookmark = favoris/signet/marquepage suivant les navigateurs et applet = script/application en gros) qui s'intitule Makiapp qui facilite grandement le travail, est cross browser et assez pratique.

http://www.makiapp.com

Le concept est relativement simple, sur le site, il y a un lien à glisser déposer dans votre barre de signets (le petit bandeau vert avec un (pseudo) sushi dessus ) ensuite vous vous rendez sur une page web (donc celle que vous voulez pixel-perfectiser) et vous cliquez sur votre bookmark fraichement créé. Le script bookmarké va vous rediriger vers une page représentant celle sur laquelle vous étiez avec en plus une petite interface. D'ici vous pouvez uploader le design à intégrer et celui-ci apparait en transparence par dessus la page. Ce qui permet de voir de façon vraiment flagrante les petits et les gros décalages, relativement pratique !

Je n'ai pas encore eût l'occasion de le tester en situation réelle seulement jouer un peu pour tester, mais c'est vrai que parfois on peut avoir le sentiment d'avoir fait la même chose alors qu'en fait on est assez loin du compte, et on s'en rend vraiment compte quand la page et le design sont superposés !

(Je n'ai aucune part de marché de Makiapp qui est une application super carrément gratuite )


Sinon en soi, je pense que le pixel perfect est inutile, on l'a éxpliqué déjà plus haut, celà dit, considérer ça comme une perte de temps, c'est relatif... Théoriquement on est payé pour le boulo qu'on fait, si ça fait parti du boulot de faire du pixel perfect, alors on est payé pour, et dans ce cas je vois pas ce que ça change d'être payé à faire du CSS pour intégrer le design ou du CSS pour corriger des divergences de quelques pixels pour homogéniser.
Modifié par HammHetfield (09 Oct 2010 - 22:32)

Mhhh pour moi ça ressemble méchamment au plugin pixel perfect, ce makiapp.

Je connais pas ce pluggin mais là il n'y a rien à installer, et ça marche sur tous les navigateurs, je sais pas si c'est le cas de picel perfect aussi, mais c'est le résultat qui compte de toute façon

Maki app : ce n'est pas un bookmarklet qui prend une capture de ce qu'on voit dans le navigateur mais un bookmarklet qui fait appel aux services de leur serveur, probablement un moteur de rendu Webkit, non ?

EDIT : ah non, j'avais rien compris. On a notre page dans IE/Fx/Op/Saf/Chr et une barre d'outil permettant de superposer n'importe quel PNG fait par nous avec des options (transparence, déplacement de l'image, ...). Comme Pixel Perfect mais en communiquant à Maki App l'adresse de nos tests (inconvénient: la confidentialité donc) mais dans n'importe quel navigateur (avantage: ça fonctionne avec IE)
Modifié par Felipe (10 Oct 2010 - 14:50)

Ça m'est déjà arrivé de coller ma maquette en fond dans le body et de faire le code par dessus. Sans faire du pixel parfait, c'est tout de même assez pratique.

bzh a écrit :
Ça m'est déjà arrivé de coller ma maquette en fond dans le body et de faire le code par dessus. Sans faire du pixel parfait, c'est tout de même assez pratique.

idem , pour verifier et tester le comportement des grandes zones de la pages (divs + bordures) avec la position de certains elements graphique a cheval , devant etre raccord d'une zone a l'autre.