Payant ne rime pas toujours avec qualité - La preuve !

Tout ce qui touche à l'art numérique : échange de liens vers vos sites favoris de création numérique, projets créatifs…

Modérateur : Ze Techos

Avatar de l’utilisateur
Ishimaru Chiaki
Pro de la Gimp-Attitude
Messages : 730
Inscription : lun. déc. 24, 2007 6:10 am
Localisation : Baie-Comeau, Québec, Canada
Contact :

Payant ne rime pas toujours avec qualité - La preuve !

Message par Ishimaru Chiaki » mer. sept. 16, 2009 7:32 am

Tout récemment, j'étais tombée sur un sujet, sur le site du zéro, où un homme était venu demander de l'aide pour refaire le site qu'il avait fait pour un proche qui tient une entreprise de reproductin sur toile déco, car le site actuel, créé avec Web Creator Pro, un éditeur HTMl payant, ne répondait pas du tout aux objectifs visés qui étaient de faire un site simple, efficace et rapide. En effet, il s'est rendu compte, par les clients, que le site était lourd à charger et que le code était bordélique, comme c'était le cas de tous les autres sites que j'ai vus et qui étaient générés avec ce logiciel.

Cela m'a donc inspiré cet article qui, en faisant l'analyse des pages du site en question, montre combien il vaut parfois mieux garder ses sous et se tourner vers les alternatives libres (KompoZer), les CMS ou le codage à la main.

Enjoy !

(note : désolée pour l'emplacement des images. Vu la taille des captures (1280*1024), je n'étais pas trop sûre où héberger mise à part Photobucket)

--------------------------
Aujourd'hui, je viens vous parler d'un fait réel dont j'ai été témoin en parcourant les sujets sur le Site du Zéro, et qui prouve combien la règle du "payant = qualité" n'a aucun sens dans le monde logiciel.

Ce cas est celui d'un homme, qui a acheté le logiciel "Web Creator pro" pour faire le site-vitrine pour un proche qui fait de la reproduction sur toile déco. Mais bien vite, il s'est rendu compte, par les retours de sa clientèle, que le code généré est bordélique et lourd, bourré de scripts, avec du texte converti en images et tout ça, pour une page lourde à charger, ce qui ne remplissait pas du tout l'objectif d'un site simple, efficace et rapide. Vous pouvez d'ailleurs lire son commentaire sur ce lien

Même si le monsieur a retiré le lien de son post, j'ai pu finalement récupérer l'adresse du site grâce au cache de Google après avoir lancé la recherche avec le titre complet du sujet.

Voici donc l'adresse du site Note : Le site a été refait depuis)

Ce que vous voyez en premier n'est que l'intro. Allez plus loin et vous verrez combien ça se gâte vite !

Mais puisque le site sera bientôt refait par quelqu'un qui refera le site avec du code valide, j'ai pris des captures et récupéré les codes HTML pour les mettre dans des fichiers .txt afin de pouvoir continuer à vous montrer les arguments pour éviter Web Creator Pro. Je prends aussi à l'avance le poids de chacune des pages examinées, pendant que la version actuelle du site est présente.

D'abord, on commence par la page d'accueil, sur laquelle on arrive après avoir passé l'intro

Mais avant de continuer, je vais vous montrer deux captures pour vous montrer l'absurdité du code généré par Web Creator Pro.

La page, avec Javascript désactivé : Lien
La même page, avec Javascript activé : Lien

Première constatation : Ça requiert que Javascript soit activé pour que la page se centre ! O_O
Pourquoi donc utiliser du Javascript pour centrer une page, alors qu'on peut le faire avec margin:auto; en CSS et qu'il existe des hacks CSS pour les versions de navigateurs ne reconnaissant pas la propriété ? C'est des kilo-octets pour rien, en plus d'être à l'encontre des règles d'accessibilité qui stipulent qu'une page doit être compatible avec le plus de configurations possibles, ce qui inclut le fait de désactiver Javascript ou non !

Maintenant, préparez vos Gravol, car on va maintenant regarder le code !
Voici le .txt du code de la page d'accueil : Voir le code

