Avis sur http://www.ecupodju.ch/

Bonjour,

Comme d'hab, j'aimerais un avis sur ce site : Ecupodju

Tout ce qui touche à l'ergonomie, au design, etc. etc.

Merci d'avance...
Modifié par le rouge (01 Sep 2008 - 08:39)

Bonjour

Il y a un <tr> en trop d'après le validateur

Les textes alternatifs de tes images ne sont pas pertinents : "Voir 102.jpg" sur les photos aléatoires, ou manquant quand il devraient être là (l'image du header qui contient du texte). Certains intitulés ne sont pas très parlant "CSS Strict" et "XHTML Strict", on perd dans le texte alternatif la valeur du picto "coché" qui pourrait ici être transcrit par "valide".

Le problème principal de l'absence de texte alternatif sur l'image du header, est que CSS et images désactivé, la page n'a pas de titre.

Je trouve surprenant que "Nouvelles" et "Autres info" qui graphiquement sont différencié (le second étant légèrement plus petit que le premier) et qui ne semblent pas appartenir au même niveau hiérarchique, le soit (h1).

Edit : J'oubliais, font-size en pixels. -> impossibilité d'augmenter la taille du texte sous IE6 !
Modifié par Yasashii (22 Aug 2008 - 12:25)

Bonjour,

Oui pour le <tr> j'avais vu en fait, mais j'ai oublié de résoudre. Je ferai ça tantôt...

Pour les textes alternatifs de mes images aléatoires, comment puis-je les améliorer?

Pour le es CSS Strict etc. tu as raison, mettre un valide est plus percutant.

Pour le titre de la page, une nouvelle, je te donne raison.

Pour le titre, c'est simplement que le h1 a un bloc parent différent, je ne vois pas ou est le problème?

font-size, tu me conseilles quoi?

Merci

le rouge a écrit :
Pour les textes alternatifs de mes images aléatoires, comment puis-je les améliorer?

assez difficilement je pense, personnellement j'utiliserais les données exif de l'image (dans un des champs exif tu met la description de l'image que tu peux ensuite récupérer avec la classe exif de php). Il y a aussi la solution d'une base de données, mais si tu n'en utilise pas déjà une, c'est une solution plus lourde à installer.

le rouge a écrit :
Pour le titre, c'est simplement que le h1 a un bloc parent différent, je ne vois pas ou est le problème?

Ils ont un bloc parent commun : body. Désactive les style CSS et tu aura exactement le même rendu, si ce n'est pas ce qui doit être, alors ils doit y avoir une différence de niveau en eux.

le rouge a écrit :
font-size, tu me conseilles quoi?

em ou %
Alsa a un excellent article sur comment faire : http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em

le rouge a écrit :
Merci

De rien

Ok, bon j'utilise une base de donnée pour les images, mais je me vois mal ajouter un champs description et le remplir pour plus de 400 images...

Sinon, pour les h1 est-ce vraiment un problème? Je ne vois pas le souci en fait.

J'ai jamais rien compris au em, aller je m'y mets!

Merci encore...

Pour les images, c'est pas un point très gênants, c'est juste un peut domage d'avoir comme titre de lien "voir numéro_de_l'image.jpg". ça ne gène pas la navigation.

Par contre les titres : ils indiquent une hiérarchie dans la page. L'utilisation de hn de même niveau doit donc être utilisé pour indiquer des élément de même niveau hiérarchique et d'autant plus pour h1. Si tu considère que les liens "Nouvelles" et "Autres info" sont du même niveau hiérarchique alors ça ne pose pas de problème. Mais si ce n'est pas le cas et que les titres de ton menu de gauche sont moins important que le titre de la section du site que l'on visite actuellement leur est supérieure alors il n'est pas normal que dans le code ils aient le même niveau.

J'ai signalé ce détail, car les titres ont des tailles différentes, ce qui indique généralement des niveaux de titre également différents, et proportionnels à la taille des caractères.


Les em c'est pas tellement différent des pixels au final, tu as le droit de bidouiller le code en modifiant la valeur des font-size pour trouver la taille qui te plait

Donc si je résume, pour le titre, je devrais mettre h1 pour le titre de page, h2 pour le titre Autre infos, h3 pour le sous-titre de la page, h4 pour le sous-titre de Autres info etc.?

Vais tester ces em alors... je me réjouis

Non pas forcément, il peut y avoir plusieurs h1, s'ils sont d'égale importance.

moi je ne vais parler que d'ergonomie.

déjà les gouts et les couleurs... je trouve juste le site de la "jeunesse" un peu triste et dark. Why so serious? avec le logo très Heinekenien j'aurais bien vu des teintes vert et rouge!

Je trouve qu'il y a un petit déséquilibre avec la colonne de droite qui est un peu vide. Même si c'est cool d'avoir le calendrier en bas de page, il serait peut-être plus utile justement dans cette colonne.

A propos du calendrier, on vois mal les dates où il y a des événements, le contraste aurait pu être un peu plus fort avec les jours où il n'y a rien.

Pour en revenir à cettye colonne de gauche, je trouve qu'on voit mal qu'elle sert pour les niveaux secondaires de navigation: c'est qu'au bout d'un certain temps que j'ai vu qu'il y avait des liens vers les pages de la même rubrique. Soit parce qu'on ne les voit pas assez, soit parce que c'est à droite et non à gauche (sens de lecture), soit parce que ce n'est pas juste en-dessous des onglets de navigation principale.

Avec une lecture rapide de la page et leur habitude, je ne pense pas que les visiteurs baladent leurs yeux sur cette colonne pour poursuivre leur navigation. Si tu veux quand même laisser tes liens là, "Autres infos" c'est vraiment pas assez explicite, et les liens sont trop discrets.

EDIT: mais c'est un joli site, enfin y'a du taf quoi!
Modifié par Thibs (22 Aug 2008 - 18:19)

a écrit :
Edit : J'oubliais, font-size en pixels. -> impossibilité d'augmenter la taille du texte sous IE6 !

Et sous IE7 si l'on utilise pas le zoom mais affichage > taille du texte

En déclarant la taille de la police en em, attention à bien déclarer ce qui suit dans la feuille de style pour eviter un bug d'IE et se retrouver avec une police énorme en cas de redimensionnement.

html
{
font-size:100%;
} 

Modifié par knarf (22 Aug 2008 - 20:11)

Ok merci knarf, j'y penserai...

Thibs a écrit :
moi je ne vais parler que d'ergonomie.

déjà les gouts et les couleurs... je trouve juste le site de la "jeunesse" un peu triste et dark. Why so serious? avec le logo très Heinekenien j'aurais bien vu des teintes vert et rouge!

Je trouve qu'il y a un petit déséquilibre avec la colonne de droite qui est un peu vide. Même si c'est cool d'avoir le calendrier en bas de page, il serait peut-être plus utile justement dans cette colonne.

A propos du calendrier, on vois mal les dates où il y a des événements, le contraste aurait pu être un peu plus fort avec les jours où il n'y a rien.

Pour en revenir à cettye colonne de gauche, je trouve qu'on voit mal qu'elle sert pour les niveaux secondaires de navigation: c'est qu'au bout d'un certain temps que j'ai vu qu'il y avait des liens vers les pages de la même rubrique. Soit parce qu'on ne les voit pas assez, soit parce que c'est à droite et non à gauche (sens de lecture), soit parce que ce n'est pas juste en-dessous des onglets de navigation principale.

Avec une lecture rapide de la page et leur habitude, je ne pense pas que les visiteurs baladent leurs yeux sur cette colonne pour poursuivre leur navigation. Si tu veux quand même laisser tes liens là, "Autres infos" c'est vraiment pas assez explicite, et les liens sont trop discrets.

EDIT: mais c'est un joli site, enfin y'a du taf quoi!

Alors, concernant les couleurs, je ne trouve cela pas très dark, mais comme tu dis les goûts et les couleurs. Là ça fait un peu Guiness style mise à part le logo. Bref, passons...

Pour la colonne de droite, que me recommandes-tu par rapport à Autres infos, que mettre de plus explicite?

Et pour finir, pour le calendrier, je me suis fait la même remarque, d'ailleurs ça va changer... Et donc les liens seront plus voyants...

Merci pour tes remarqes...