Pourquoi je pense que le ‘pixel perfect’ est mort,
et pourquoi je pense qu’il n’a en fait jamais existé.
« Pourquoi le rendu n’est pas pareil partout ? » est une question que vous avez certainement du entendre maintes et maintes fois en tant qu’intégrateur ou en tant que développeur front-end.
[row]
[one_third]
[/one_third]
[two_third]
J’ai été la première à me targuer d’être une adepte du ‘pixel perfect’. J’étais absolument perfectionniste sur ce point, et j’ai trop souvent perdu un temps précieux pour ‘débugger’ un décalage de 1 pixel sur une div.
Ma perception de la chose était cela-dit un peu plus nuancée que la définition exacte.
Je n’ai jamais été intégriste au point d’utiliser une image de fond pour avoir la même ombre sur tous les navigateurs (certains l’ont fait, surtout sur les vieux IE < 7 !), j’avais malgré tout tord.
[/two_third]
[/row]
L’idée qu’un site doit être au pixel près identique sur tous les navigateurs est ancienne, et ça a longtemps été un eldorado ardemment poursuivi. ‘Pixel perfect’ est une expression qui est donc couramment employée dans le domaine du web, et vous la verrez un peu partout. Vous la connaissez probablement très bien, j’en suis sûre. Cette idée est par ailleurs responsable de l’un des débats les plus vieux et les plus féroces du web.
Je pense qu’aujourd’hui, dans nos métiers, on ne devrait plus entendre cette notion dans la bouche de personne. Parce que le ‘Pixel Perfect’ au sens parfaitement identique à la créa quel que soit le navigateur ou l’écran utilisé est impossible. Tout simplement.
[separator type=”” size=”” icon=”star”]
Mais pourquoi tant de haine ?
Non, pas de haine… de la modération uniquement. J’ai eu l’occasion d’en parler un peu avec Stéphane Deschamps (Clever Age), qui m’avait à l’époque houspillée pour oser parler de ‘pixel perfect’. Il avait raison. J’ai depuis revu ma conception de la chose dans le bon sens (je pense).
En effet, prenons par exemple la propriété ‘box-shadow’. Cette propriété ne donne pas du tout le même rendu d’un navigateur à l’autre. Alors à moins de tomber dans les très très trèèès mauvaises pratiques, et d’utiliser, comme je l’ai dit plus haut, une image de fond pour reproduire exactement la même ombre que sur la maquette, l’ombre sera différente en fonction du navigateur…
[separator type=”” size=”” icon=”star”]
Le pixel perfect, c’est quoi exactement ?
Le pixel perfect c’est l’obsession de la perfection inatteignable.
Imaginez quelqu’un qui vérifie avec une règle à pixel collée à son écran pour voir si tout est bien pareil. Je l’ai fais. Je le fais encore parfois… je prends une feuille de papier et je vérifie si tout est bien aligné. Ou alors j’utilise une autre fenêtre ouverte sur mon ordinateur et je l’utilise comme règle. J’avais aussi l’habitude de mettre une coche sur ma feuille de papier pour voir si deux éléments sur mon écran tombaient bien au même endroit, avec le même espacement que sur la maquette… oui oui. J’ai fais ça.
En clair, le ‘pixel perfect’ c’est l’idée qu’un site doit être exactement pareil partout, au pixel près.
[separator type=”” size=”” icon=”star”]
Que dis-tu jeune Padawan ?
Il faut savoir que les navigateurs web (Firefox, Chrome, Internet Explorer, etc…) ont chacun leur propre moteur de rendu, et ce dernier n’interprète pas toujours le “code” de la même manière. Le rendu d’un site pouvant donc varier d’un navigateur à l’autre. Et ce, depuis leur création. Le rendu n’a jamais pu être exactement le même d’un navigateur à l’autre.
On pourrait rêver qu’une convention soit mise en place, et que tous les navigateurs se mettent à afficher exactement de la même manière une box-shadow ou une font. Même s’il était possible d’atteindre cet état de fait, ‘le pixel perfect’ resterait toujours impossible car les écrans d’aujourd’hui reposent sur des technologies respectives quelque peu différentes :
En plus de ces difficultés “logicielles” il faut tenir compte des dimensions physiques des terminaux :
Les résolutions, les réglages de l’utilisateur viennent ajouter une “surcouche” de différence, et il ne faut pas oublier le système d’exploitation de l’utilisateur. Le rendu d’un site ne dépend pas uniquement du navigateur. Il repose également sur le système d’exploitation. Un bouton ou un champ de formulaire qui ne reçoit aucun style spécifique (CSS) s’affichera différemment selon le système d’exploitation de l’internaute. Une “boite” de selection de type select dispose d’un rendu optimisé pour l’OS Apple lorsqu’elle est affichée dans Safari (c’est-à-dire dont le look’n feel rappelle les conventions Apple). Windows proposera un rendu autour du Flat Design. Google pousse en ce moment son approche “Material Design” etc.
Si on ouvre les yeux à la réalité, on se rend compte que le ‘pixel perfect’ est impossible et n’a en réalité jamais existé.
De plus, si on admet qu’il faut mettre en place une convention, sur quoi devra-t-elle se baser ? Photoshop ? Il est vrai que c’est un logiciel de conception largement utilisé, mais il reste très cher, et certains designer web ne peuvent pas se le payer et utilisent autre chose. Pourquoi devrait-t-on baser cette éventuelle convention sur Photoshop ? Cette convention est une utopie, et elle ne sera probablement jamais mise en place.
Pour avoir un projet ‘pixel perfect’ pour de vrai, il faudrait une uniformité des navigateurs, des systèmes d’exploitation, des devices, et forcer les utilisateurs à avoir tous les mêmes paramètres. La dictature quoi.
[separator type=”” size=”” icon=”star”]
Mais alors on fait quoi ? C’est la débandade !
Il n’est pas pour autant question de ne plus respecter les maquettes de nos designers. Mais il faut penser les pixels différemment. Depuis quelques temps, j’aime à utiliser la notion de ‘beautiful pixel’, ou encore de ‘moving pixel’ ou ‘fluid pixel’. Je trouve que cela correspond beaucoup mieux au marché actuel. Il est tout à fait possible, à mon avis, de respecter l’intégrité d’une maquette tout en rendant le site adaptable, fluide, responsive. Non il ne s’affichera pas pareil partout. Mais il s’adaptera joliment.
Je pense que tout le problème réside dans l’idée qu’on se fait du « pixel perfect ». Qu’est ce qu’il y a là derrière en réalité ? Tout simplement l’idée qu’on va respecter la maquette du designer.
C’est une très bonne chose, car il en va de l’intégrité du projet sur lequel on travaille (et de la bonne entente de l’équipe !). Mais c’est une chose qu’il va falloir apprendre à faire sans rigidité, et le designer doit pouvoir accepter ce fait.
[separator type=”” size=”” icon=”star”]
Accepter l’ère du ‘responsive’ à bras ouverts
Nous sommes en 2015, et nous sommes dans l’ère du responsive depuis quelques années déjà. Il faut arrêter de vouloir avoir le même rendu partout au pixel près : le web est fluide en hauteur et en largeur, les devices sont de plus en plus diversifiés. S’adapter à un média fluide est une réalité, et c’est une contrainte à laquelle il faut s’habituer (il est vraiment temps !), et c’est valable autant pour les designer que pour les développeurs.
Vouloir avoir exactement la même ombre est une utopie, est puis c’est franchement inutile.
L’utilisateur lui ne le remarquera même pas. Il nous faut être plus pragmatiques et penser à cet utilisateur avant tout. Il faut savoir rester humble, et toujours mettre l’utilisateur d’abord. Il sera au final bien plus important que cette ombre si parfaite sur la maquette Photoshop et plus si parfaite sur Internet Explorer (sans vouloir attaquer toujours le même…)
Même à l’époque où le responsive n’existait pas, à bien y regarder il était impossible d’avoir exactement le même rendu au pixel près d’un navigateur à l’autre. Les polices n’ont jamais été interprétées de la même façon, et le rendu a toujours été différent. Il y a bien eu cette époque honnie durant laquelle des développeurs se sont vu mettre des contenus texte sous forme d’image, mais j’ose espérer que cette époque est bel et bien révolue !!! C’était vraiment une très très mauvaise pratique, et tout ça au nom du respect ultime de la maquette. Le DA doit être capable d’accepter que son travail ne soit pas tout à fait exactement pareil une fois intégré sur les navigateurs, et le DEV doit pouvoir être plus zen vis-à-vis de tout ça et ne pas entrer dans une phase de chronophagie.
[separator type=”” size=”” icon=”star”]
‘Beautiful pixel’
Il y a cette idée nouvelle de ‘zen web’ qui véhicule la notion qu’il faut devenir plus souple, plus zen, et laisser place à plus de laisser-aller. Un laisser-aller qui sera salvateur pour tout le monde.
Attention, on évitera bien-sûr de tomber dans le travers de faire les choses sans se soucier du rendu final… le web fluide est une notion qui demande beaucoup de travail, bien plus que la notion de ‘pixel perfect’ qu’on a voulu ériger en notion ultime toutes ces années. Construire un site ou une application responsive demande beaucoup de réflexion, depuis le DA jusqu’au DEV.
La notion de ‘pixel perfect’ est une notion que trop de gens, moi y compris, on tenté d’imposer, mais c’était une erreur.
Le pixel est à présent fluide, mouvant, et il doit savoir rester à sa place tout en étant capable de se déplacer ( vous avez pigé la gymnastique ? =) ). Comme une écaille sur une aile de papillon, parfaitement rangée à sa place, mais capable de bouger avec le papillon. Un ‘beautiful pixel’.
Emmanuelle GUYOT / UX-Scientist
SERVICE DESIGN : LES FONDAMENTAUX #Paris
SMILE Paris
163 quai du Docteur Dervaux 92600 Asnières-sur-Seine
TESTS UTILISATEURS # Belgique
UX-REPUBLIC Belgique
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
PILOTER ET MESURER L’UX # Paris
SMILE Paris
163 quai du Docteur Dervaux 92600 Asnières-sur-Seine
UI-DESIGN : LES FONDAMENTAUX # Paris
SMILE Paris
163 quai du Docteur Dervaux 92600 Asnières-sur-Seine
DESIGN SPRINT : INITIATION & FACILITATION # Distanciel
Distanciel
Depuis chez vous !
SCRUM PRODUCT OWNER – CERTIFICATION SCRUM INSTITUTE # Paris
SMILE Paris
163 quai du Docteur Dervaux 92600 Asnières-sur-Seine
DESIGN THINKING : CRÉER DE L’INNOVATION # Belgique
UX-REPUBLIC Belgique
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
STORYTELLING : L’ART DE CONVAINCRE # Paris
SMILE Paris
163 quai du Docteur Dervaux 92600 Asnières-sur-Seine
UX-DESIGN : LES FONDAMENTAUX # Belgique
UX-REPUBLIC Belgique
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre