Chers clients, je comprends votre obstination à ce que votre site ressemble le plus possible à la maquette que nous vous avons présentée. Je dis cela sans aucune moquerie ni méchanceté.

J’imagine que vous croyez que le développeur est un fainéant, que le chef de projet n’a pas vérifié ou que nous négligeons d’une manière ou d’une autre votre site. Hé bien, laissez-moi vous prouver le contraire. Et pour ce faire, je vais prendre mon propre site d’agence, celui donc de Prezenz qui a été refondu l’année dernière, histoire de ne rien vous cacher.

Je vous vois mal me dire qu’on néglige notre propre site d’agence, surtout lors d’une refonte. Nous avons fait exactement comme pour vous :

• Wireframes ;
• Maquettes ;
• Système de gestion de contenu ;
• Etc.

Comme nous ne sommes pas trop mauvais, nous avons essayé de tout anticiper : les différents formats (tablette portrait, paysage, grand écran, petit écran, etc.), comment le contenu allait s’afficher, etc.

Et pourtant, je peux vous assurer que je n’ai pas fait exactement ce qui a été demandé, et sans pour autant avoir fait d’erreur ou de caprice de développeur front cabochard ! Au hasard :

• J’ai modifié légèrement certains breakpoints (même parmi les principaux) qui se déclenchent plus tôt ou plus tard quand on redimensionne ;
• Le menu ne s’affiche pas du tout comme demandé sur tablette en mode portrait ;
• Certaines coordonnées sont volontairement différentes ;
• Etc.

Vous voyez, même pour nous, nous avons des différences entre la maquette et le site final ! On ne vous mentait pas, cela nous arrive aussi ! :)

Tout simplement, il y a certains points absolument impossibles à anticiper, petit bestiaire non exhaustif :

• En faisant le gabarit de base, j’ai trouvé une meilleure solution que celle de la maquette (le cas du menu sur tablette cité plus haut, j’ai réussi à l’adapter sans ce saut à la ligne) ;
• Le contenu « réel » dicte ses contraintes : par exemple, le menu de droite a un texte un peu plus long que prévu, ce qui m’a forcé à déclencher un breakpoint plus tôt pour respecter le mieux possible la maquette ;
• Tout simplement certaines choses ne fonctionnent pas : le menu à 6 entrées (qui se met sans problème sur 3 et 2 colonnes) n’en a que 5 dans certains cas… et 5, c’est difficilement divisible par 3 ou 2 pour faire des colonnes (les demi-colonnes, ce n’est pas possible, désolé) ;
• Il m’est aussi arrivé d’avoir à pousser/adapter certaines dimensions pour certains contenus, car cela ne fonctionne pas bien en responsive (contenus trop entassés, etc.). Idem si des contenus viennent du système de gestion de contenus, si un navigateur n’en fait qu’à sa tête, etc.

Et quand on y réfléchit… qu’est-ce que vous pouvez en avoir à faire si un breakpoint s’effectue à 800 pixels au lieu de 770 ? Ce qui est important, c’est que le site soit toujours le plus agréable pour ses utilisateurs, non ?
Et quel est le problème si les longueurs varient très légèrement, tant que la grille est respectée ?

Dites-vous bien que concevoir un site non trivial en responsive, c’est un jeu d’équilibriste, pas une science exacte. Il y a une citation que j’aime bien qui résume le tout :

Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows. — Tim Brown

Traduction expresse : concevoir pour le Web est comme visualiser un tesseract (un cube à 4 dimensions), on construit une expérience en manipulant ses ombres (nous ne pouvons voir que 3 dimensions).

Rassurez-vous, avec l’expérience, ces soucis s’anticipent de mieux en mieux, et on évite les grosses impasses ! Mais globalement, c’est proprement impossible de faire une maquette parfaite, il y a toujours un impondérable.

Si je ne peux vous donner qu’un seul conseil, lâchez prise sur ce genre de détails. Si le développeur front a fait ainsi, vous pouvez demander, mais il aura sûrement une excellente raison d’avoir fait légèrement différent. D’expérience, les sites qui fonctionnent le mieux sont ceux où l’on a laissé le développeur front faire ce qui était meilleur pour le site, pas pour satisfaire une maquette.

Pour conclure : Non, ce n’est pas grave qu’il y ait quelques variations entre la maquette et le site, c’est même normal et plutôt un bon signe : l’équipe qui s’en occupe n’est pas bornée et s’adapte à la réalité du projet.