core-techs2.png
Ë
Par Core-Techs • mercredi 15 juin 2011

The Pixel Perfect - Troll made in Core-Techs

Pour les intégrateurs et les développeurs,  c'est un troll
récurrent. Extraits choisis d'une discussion entre deux
développeurs de Core-Techs :

Ludovic Bernard

Mon avis ?

L'inté au pixel, avec un affichage le plus proche possible sur 3
navigateurs de référence (arbitrairement Internet Explorer, Chrome
et Firefox), c'est ce qui fait la différence entre nous,
professionnels du web, et le webmaster du dimanche
qui traîne sur clubic (et qui va casser du sucre sur
Microsoft quand le rendu "de sa trop belle inté" ne passe pas sur
Internet Explorer).

Personnellement je crois que même s'ils subsistera encore
longtemps des différences de rendu entre navigateurs (ne serait-ce
que pour des raisons commerciales) apprendre à les dompter, les
réduire, les minimiser fait partie de notre boulot.

La plupart des gens qui râlent contre tel ou tel navigateurs
sont les mêmes qui font des erreurs grossières d'intégration.

Avoir certains navigateurs qui corrigent tout seul les balises
manquantes ou mal imbriquées donne l'impression que les navigateurs
qui ne le font pas interprètent mal l'html alors que le problème se
situe entre la chaise et le clavier. C'est sur la personne qui a
écrit ce code html qu'il faudrait râler.

Les designs web actuels sont très complexes. Ils utilisent tous
les effets possibles en même temps ( ombre, reflets, dégradés,
coins arrondis etc. ).

C'est probablement une façon de pas rester enfermé dans le web des
années 90 qui était assez plat et peu attirant ; le contre-coup est
peut être un excès de zèle... ^^

Le web pourrait gagner si les maquettes étaient conçues sur un
objectif plus global avec l'ergonomie, le design et l'apparence mis
au même plan.

En exagérant un peu le trait, je dirais que les seules questions
d'ergonomie qu'on se pose c'est : "où on va bien pouvoir mettre le
bouton facebook like ?"

( Préoccupation très à la mode en ce moment quelque soit
l'entreprise )

En même temps la réponse n'est pas simple.

On peut pas dire : ok on va tout remettre à plat, le prochain
site web on va faire un prototype top avant de lancer les
graphistes.

La plupart du temps les deux sont liés et puis surtout les
graphistes tiennent compte des contraintes liés aux cms qu'on
utilise. Une maquette pour un site eZ ou Magento n'aura pas la même
tête. Pas uniquement parce qu'eZPublish est un cms généraliste et
Magento une plateforme de commerce. Surtout parceque techniquement
leur système de templates sont très différents et qu'il est
impossible de prendre une maquette d'un site eZ et la faire tourner
sous Magento.

Alors qu'est-ce qu'on fait ? On continue à faire notre travail
au mieux, avec les défauts que ça comporte, et on trouve des
solutions au quotidien pour régler les problèmes récurrents ? Après
tout c'est pas mal comme plan ça...

Non ?

Guillem Canal :

Qu'est ce que le "pixel perfect"?

C'est l'intégration au pixel près d'une maquette fournie pour le
graphiste.

C'est la garantie d'un rendu uniforme quel que soit le navigateur
utilisé par l'utilisateur.

Un site web peut être défini en trois points distincts :

  • Le contenu
  • Le design
  • Les performances

Quand on considère les analyses d'audiences d'un site, on
s'attache à analyser le taux de rebond.

Cet indicateur représente le pourcentage d'internautes qui n'ont
pas souhaité allé plus loin que la page d'accueil (plus
généralement, que l'une des pages d'un site web).

Quand on obtient un fort taux de rebond, il convient de se poser
la question suivante : Pourquoi les internautes ne reste pas sur le
site?

Es-ce imputable au contenu? Au design? Au performance?

Une étude réalisée par "http://www.webcopyplus.com/">webcopyplus (et rapportée par
"http://webdesignerwall.com/general/users-place-more-weight-on-design">
WebDesignerWall) mondre que ces trois aspects ont leur
importance, et que l'internaute moyen donne de plus en plus
d'importance à la présentation du contenu au fil des ans à mesure
que le web se complexifie. Mais si l'on considère les résultats de
ce sondage, on remarque que la première préoccupation de
l'internaute concerne les performances (51%), suivi du la
pertinence du contenu (25%) puis du design (24%).

Or, avec l'approche "Pixel Perfect", on impacte de manière non
négligeable sur les performances, en chargeant dans la page, toutes
les ressources nécessaires à un rendu uniforme pour tous les
navigateurs du marché.

