Eolindel.free.fr - site d'aide sur foobar2000

Bonjour à tous,

je voudrais des avis sur mon site web personnel:
http://eolindel.free.fr/foobar0.9/index.php

Choses que je sais déjà:
-Le menu ne nécéssite le javascript que pour internet explorer, sinon il marche très bien (il a été pris ici : http://pompage.net/pompe/deroulants/ )
- problème d'alignement inférieur pour l'image du menu sous explorer 6 (concerne environ 10% de mes visiteurs). Je vais avoir du mal à le corriger n'ayant pas ladite version d'explorer..
- en 800*600, le logo dépasse, mais si on reste calé à gauche, rien ne dépasse du contenu.
- encore un petit coup de pouce à donner à l'accessibilité via des accesskey, même si l'utilisation d'un logiciel "graphique" pour les non voyants me semble assez incongru
- les coins des menus sont visibles (essentiellement pour le premier sous menu sur le coin en haut à gauche), le problème, c'est que si je met de la transparence, le fond étant gris clair, on voit encore plus les coins
- décalage du "cadre" avec le contenu pour le bord inférieur
- un contraste un peu faible ce qui amène certaines personnes à le qualifier de "tristounet", perso, je trouve ça encore lisible et mieux que la version précédente (visible ici : http://eolindel.free.fr/images/Image3.png 153 Ko 1280*1024)
- décalage entre le menu et les différentes versions de la page disponibles
- mes talents graphiques étant bien pauvres (comme vous pourrez vite le voir) je suis guère capable de faire mieux.
-il y a un unique tableau vide pour forcer la largeur de 100%, ce "hack" a été mis pour ne pas avoir de souci pour des navigateurs multiples qui ne gèrent pas la taille de la même manière.

J'aurais besoin essentiellement d'avis sur le menu, les polices employées et les titres, ainsi que l'ergonomie.

Le site ayant pas mal de contenu, le coté graphique a été un peu laissé de coté au profit de l'ergonomie. (enfin j'espère )
Modifié par Eolindel (27 Sep 2007 - 22:23)

Salut,

Bon, ma spécialité étant le graphisme, je n'aurais pas grand chose à te dire dans ce sens, vu que le site en est dénué.

Cependant, on peut faire quelque chose de peu graphique, tout en le rendant un minimum attractif.

Là c'est gris, gris et encore gris... C'est un peu triste.

La lisibilité est loin d'être optimum, car le contraste entre le fond et le texte est plutôt faible, et en plus en grande résolution tes lignes sont trop longues, ce qui devient très vite pénible à lire.

Une chose me choque terriblement :

		<ul>
			<li class="top_menu"><img src="img/top2.png" alt="top"></li>
			<li><a href="todo.php">To do</a></li>
			<li><a href="news.php">News</a></li>
			<li class="bottom_menu"><img src="img/bottom2.png" alt="bottom"></li>
		</ul>

Tu ajoutes des éléments à ta liste pour disposer des images qui ne sont que purement décoratives. Pourquoi ne pas faire appel à elle via la feuille de style au lieu de les insérer manuellement dans le code, ce qui l'alourdit considérablement. De plus niveau accessibilité, je ne pense pas que la présence de ces puces facilite la navigation, surtout avec des attributs alt aussi inutiles que "top" et "bottom"

Quelque chose du genre :
HTML

		<ul>
			<li><a href="todo.php">To do</a></li>
			<li><a href="news.php">News</a></li>
		</ul class="last">

CSS

 ul {
  background: url(top2.png) no-repeat top left;
}

li.last {
  background: url(bottom2.png) no-repeat bottom left;
}

Ce serait plus propre, plus léger, et plus simple pour toi si tu veux faire une modification de style.

Salut,

D'une manière générale, je rejoins l'avis de Mikachu. Le site est bien terne de par son manque de contraste. Je pense que tu pourrais foncer un peu le fond et ajouter quelques effets d'ombrage, ce qui donnerait plus de relief et un côté moderne.

Concernant les marges et autres remplissages, je pense qu'il ne faut pas avoir peur d'en rajouter car effectivement, les lignes sont longues et pénibles à lire sur certains écrans (en 1600x1200 sur un 24pces, c'est désagréable en tout cas).
Tu pourrais par exemple espacer ton menu et ton contenu des bords de la fenêtre ainsi qu'entre eux, ce qui réduirait déjà cette longueur de ligne. De même, tu peux encore augmenter la zone de remplissage (padding) du menu et de la zone principale. Ces zones de "blanc" rendraient le tout plus agréable à l'oeil.

Pour les titres, tu pourrais choisir une police un peu moins courante et personnaliser les lignes qui les englobent, en ajoutant un pictogramme par exemple ou en les rendant un peu moins... droites et si conventionnelles.

Toujours pour rendre la lecture plus agréable, j'augmenterais très légèrement l'espace inter-lignes.

Par ailleurs, des liens d'accès rapides placés en début de page seraient bienvenues car ton menu est conséquent.

Une section recherche serait aussi bien utile. Il y a pas mal de contenu et ça peut servir à mieux s'y retrouver.

As-tu essayé de désactiver les images ? Tu devrais... Ton menu devient dès lors illisible, ton titre est inexistant mais dans les coins, il y a marqué: "coin". Bref, je pense que tu devrais lire cet article pour savoir comment et où placer tes images et les textes alternatifs, si besoin est.

Concernant ton menu, le problème n'est pas Javascript (très utile pour un menu déroulant) mais plutôt le fait que ce menu n'est pas optimisé pour la navigation clavier. Il y a d'autres problèmes par rapport aux menus déroulants mais l'exemple situé ici est déjà plus accessible.

Bonne continuation.
Modifié par koala64 (27 Sep 2007 - 16:17)

Premièrement, merci pour ces commentaires.

@Mikachu, je suis en train d'essayer d'implémenter ta solution pour les coins du menu, mais ça me pose d'autres problèmes, donc je suis en train de tester des solutions pour que ça marche.

Pour les grandes résolutions, le problème est de faire quelque chose qui aille du 800*600 au résolution pour des écrans 24 pouce, les contraintes varient légèrement . Je vais surement essayer des solutions avec des tailles en pourcentage plutôt qu'en pixel

@koala : j'ai amélioré les choses pour la navigation sans image, j'aurais encore pas mal de choses à vérifier sur les alt, mais j'ai essayé de supprimer les principaux alt qui gênent, merci pour cette remarque.

Pour la navigation au clavier, je vais essayer d'améliorer ça, mais j'aimerai autant que possible éviter le javascript qui est désactivé par 10% environ de mes visiteurs.

A propos du menu, toutes les solutions intéressantes que j'ai vu existent pour des menus horizontaux et ne s'appliquent pas aux menus verticaux (appel au javascript et menu déroulé s'il est désativé). Or j'ai trop de rubriques dans mon menu pour pouvoir le passer en vertical. Et l'accès à toutes les pages depuis n'importe quelle page est à mon avis nécéssaire pour mon site
Modifié par Eolindel (27 Sep 2007 - 23:05)

Eolindel a écrit :
j'ai amélioré les choses pour la navigation sans image, j'aurais encore pas mal de choses à vérifier sur les alt, mais j'ai essayé de supprimer les principaux alt qui gênent, merci pour cette remarque.

Le principal problème, c'est que des images qui devraient se trouver dans le CSS sont dans le XHTML (les images décoratives). Les images représentant un réel contenu, en revanche, doivent bien se trouver dans le XHTML et leur attribut alt doit être correctement renseigné.

a écrit :
Pour la navigation au clavier, je vais essayer d'améliorer ça, mais j'aimerai autant que possible éviter le javascript qui est désactivé par 10% environ de mes visiteurs.

A propos du menu, toutes les solutions intéressantes que j'ai vu existent pour des menus horizontaux et ne s'appliquent pas aux menus verticaux (appel au javascript et menu déroulé s'il est désativé). Or j'ai trop de rubriques dans mon menu pour pouvoir le passer en vertical.

Pour donner accès à l'ouverture de chaque menu ainsi qu'à la sélection de chaque item via le clavier, il faut agir sur des éléments focusables (des liens dans le cas de ce menu). Si un élément n'est pas un lien et bloque la navigation, alors il faut en intégrer un via JS pour permettre l'accès. De là, il faut combiner les événements de type mouseover avec focus et mouseout avec blur. Par ailleurs, il faut planquer les listes de liens via JS. Ainsi, le menu apparait bien déroulé lorsque ce langage est inactif, que le menu soit horizontal ou vertical.

Tant que Javascript n'est pas utilisé de manière intrusive, il n'y a pas de contre-indication à son emploi. Ce langage est fait pour améliorer l'ergonomie et non pour la détériorer.

Je te conseille de lire ce tuto pour plus de précisions :
http://css.alsacreations.com/Tutoriels-JavaScript/bonnes-pratiques-javascript

a écrit :
Et l'accès à toutes les pages depuis n'importe quelle page est à mon avis nécéssaire pour mon site

Pourquoi donc ? Un plan de site permet la même chose. Un menu, ça sert surtout à accéder d'un point A à un point B rapidement. Plus ce menu est complexe, plus la prise en main est difficile, et le gain de rapidité devient vite négligeable vu qu'il faut chercher le bon item du fait que tout n'est pas visible d'entrée de jeu. (Tu ne t'en rends peut-être pas forcément compte du fait que tu dois sans doute connaitre ton menu par coeur mais ce n'est pas forcément le cas de tes visiteurs). Le soucis, c'est qu'en terme d'accessibilité, tu démultiplies des soucis qui sont durs à corriger...
Modifié par koala64 (28 Sep 2007 - 15:44)

Eolindel a écrit :
je voudrais des avis sur mon site web personnel:
http://eolindel.free.fr/foobar0.9/index.php

Cette image peut voir sans doute son poids se diviser par 5 sans trop de problèmes. Même remarque pour les captures d'écran (qui de plus sont mal encodées, et mal restituées). Essayez de capturer des restitutions avec des couleurs pleines, et utilisez le format PNG.

Je suis pas mal occupé en ce moment, j'essaierai donc de corriger les critiques émises dans les semaines qui viennent et j'ai dû faire un retour en arrière pour le menu avec fond gris foncé vu que la solution à laquelle j'avais pensé rendait les sous menu inaccessibles.

Juste à propos du menu, la navigation sur mon site n'est pas linéaire, voici un plan avec les liens logiques entre les pages indiqués (les liens oranges sont ceux oubliés)
http://eolindel.free.fr/images/plansite.png

Il y a quatre grandes directions, mais tout est assez intimement lié.
De plus étant donné qu'il y a pas mal de contenu, il arrive que des gens aient besoin d'informations très précises sans passer par les généralités avant. Ceci dit, je pense essayer de faire une partie en fin de page avec les pages à contenu similaire pour aider la navigation.