Après la présentation de ma société Créamotion, je vais commencer à vous présenter les différentes réalisations qui me sont demandées par nos chers clients. Pour cette première, je vous propose FatalPrice, un site de e-commerce traditionnel dont le but est de vendre des vêtements de marque à prix discount. Nous avons comme politique de créer les produits les meilleurs possibles, stables, accessibles et rapides. Alors pourquoi la qualité ne serait-elle pas au rendez-vous…?

Tout le problème réside dans la diversité des prestataires qui travaillent sur un seul et même projet… Dans notre cas, il nous a été demandé de créer le design, chose que j’ai réalisé en suivant à la lettre la politique de Créamotion. Par la suite, notre client a demandé à la société qui lui a fourni le script de e-commerce d’intégrer ce dernier dans le design, et là… les problèmes ont commencé!

Notre client, étonné du résultat, m’a fait part de sa déception en me faisant comparer les deux versions :

A première vu, aucune différence… Et pourtant à y regarder de plus prêt, on pourrait presque jouer au jeu des 7 différences! A gauche, ma version; à droite, la même après intégration (en force) du script d’e-commerce. Ces deux images sont des impressions d’écran du site depuis un navigateur (Mozilla Firefox 2.0.0.7 pour ne pas le nommer). Analysons le design d’origine et son successeur…

Le design d’origine

• Le client me contacte, il a besoin d’un design pour un site de e-commerce… Je fais un rapide benchmark des sites existants dans le domaine, très utile pour savoir ce qui est sympa, garder les bonnes idées et les améliorer
• Je décide de partir sur un design découpé en zones bien distinctes, à savoir un header qui comprend titre slogan et moteur de recherche, deux menus, une partie centrale pour le contenu et un footer qui reprend le menu principal
• Après une première ébauche, j’en fais part à notre client qui me demande quelques modifications. Je m’exécute alors et intègre un mannequin style dessin ainsi qu’un cintre, éléments caractéristiques des produits vendus, à savoir des vêtements. Je décide au passage de modifier la police du titre et en choisis une assez agressive en relation avec le mot “FATAL”
• Le client est conquis, je découpe alors le design en prenant soin de n’utiliser aucun tableau, d’externaliser complètement les styles et respecter les recommandations W3C, valider le XHTML transitional 1.0 ainsi que le CSS
• Je m’assure également que le maximum d’informations se retrouve en texte pur et non dans des images… Cela concerne les informations dans le header, à savoir le slogan, les réductions, le paiement sécurisé et l’envoi du produit sous 48h mais également les titres des menus

Le design après intégration

• Le design après intégration est très légèrement différent de la version d’origine…
• Le plus choquant sur l’aspect graphique, les détails dans le header ainsi que le footer ont été complètement supprimé et les zones distinctes se sont transformées en un seul et unique bloc blanc
• Le moteur de recherche est passé à la trappe (peut-être que le script de e-commerce proposé ne dispose pas d’une telle fonctionnalité…) et l’image a été modifiée pour faire apparaître “http://www.fatalprice.com”; je n’en vois toujours pas l’intérêt
• Les images sont, d’un ordre général floues alors que les images d’origines ne le sont pas. Et puisqu’on est dans les images, les slogans, informations, et titres des menus se retrouvent enfermés dans des images. Impossible alors pour les moteurs de recherche de déceler les mots clés
• Indétectable sur l’image ci-dessus, les div on laissé place à une armée de tableaux (cela me rappelle les souvenirs de mes débuts mais bon tout de même…)
• Et enfin, le meilleur pour la fin, pas moins de 154 erreurs et 9 avertissement séparent notre nouveau code d’un code XHTML transitional 1.1

Bon il n’y a que 6 points… on ne peut donc pas jouer au jeu des 7 différences. Ceci dit ce sont 6 différences assez conséquentes sur la répercussion de la qualité du site, tant en terme de qualité visuelle que de qualité pour le référencement naturel. Je suis écoeuré de voir le travail baclé effectué sur mon design, mais qu’en dit le client lui-même?! Il est absolument outré et je le comprends bien… Quand on propose un service, on le fait bien! C’est du moins notre ligne directrice chez Créamotion et nos clients nous en sont reconnaissant.