Quels sont les conditions nécessaires à la mise en place du
"pixel perfect"?


L'abandon de certains standards ne garantissant pas un rendu
uniforme (toutes plateformes, tous navigateurs).

Une utilisation massive d'images, de javascript ou de flash pour
styliser des éléments html (bouton, blocs, texte, etc...).

Une feuille de style (voir certaines pour [un type|une version] de
navigateur) "verbeuse" qui garantie la taille des taille des blocs,
la taille des marges, l'interlignage, la graisse des polices [...]
quel que soit le contexte avec une précision redoutable.

Quels sont les implications du "pixel
perfect"?


Une maquettes et une intégration à l'identique.

Un rendu uniforme.

Des pages très lourdes à charger.

Une complexité graphique difficile à aborder pour les développeurs
avec de nombreux cas particuliers.

Une flexibilité moindre quand il s'agit de faire évoluer un
contenu, de mettre en place de nouvelles pages.

Des développeurs web qui se retrouvent à surcharger des feuilles de
style et des scripts pour garantir l'uniformité visuel de contenus
qui n'ont pas été maquettés et qui pourtant pourrait s'inscrire
dans l'une des page type déjà pensée par le graphiste, ce qui
génère bien souvent des écarts de rendu, voir des bugs d'affichages
sur certains navigateurs.

Alors faut-il avoir peur du Pixel Perfect?

Est-il vraiment judicieux de mettre en place ce principe quand on
adopte une politique d'industrialisation des développements et de
conception agile?

Les salariés, les collaborateurs peuvent-ils supporter la
charge et le coût qu'implique un tel procédé?

Comment justifier les retards de production auprès des clients sur
des considérations graphiques?

Je ne cherche pas à minorer l'importance de l'approche
esthétique d'un projet web,

l’esthétisme est un enjeu majeur, c'est la première chose que vois
l'utilisateur quand il charge le site.

Le web, contrairement au print (qui existe depuis plus
d'un demi-siècle), évolue de manière exponentiel et propose chaque
année, de nouveaux principes, de nouveaux concepts et de nouveaux
standards pour garantir l'expérience utilisateur,
l'accessibilité des contenus et l'ergonomie.

Mais alors, quels sont les alternatives?

Contrairement a ce que certains peuvent penser, le W3C n'est pas un
organisme qui cherche à normaliser le web mais plutôt à canaliser,
encadrer et standardisé l'innovation telle qu'elle est
conçue/perçue pour par les différents acteurs du web. La priorité
d'un tel organisme est de garantir un Internet pour
tous
.

Doit-on se scandaliser quand on constate qu'une ombre portée n'a
pas le même rendu sur Firefox et Safari? L'utilisateur va-t-il
chercher à savoir si votre design est en tout point similaire sur
tous les navigateurs? Va-t-il se rendre compte qu'un blocs html a
été normalisé en 450px de large avec une marge intérieure de
20pixels, un corps de texte de 12px de couleur gris foncé (#444444)
plutôt que width: 452px;  padding: 8px; font-size: 11px;
color: #4c4848? Je suis tenté de répondre non.

Les principes de dégradation élégante ou
d'amélioration progressive sont selon moi plus en
accord avec la philosophie d'Internet. Un medium qui profite à tous
et qui apporte une expérience enrichie à ceux qui ont fait le choix
de suivre sa marge.

Celui qui navigue avec Internet Explorer 6, par
exemple, ne s'attend pas à être émerveillé par l'esthétisme d'une
page web, il sait bien que son navigateur à 8ans d’existence
et qu'il ne profitera pas des dernières innovations en la matière.
Le seul impératif pour lui et d'avoir accès au contenu et ce
rapidement, sans qu'on lui impose de charger pléthore de
javascript pour qu'il puisse constater de ses yeux ébahies la
transparence d'une image ou que les blocs de texte existent
autrement qu'avec des bords carrés.

Faut-il encore connaitre le profil de ceux qui naviguent sur le
site, et estimer le niveau de compréhension du client concernant
les tenants et aboutissants d'un projet web, pour au final lui
proposer les solutions adaptés, qui cadrent le plus avec ses
ambitions.

Conclusion personnelle

Le "pixel perfect" apparaît comment une solution contre
productive qui ne sert les intérêts de personne.

Le matériel livré par l'intégrateur comblera surement les
espérances du client et du graphiste à un instant t,

mais handicapera significativement le travail des développeurs et
l'expérience de l'utilisateur final.