Je prévoyais déjà faire cet article dès la journée où je rédigeais l’article qui précède celle-ci, mais je voulais laisser quelques jours passer avant de rédiger la critique. Ce n’est finalement qu’aujourd’hui que je peux le faire puisque j’ai eu un WE assez occupé où, entre deux sessions de lecture du tome 1 des Héritiers d’Enkidiev – la suite de la saga des Chevaliers d’Émeraude que l’auteure Anne Robillard a fini par accepter d’écrire à la demande générale des lecteurs – j’avais différentes activités comme notre feu de samedi soir, mon après-midi à Beauce Carnaval qui était en ville et le spectacle de baladi auquel j’assistais avec mes parents. J’étais si occupée que je n’ai même pas pu allumer mon PC de tout le WE.
Maintenant que ça s’est calmé et que Beauce Carnaval a repris la route pour aller égayer d’autres villes ailleurs au Québec avec ses manèges, ses jeux d’adresses et les peluches à gagner, me voilà de nouveau devant mon PC où je peux enfin écrire ma critique de design Web, ou « Webdesign review » comme pourrait le dire mon grand frère.
Le site qui sera analysé
En naviguant sur le forum Servhome, je constate qu’il y a un nouveau message dans la section « Logiciels libres ». Le sujet parle de Pixia, un gratuiciel de dessin pour Windows (mais qui peut tourner sous Linux avec Wine). L’url donnée dans le post menait vers le site francophone dédié au logiciel et je jette donc un coup d’oeil, surtout que le site était en .free.fr. Mais je constate vite que le site présente des problèmes d’ergonomie. Puisque je pensais depuis quelques temps à continuer à faire de temps en temps des critiques de designs Web, j’ai donc décidé de faire une critique sur ce site, cette fois en essayant de procéder par barèmes.
Adresse du site : http://pixia.free.fr
Le code
En regardant un tant soit peu le code-source, on remarque très rapidement qu’on a affaire à un codage très archaîque.
Les frames, ça fait mal au coco !
Dans l’accueil, on remarque tout de suite que les frames sont utilisés pour n’avoir qu’un fichier à éditer pour le menu. Or, ce moyen est ergonomiquement très mauvais. Si quelqu’un vient avec un navigateur texte type Lynx, je n’aurais pas une vue d’ensemble des trois frames, ce qui fait qu’une fois que j’entre dans le frame du corps, je ne peux plus en ressortir puisqu’il n’y a aucun lien de retour, alors qu’Accessiweb recommande d’en mettre un. Les non-voyants naviguant avec un lecteur d’écran auront exactement le même problème, puisqu’eux non plus n’auront pas une vue d’ensemble. Et lorsqu’il n’y a pas de lien permettant de retourner à l’accueil, on parle alors de page orpheline. Il ne faut pas oublier non plus que les moteurs de recherche sont « aveugles » et donc, se retrouvent avec le même problème de « non-vue d’ensemble », ce qui a pour résultat qu’un site utilisant des frames sera généralement très mal indexé.
De plus, si un visiteur qui sait à peine naviguer sur internet veut bookmarker une des pages du site ou transmettre le lien direct de la page, il lui sera difficile de le faire avec des frames. Comment le saura-t-il qu’il faut faire clic-droit > Ce cadre > Afficher ce cadre uniquement, pour arriver à ses fins ? Je soulève ce point sur la non-intuitivité des sites construits en frames, puisque je suis déjà passée par là, quand j’étais encore noob en informatique.
Pour ces différentes raisons, ce type de structuration des pages est fortement déconseillé : c’est à réserver aux démos de styles !
Les pages orphelines des tutoriaux
Si on regarde dans les tutoriaux, on constate que si on consulte un tuto en particulier, on tombe directement sur une page orpheline même si on n’a pas demandé à ouvrir dans un nouvel onglet ! On se retrouve alors avec juste le corps contenant le tuto et on n’a donc ni menu, ni lien de retour à l’accueil ! Et puisque ces pages s’ouvrent dans une nouvelle fenêtre ou dans un nouvel onglet sans nous avoir laissé le choix, on ne peut pas utiliser Précédent !
Des tableaux mur à mur…
Si on regarde maintenant à l’intérieur des frames, on remarque vite que c’est bourré de tableaux de mise en page, et que le CSS est à peine utilisé pour les polices des textes et pour le style des liens. Le reste de la présentation est géré par les tableaux et par les balises et atttributs dépréciés.
Cette manière de coder, non seulement alourdit le chargement des pages en obligeant le navigateur de tout lire à chaque fois, mais rend aussi la maintenance plus difficile et donc, c’est la cohérence des fichiers de corps qui devient difficile à garder.
Les solutions
Pour les premiers problèmes, soit les frames et les pages orphelines, on passe au PHP, en remplaçant l’utilisation des frames par l’utilisation de la fonction include(), qui permet tout comme les frames de n’avoir qu’un fichier à éditer pour modifier le menu, sans les inconvénients qu’ont les frames au niveau de l’ergonomie. Puisque Free supporte PHP, ce virage peut donc être fait sans problème !
En combinant avec l’utilisation des includes de PHP, le passage à une structure sans tableaux et la séparation de la présentation du contenu permettrait à la fois d’accélérer le chargement des pages en permettant la mise en cache du styles, et de faciliter la maintenance du code.
Style, ergonomie et accessibilité,
On peut dire que le design est vivant avec l’orange et les chibis et autres dessins manga qui rappelle les origines nippones de Pixia, mais des améliorations auraient pu être apportés.
Je mettrais ma main au feu que le design a été conçu sur un écran cathodique, puisque sur mon écran LCD, j’ai des difficultés à lire les liens qui sont blancs sur fond orangé. Un orangé un poil plus foncé aurait pu rendre ces liens plus lisibles.
L’effet au survol des liens du menu rend la lecture encore plus difficile, avec cet effet d’ombrage qui cause des variations de couleurs derrière les lettres blanches. Quand il y a trop de variations derrière un texte, ça gêne la lecture. Essayez de lire le mot « Téléchargement » sur ces deux captures :
De plus, je remarque que c’est des images qui sont utilisées et qui sont gérées par Javascript. Même si les liens sont tout à fait fonctionnels même si Javascript est désactivé, le fait d’utiliser des images fait en sorte que si on navigue avec Lynx, on n’a que les noms des images au lieu du titre des liens à cause de l’absence de texte de remplacement, comme vous pouvez le voir dans cette capture :
On peut dire la même chose des autres images présentes sur le site : Aucun d’entre eux ne semble avoir de texte de remplacement !
Pour revenir au style, je remarque que dans la page Contact, la présence de pubs Google brise l’unité, car ces pubs dépassent largement la largeur du corps alors qu’ils ne devraient pas.
De plus, à l’accueil, je trouve plutôt étrange visuellement de voir des liens hors de la largeur de la page, alors qu’il y aurait eu un meilleur moyen de les intégrer. Une rubrique « Liens » par exemple, aurait fait l’affaire.
Et finalement, comme je l’avais déjà dit dans la critique précédente, les designs « icy », c’est à dire les designs fixes alignés à gauche, ne sont pas conseillés, car plus la résolution du visiteur sera grande, plus l’espace à droite sera énorme, et ce vide peut justement gêner le visiteur, comme c’était le cas de mon père qui avait déjà réduit sa résolution d’écran parce que le vide à droite sur l’ancienne version de GlobeTrotter.net le gênait. Il vaut donc mieux faire usage d’un style « liquid » (design fixe centré) ou d’un style extensible.
Conclusion
Ce site aurait énormément à gagner en ergonomie, en référencement naturel et en facilité de maintenance en adoptant PHP pour gérer le haut, le menu et le bas ainsi que certains modules hors-forum, et en adoptant de bonnes pratiques basées sur le Web accessible, soit d’éliminer les tableaux de mise en forme et séparer la présentation du contenu.
Pour cela, si un jour l’auteur du site tombe sur ce billet, je lui recommande chaudement ces sites où il pourra apprendre à coder selon les normes du W3C, et à utiliser PHP :
L’utilisation d’un CMS (WordPress, Drupal, …) pour la partie site pourrait également être une bonne solution si le temps manque pour coder. Ces sites sont déjà pré-codés en PHP, et tout comme un système de forum, on n’a qu’à l’installer et après, on a accès à l’administration à partir duquel on peut créer ses pages, publier des articles et gérer les membres ! Pour le choix, il ne faut pas hésiter à demander des avis sur les sites que j’ai cités, et à tester en local avec Wampserver avant d’arrêter son choix final.
Le site a tout à gagner en repartant sur des bases saines et solides qui sauront traverser le temps.
