Du PSD au HTML : intégration au pixel près

frodum a écrit :
Comment faites-vous concrètement pour faire du pixel perfect ?

Honnêtement, vu le nombre de versions de navigateur à prendre en charge, je ne me casse pas la tête à intégrer au pixel près : si plusieurs blocs de même nature apparaissent sur les maquettes avec des différences dans les marges ou le calage des éléments, j'harmonise pour éviter de multiplier les styles. Pour moi, l'essentiel est de respecter l'esprit de la maquette (ce qui n'empêche pas de tendre à un résultat qui en soit très très proche) tout en tâchant de la rendre suffisamment fluide en cas d'accumulation de contenus et de produire une intégration intelligente tenant compte d'un certain nombre de bonnes pratiques (balisage sémantique, accessibilité, référencement, etc.).

Et si j'ai affaire à une agence exigeant le pixel perfect, je préférerai éviter de travailler pour cette dernière.

N'oublions pas que le Web est un médium qui (même si l'on peut imprimer des pages Web) n'est pas paginé et n'a pas les mêmes types de contraintes que le print ou la PAO.

Et je ne suis pas le seul à penser ainsi : je connais même un intégrateur qui, il y a quelques années, a démissionné d'une agence qui employait un chef de projet qui passait ses journées à effectuer des captures d'écran des gabarits HTML livrés et à les comparer avec les PSD.

frodum, là n'est pas le sujet de la discussion. Mais sinon, suffit juste de prendre tes petites mesures sur toshop. <IRONIE>Ou de faire du WYSIWYG.</IRONIE> *rire gras*
Modifié par Knozelfhoegtj (19 Dec 2012 - 11:24)

body:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: transparent url('ton-image-originale.png') no-repeat center top;

  opacity: 0.5;
  z-index: 9999;
  pointer-events: none;
}

Quand il faut vraiment du pixel perfect, je me fais comme un calque de check par dessus ma page pour vérifier que tout s'affiche au bon endroit. Plus précis que de mesurer (surtout quand on veut juste vérifier que tout va bien).

Non, on n'utilise pas de découpe dans Photoshop ou le mode WYSIWYG de Dreamweaver. Ces outils permettent d'obtenir un résultat rapidement, mais avec un certain nombre de défauts:
- Ça ne garantit pas une meilleure précision qu'une intégration «à la main» bien fichue (au contraire).
- Le code créé présente en général de gros problèmes d'accessibilité et de performances, il n'est pas sémantique et offre donc moins de prise aux moteurs de recherche.
- Le code créé n'est valable que pour un contenu donné (celui de la maquette), et gère en général très mal (ou pas du tout) l'adaptation à un contenu plus court, plus long, différent…

En gros si tu veux faire une plaquette en ligne de deux pages et que tu te fiches de la qualité technique, tu peux utiliser ces outils. Si tu veux faire du bon boulot ou si c'est pour un site dynamique (auquel cas pas le choix, il faut faire du bon boulot exploitable par un développeur web), ces outils sont à proscrire.
(Notons que Dreamweaver en mode code est un outil qui tient la route, comme tout éditeur de code de bonne facture.)

Pour le pixel perfect, comme dit prédédemment: c'est possible en horizontal, pas trop en vertical. Bien sûr là où un décalage de un ou deux voire trois pixels peut être admis, des décalages de 20 pixels ou des décalages systématiques de 4 ou 5 pixels sur les trois quarts des éléments dénotent juste un gros manque de rigueur.
À noter que si la taille du texte varie (adaptation automatique par le navigateur, changement par l'utilisateur…), c'est normal si tous les contenus se retrouvent décalés par rapport à la maquette. Tant que l'impression d'ensemble correspond à l'esprit de la maquette, et qu'on gère l'agrandissement du texte sans débordements dans tous les sens, tout va bien.

Pour peaufiner une intégration, au delà des simples compétences et du professionnalisme que ça demande, j'ai déjà utilisé l'astuce mentionnée par HammHetfield, c'est assez pratique.

Bonjour,

Personnellement j'ai jamais testé Dreamweaver,mais de nos jours pour récupérer les fx sur les psd il y a CSSHat.

Pour le découpage psd il peut y avoir des petites différences notamment le rendu des polices de caractères

Bye,