Imbuvable, n'est-ce pas ? On peut déjà faire les constatations suivantes :
  • Le code est bourré de Javascripts
  • Il n'y a aucune feuille CSS externe, tout est imbriqué à même les éléments HTML avec l'attribut style, en plus des balises de mise en forme !
  • Il n'y a quasiment pas de balises sémantiques ! En débranchant le CSS, on remarque encore plus le bordel, en voyant la page arrangée dans un ordre complètement illogique, ainsi que la quantité inutile d'images, en particulier pour le fond de page ! D'ailleurs, je viens de prendre deux captures pour vous le montrer : capture partie 1 - capture partie 2
  • Aucun attribut alt dans les images, pour les textes de remplacement, pour ceux qui ne peuvent voir les images, dont les non-voyants !
Et avec un tel code généré, la page d'accueil fait plus de 700 Kilo-octets, ce qui est extrêmement lourd pour une simple page d'accueil ! La même page, codée selon les normes du W3C (feuille externe, pas de javascript, peu d'images), aurait pesé plus de 7 fois moins ! Pour un hébergement ayant une limite de bande passante, ça fait une énorme différence, car si la page d'accueil, dans son état actuel était visitée 1000 fois, la bande passante utilisée serait aussi grosse que la capacité d'un CD et aurait donc approché le giga-octet ! La même page, aux normes avec son petit 100Ko, n'aurait, en 1000 visite, généré que 100 Mo, soit 600 Mo de moins qu'avec la page actuelle !

Maintenant, passons à l'analyse de la page suivante : la page de présentation.

Comme avec la page d'accueil, je vous montre la capture avec le style activé

Sur la capture, le texte paraît être du texte brut, mais attention ! Ce que vous allez voir, dans la capture suivante va troubler tout bon webmaster respectueux des standards : Partie 2 de la page, sans style

Le bloc avec le texte que vous avez donc vu est une image ! Et le texte réel est caché !

Et je ne ferai pas de surprise en montrant le code, tout aussi bordélique et lourd : Voir le code

Et je ne vous ferai pas de surprise non plus sur le poids par rapport à l'optimisation possible : 383 Ko ! Aux normes, elle aurait pu faire moins de 80 Ko, voire même moins de 50 Ko !

La page de contact est sensiblement pareille à la page de présentation (texte-image inutile), donc je passe à la dernière page à analyser, qui contient un formulaire : la page pour les clients, dont voici sans tarder la capture d'écran

Première constatation : On ne voit aucun label, ces étiquettes que l'on met avant chaque champ de formulaire et qui, par souci d'accessibilité, doit être lié à son champ ! Les "étiquettes" sont écrites à même les champs de formulaire !

Et maintenant, on débranche le CSS : Page client sans CSS

Vous pouvez constater, encore une fois, l'incohérence de la structure de la page générée : le champ multiligne se trouve après le bouton "Envoyer" et en plus, le texte qui s'affiche avant le formulaire avec le CSS activé, se trouve placé après le formulaire une fois le style désactivé !

Vous pouvez d'ailleurs constater l'absence d'éléments label et l'incohérence de la structure en voyant le code de la page

Et on remarque alors que le bouton "Envoyer" est inutilisable si Javascript est désactivé !

Et on finit avec, encore une fois, l'analyse du poids de la page qui nous donne 223 Ko cette fois-ci et qui, encore une fois, aurait pu être largement optimisé en respectant les normes, ce qui fait que la page aurait pu faire facilement moins de 50 Ko !

Conclusion

À partir des trois pages analysées, j'ai pu vous montrer combien un logiciel payant n'est pas nécessairement meilleur que les alternatives libres comme KompoZer qui respectent mieux les standards du Web. Et croyez-moi, ce n'est pas le premier site "WeCreator-made" que j'ai vu. Les autres sites que j'ai vus et qui ont été générés avec le même logiciel, soit le site-vitrine de Help-On-Line.org (qui n'existe plus), ainsi que le site de la v1 de Host-on-line.org (qui n'existe plus non plus, et qui appartenait à Help-on-line.org), et le code de ces deux sites était aussi horrible. De plus, j'ai même vu, via ce sujet, un site généré avec ce logiciel, dont les javascripts ne fonctionnaient même pas sous les autres navigateurs mise à part Internet Explorer et Netscape Communicator ! Oui, vous avez bien lu, NETSCAPE COMMUNICATOR ! Un vieux navigateur qui date d'aussi loin que mes premières années sur le Web, soit il y a près de 10 ans !

Ma recommandation

Que ce soit pour un petit site persos ou pour un gros site d'envergure, ne jetez pas vos euros ou dollars par la fenêtre et, autant que possible, tournez-vous vers ces alternatives qui ne vous coûteront pas un sou, mais qui auront un résultat bien plus satisfaisant :
  • Écrire votre site de A à Z. De cette façon, votre code sera éditable à volonté, et vous pourrez y intégrer du PHP par la suite, sans problème. Vous pourrez apprendre les bases sur le Site du Zéro
  • Utiliser un système de gestion de contenu : Les choix de scripts libres ou freeware (gratuit et non-libre) ne manquent pas, que ce soit Joomla!, XOOPS, SPIP, Drupal, GuppY ou CMS Made Simple pour les sites complets, phpBB, PunBB, FluxBB, Connectix Boards, MyBB, SMF, FSB ou XMB pour les forums, ou bien WordPress ou Dotclear pour les blogs, pour vous permettre de monter votre projet rapidement si vous n'avez pas le temps de le coder vous-même. De plus, la plupart de ces scripts sont respectueux des standards du Web et pas trop lourds pour la bande passante (mais après, ça dépend du template).
  • Ou à la limite, utiliser un éditeur HTML libre comme KompoZer qui s'appuie sur le moteur de rendu Gecko (le même que celui utilisé par Mozilla Firefox) qui est, déjà au départ, respectueux des standards. Mais cette option est plus limitée que les deux premières et je ne vous conseille pas de vous reposer uniquement sur l'aspect visuel.
Alors, bon webmastering sur le chemin de la lumière, avec l'esprit serein à l'idée d'avoir gardé vos sous pour acheter autre chose... comme par exemple un cadeau pour l'être aimé !

---------------------------
Cet article a aussi été publié sur mon blog, vous pouvez donc le retrouver à cette adresse : http://zone-libre.overblogger.com/carnet-de-bord-b1.htm
Dernière modification par Ishimaru Chiaki le mer. mai 04, 2011 7:22 pm, modifié 1 fois.
Compétences graphiques : Éléments de design
Système d'exploitation : Lubuntu 14.04 LTS
Logiciels : GIMP 2.8, Inkscape 0.x
Mon cours Gimp, bientôt sur http://zestedesavoir.com !

Avatar de l’utilisateur
neige
Pixelium magister
Messages : 292
Inscription : mer. mai 30, 2007 1:42 pm
Localisation : La Rochelle (17)
Contact :

Message par neige » mer. sept. 16, 2009 11:24 am

Joli exemple ! ;) heu... je veux surtout dire jolie analyse !

Lorsque l'on y connaît rien, il est vrai qu'il est difficile de choisir comment réaliser son site.

Lorsqu'il s'agit d'un site perso et que l'on a le temps devant soi, prendre la peine d'apprendre HTML CSS et les quelques bases de PHP nécessaire voire SQL, ça va. Il suffit d'être motivé. Mais c'est quand même long, et faut pas se décourager quand on parvient pas à réaliser un truc qu'a l'air tout bête (pour éviter de me décourager, j'ai laissé mes deux blèmes en stand bye jusqu'à la fin de production de mes pages :l0l: ).

Par contre pour un site pro, et surtout si c'est pressé, l'étape de l'initiation au codage devient problématique. A moins de recourir à un professionnel (faut le budget bien sûr), reste le passage par un logiciel dédié. Et là, pour un béotien, c'est quand même pas coton de choisir. A moins de se renseigner au préalable...
- Progresse lentement mais sûrement -

Répondre